I have a scenario where a dialog box is getting opened with form data and a submit button.When I click on this submit button I need to show an overlay ajax loading image with some message saying "Please wait... Data is being updated". Once data got updated (success message from server) I need to show another overlay ajax loading image with some other message saying "Your Data has been updated sucessfuly.". In case of error response from server I need to show overlay ajax loading image with some error message saying "There is some problem while trying to update data".

Below is the code that I am using to show the dialog box and to update data in server.

======================================================================================

    $("#popup").dialog({ 

        autoOpen: false,

        title : "View/Edit Screen",

        dialogClass : "pop-content pop-header-colr pop-button pop-float",

        width:750,

        height:650,

        modal: true,

        resizable: false,

        show: 'clip',

        buttons:{

            'SUBMIT':function(){

                if($('#pop_up_form').valid()){

                    $.ajax({

                        url:'a_url_path',

                        type:'GET',

                        data:{

                           formData:JSON.stringify(ConvertFormToJSON('#pop_up_form')),

                           bkup_doc_path:$('#bkup_doc_proof').val(),

                           lttr_doc_path:$('#lttr_doc').val()

                        },

                        success: function(data){

                           alert("success");

                        },

                        error:function(xhr,textStatus,errorThrown){

                            alert(errorThrown);

                        }

                    })

                }

                else {

                }

            }

        }

    });

Any one have any idea about how to achieve this?