Safari browser not working on Click event to show loading image

Question

I have to show loading image on Cancel button click as shown below.It seems working fine on FF,Chrome but in Safari its not working.

HTML

<div class="loading" id="overlay">
    <div id="loading_message"></div>
</div>

<input type="submit" name="next_action" id="cancel" formnovalidate value="Cancel">

JS

function ShowDialog(){
  $("#loading_message").html('Please Wait');
  $("#loading_message").css('left','52%');
  $('#overlay').show();    
}
$( document ).on( "click",'input#cancel',function(event) {
        ShowDialog();
});

Another thing to add that if I put alert on Click event then It displays alert and then loading image will display as below but without it is not working.

$( document ).on( "click",'input#cancel',function(event) {
        alert('Hello');
        ShowDialog();
});

I have also try with setTimeout function for ShowDialog() to pause and show message but its not working. Can you please advise me? Thanks for your time.

Update I am using Jquery v1.7.2.

Answer 1

Using $(document).on('click','input#cancel') is a lot of elements to read an interaction so to speak. If you're not using a jQuery version less than 1.5 I think it is you can use .click as an eventHandler. Your selector could use a bit of simplifying too. A jQuery select works like this $('element of interest','within this element') but you can build on these greatly. For instance what you've written can also be written as $('input#cancel',document) . But the document isn't required to be looked in because the select will already look within the document.

Another thing I must add. jQuery can only 'run' once the document is loaded. So a document.ready function is required to 'check' that the document has loaded. Here's a better solution for your code.

$(document).ready(function(){//notice the ready function
    $('input#cancel').click(function(event){
        //the element in the selector that initiated the function is now 'this' used as $(this)
        event.preventDefault();//instead, if desired, use return false; to prevent default and propagination
        alert('hello');
        showDialog();
        return true;//to submit the form.
    });
});

functions that aren't called by jQuery listeners don't necessarily need to be within the document.ready function. So we can have these else where within the document and jQuery selectors can still be used.

function showDialog(){
    $("#loading_message").html('Please Wait');
    $("#loading_message").css('left','52%');
    $('#overlay').show();
}

This should help with your safari issue hopefully.