2

I have a div that should appear when saving. The markup for this is similar to this:

<div class="Working" style="display: none;">Message</div>

Later in my code I have some save logic, which does this:

function SaveData() {
    var cancelSave = false;

    $('.Working').text('Saving data ...').show();
    var saveData = { 'Data': myData }; // Actually a lot of logic in here

    if (cancelSave) {
        $('.Working').hide();
    } else {
        $.ajax({
            // bunch of stuff here
            async: false, // tried this both ways
            error: function (rsp) {
                $('.Working').hide();
            },
            success: function (rsp) {
                $('.Working').text('Saved');
                $('.Working').fadeOut(5000, DoNothing());
            }
        });
    }
}

function DoNothing() {
    // Does nothing
}

If I step through the code, the div shows up perfectly when I step through the initial .show() line. However, when I run this at "full speed" ... I never see the "Saving data ..." message. The actual save does take about 5-7 seconds, so there is plenty of time to see the message.

ESDictor
  • 745
  • 2
  • 9
  • 22
  • 1
    I'll guess that somewhere in "a lot of logic" you're setting `cancelSave` to true, or the ajax call fails. As a sidenote, the callback for the `fadeout` doesn't work as it's not referenced but called, and neither does the `fadeout` as it has the wrong case – adeneo Jan 07 '14 at 16:07
  • Trying using a .hidden { display: none } instead of inline styles. – Diodeus - James MacFarlane Jan 07 '14 at 16:08
  • I do love the DoNothing function :). – zozo Jan 07 '14 at 16:08
  • 2
    And.... never ever ever ever use async false, it defeats the entire purpose of ajax – adeneo Jan 07 '14 at 16:10
  • try removing all the `$('.Working').hide();` lines, then adding them back in one at a time and seeing when you stop seeing the div. – andi Jan 07 '14 at 16:11
  • I tried to abbreviate a huge amount of code here in a readable block. Sorry about the typo - I had the fadeOut correct in the actual page. – ESDictor Jan 07 '14 at 16:11
  • 2
    When you step through with the debugger, my guess is there is enough of a delay for the call to return. Keep that in mind. – Anthony Graglia Jan 07 '14 at 16:12
  • Also, I use the inline style="display: none;" a bit because I've found that sometimes if I use javascript to initially hide elements they will flicker briefly on load. – ESDictor Jan 07 '14 at 16:13
  • @trgraglia this was my thought as well .. but I am not sure how to give the element the delay it needs to update. The entire process of saving takes over 5 seconds, so if I need to add a small time-slice for that to display, I'm fine (assuming we're talking 100ms or so). – ESDictor Jan 07 '14 at 16:15
  • How is `cancelSave` supposed to work? Is the user supposed to be able to cancel the save before the function completes? Because that wont happen as the function with reach `$.ajax` synchronously. If you are going to allow a user to cancel a save, it probably needs to be another ajax call to tell the server to cancel the first. Also this: https://developers.google.com/chrome-developer-tools/docs/javascript-debugging you should be able to set a breakpoint and learn all the things. – Fresheyeball Jan 07 '14 at 16:18
  • @Fresheyeball In the logic that builds the saveData object, cancelSave can be set to true if a problem is found in one of the input elements that wasn't handled previously. – ESDictor Jan 07 '14 at 16:21
  • Setup a jsFiddle. Without the cancelSave being global, how is it being updated? You need to show more code before we can help more. – Anthony Graglia Jan 07 '14 at 16:27
  • @ESDictor set a breakpoint, what is the value of cancelSave at the time of the if statement? – Fresheyeball Jan 07 '14 at 16:30
  • @trgraglia please repost your answer. I'm not sure what worked of the many things I've tried, but it now appears to be working. The biggest change I made WAS the async from false to true, so I'm going to mark that as correct. – ESDictor Jan 07 '14 at 16:38
  • @ESDictor It has been undeleted. Glad I could help. – Anthony Graglia Jan 07 '14 at 16:58

1 Answers1

2

The UI is locked up because the ajax async property is set to false. Set it to true and try it. The SaveData method will finish, update the UI to show the "saving data..." text and then update again when the ajax call returns.

Anthony Graglia
  • 5,355
  • 5
  • 46
  • 75