display message box in jquery according to ajax behavior

Question

I use this jquery code to send request to server and get back response from server. Here I am updating a table with this response data. This process is working perfectly.

My problem is I need to display some message according to the behavior of the script. That mean I need to display a message something similar to 'Loading, Please wait a few seconds' when table is update. And after update the table I need to display a message something like this 'Hurray, you have successfully updated the user table.'

Can anyone tell me how I accomplish this with jquery?

This is my code sofar :

$.ajax({
    type: "POST",
    url: "process.php", 
    dataType: 'html',
    data: { 
        name: $('#name').val(), 
        address: $('#address').val(), 
        city: $('#city').val() 
    },
    success:function(data){
        $('#manage_user table > tbody:last').find('tr:first').before(data);
    },
    error:function (xhr, ajaxOptions, thrownError){
        alert(thrownError);
    }, 
    complete: function(){
        //alert('update success'); 
    }
});

Thank you.

score 1 · Accepted Answer · answered Jun 28 '13 at 09:04

1

You could do that:

$.ajax({
    type: "POST",
    url: "process.php", 
    dataType: 'html',
    data: { 
        name: $('#name').val(), 
        address: $('#address').val(), 
        city: $('#city').val() 
    },
    beforeSend: function(){$('#loading').show();},
    success:function(data){
        $('#manage_user table > tbody:last').find('tr:first').before(data);
    },
    error:function (xhr, ajaxOptions, thrownError){
        alert(thrownError);
    }, 
    complete: function(){
        $('#loading').hide(); 
    }
});

HTML:

<img id="loading" src="loading.gif"/>

CSS:

#loading{display:none}

answered Jun 28 '13 at 09:04

A. Wolff

74,033
9
94
155

can you tell me how can I this messages as popup messages? – TNK Jun 28 '13 at 09:08
You could use jquery dialog (modal) and remove the close button http://stackoverflow.com/questions/896777/remove-close-button-on-jqueryui-dialog or use jquery $.blockUI http://www.malsup.com/jquery/block/stylesheet.html or use your custom popup. There are many ways of doing it – A. Wolff Jun 28 '13 at 09:14

score 0 · Answer 2 · answered Jun 28 '13 at 09:09

You can attach this handler to start when the ajax event is triggered.

$(document).ajaxStart(function() {
         $( ".message" ).text( "Loading table " );
    });

and use the completed handler to allow you to display the finished message

<pre>$(document).ajaxComplete(function() {
   $( ".message" ).text( "Table Loaded" );
});</pre>

display message box in jquery according to ajax behavior

2 Answers2