Execution sequence inside a jquery event handler

I have a big issue with the execution squence inside this jquery handler : Was wondering if anyone has come accross this before:

I have a simple form:

<form action='foo.cgi' id='myForm' >
<input type=text name='name' />
<input type=submit value='Find it!'/>
</form>

when user clicks on Find it! would like to change the cursor to 'progress' before the data is returned through an ajax call:

    $(document).ready(function(){

  $("#myForm ").submit(function(){

   $("body").css("cursor", "progress") ;

   htmlobj=$.ajax({url:server_url,..........);

   }

 }

However: The cursor [line 2 above ] does not change until data is returned through ajax 开发者_如何学Python- Seems like line 3. gets executed before 2.

Any help is greatly appreciated

try like this

$(document).ready(function(){
      //This will be called when your ajax start
     $("body").ajaxStart( function(){
           $(this).css("cursor", "progress") ;
     });

     //this will be called once ajax stop
     $("body").ajaxStop(function(){
         $(this).css("cursor", "pointer") ;
     });

    $("#myForm ").submit(function(){

           htmlobj=$.ajax({url:server_url,..........);
    });

});

I think it is just that the page does not have a chance to update because it is busy working on the ajax call.

You could move the ajax call into a timeout function, so that the cursor update has a chance to execute. Something like

$(document).ready(function(){

  $("#myForm ").submit(function(){

   $("body").css("cursor", "progress") ;
   setTimeout(performAjax,100);

   }

 }

function performAjax() {
    htmlobj=$.ajax({url:server_url,..........);
}