在jquery对话框中加载ajax消息

Question

我有一个场景，其中一个对话框正在打开，其中包含表单数据和提交按钮。当我单击此提交按钮时，我需要显示一个覆盖ajax加载图像，并显示一条消息“请稍候......数据是正在更新“。一旦数据得到更新（来自服务器的成功消息），我需要显示另一个覆盖ajax加载图像，其他消息说“你的数据已经过度更新了”。如果服务器出现错误响应，我需要显示overlay ajax loading image，并显示一条错误消息“尝试更新数据时出现问题”。

下面是我用来显示对话框和更新服务器中数据的代码。

$("#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 {

            }
        }   
    }
});

任何人都知道如何实现这个目标？

Answer 1

buttons:{
    'SUBMIT':function(){
        if($('#pop_up_form').valid()){                          

           $('.new-dialog')

            $.ajax({
                url:'a_url_path',
                type:'GET',
                 ....

在我输入$（＆＃39; .new-dialog＆＃39;）的地方，您应该创建一个新的对话框，其背景为gif（＆＃39; ajax loader＆＃39; google中的任何地方），它会是当你改变他的css并使z-index比另一个对话框更大时更有用。当然，当你有答案时关闭它！或者可能只更改内部文本并删除后台加载..

如果答案成功或错误，改变消息的方式相同。