jQuery show() function is not executed in Safari if submit handler returns true

Question

Ok, I've bound a submit event handler to a form. The handler is set up to validate data, then after validation passes disable further form submittal, as well as display a 'Please wait ... processing' message.

Here's the basic structure:

function handler() {
    // Validation stuff goes here.
    ...
    // Validation passes, show message and return true.
    $('#processing-msg').show();  // Show the 'processing' message.
    $form.bind('submit', function() { return false }); // Disable further form submits.
    return true;  // Proceed with form submittal.
}

Up until the very last return statement, if I break before return true, the processing message will show. But if I allow it to return true the message doesn't show up at all, ever. Also the submit button won't appear disabled (another part of the process). This works in pretty much every browser except Safari. I've tried commenting out the submit-disable logic, but no dice.

Update

I haven't been able to completely re-create the issue on jsfiddle. But here you can see how the order of functions called differs in Safari (alerts() happen before message is displayed): http://jsfiddle.net/skttw/3/

What is the version of your Safari? http://docs.jquery.com/Browser_Compatibility — SaidbakR, Jan 03 '13 at 23:46
can you add a jsfiddle test for your code? i'm not sure what you doing but i had some similar looking problem with chrome(same webkit as safari)/firefox before — llamerr, Jan 03 '13 at 23:57
Must be some other conflict, the fiddle works as it should: http://jsfiddle.net/skttw/2/ — Brian Duncan, Jan 04 '13 at 00:11
If this helps, if I sandwich the `$.show()` call between alerts, the alerts happen, but the show doesn't. Only if I return false... *scratching my head* — Brian Duncan, Jan 04 '13 at 00:31
Here we go, there is something quirky with the order in which things are done: http://jsfiddle.net/skttw/3/ Notice that 'hidden' doesn't show up until after second alert. — Brian Duncan, Jan 04 '13 at 00:42
I just tried the fiddle on Safari 6.0.2 and the "I'm hidden!" text appeared right after the "here" alert or, in other words, right *before* the "andhere" alert. You say it doesn't show up until *after* the "andhere" alert? — Nick, Jan 04 '13 at 04:16
Yep! It doesn't show up until after 'andhere' alert. I will try a Safari upgrade and see. — Brian Duncan, Jan 04 '13 at 05:53
@BrianDuncan Interesting. Which OS are you running? I'm on Mac OS 10.7.5 — Nick, Jan 05 '13 at 03:01

score 2 · Accepted Answer · edited May 23 '17 at 12:22

Asking this question led to the answer: JavaScript commands not executed in order in Safari

Apparently Safari renders changes to the HTML according to its internal tics. So all of the functions called are being executed in order, but are not necessarily rendered yet.

Also, rendering is halted during the execution of certain functions, alert() being one of them, and in my case, the onsubmit event! That was why I was seeing the out-of-order looking results.

So I ended up using a bit of dirtiness:

            var show = function() { $('#processing_msg').show() };
            setTimeout(show,0);

jQuery show() function is not executed in Safari if submit handler returns true

Update

1 Answers1

Linked