在Ajax调用期间更新jQuery Item

Question

I am making an ajax call to send out a couple of emails when the user clicks a button. I am trying to update a "Please wait..." div before and after the call with the status, as well as report any errors. The problem... is that the div doesn't actually update until the ajax call is complete.

If I comment out the ajax call the status update works fine, but fails if the ajax call takes place. My Windows programming experience tells me the div needs to be refreshed, but I'm not sure how this is done, or if this is the right method.

For example:

$("#msgEmail").show();
$("#msgEmail").html("Preparing to send");
$.ajax({ blah blah blah...

Any pointers in the right direction will be much appreciated!

On nnnnnn's suggestion I started testing on other browsers. The problem occurs on Chrome and Safari, but works as expected on Firefox and SeaMonkey. It sure looks like he's right about this. Now I just need to figure out to implement setTimeout() in this scenario.

Update: Code: .click(function() { $('#myTable :checkbox:checked').each(function() {

            sId = $(this).attr('cid');
            sName = $(this).attr('cname');

            ret = true;
            $("#msgImage").slideDown();

            sUpdate = 'Sending alerts to class: '+ sName;
            $("#msgEmail").slideDown();
            $("#msgEmail").html(sUpdate);

            sSubject = "Notificatiom";
            sMessage = $('#message').val();
            sData= "cid="+sId+'&sname='+sName+'&subject='+sSubject+'&message='+encodeURIComponent(sMessage);
            $.ajax({
              url: 'dostuff.php',
              data: sData,
              dataType: 'text',
              type: 'POST',
              async: false,
                success: function (msg) 
                {
                  if(msg >= '1')    
                  { 
                    ret = true;
                  }
                }
            });

        if(ret)
            $("#msgEmail").html('Finished sending alerts');


        $("#msgImage").slideUp();
        ret = false;
        return false;
    }) 

Answer 1

Place your ajax call in the callback for 'slideDown'. Set the message before calling 'slideDown'. This will ensure your message is updated before the ajax call is sent.'

sUpdate = 'Sending alerts to class: ' + sName;

$("#msgEmail").html(sUpdate);
$("#msgEmail").slideDown(function() {
    sSubject = "Notificatiom";
    sMessage = $('#message').val();
    sData = "cid=" + sId + '&sname=' + sName + '&subject=' + sSubject + '&message=' + encodeURIComponent(sMessage);
    $.ajax({
        url: 'dostuff.php',
        data: sData,
        dataType: 'text',
        type: 'POST',
        async: false,
        success: function(msg) {
            if (msg >= '1') {
                ret = true;
            }
        }
    });

});

Answer 2

I ll get you an on hw this stuff is going to be

$(document).ready(function(){
   $.ajax({
    url :'YOur url',
    .....
   .....

    ajaxSend :function(){
    $('#yourdiv').html('please wait...');
   }
   success:function(msg){
      if (msg >= '1') {
       $('#yourdiv').html('validated');
      }

   }
});

}):