如何在jQuery UI对话框中提交表单并显示其响应

Question

嗨 我正在使用jQuery UI对话框并尝试使用Ajax提交表单并显示其响应。直到窗体对话框和ajax请求工作正常，但不知道如何在同一个对话框中显示其响应。任何建议会帮助我。

Answer 1

我猜你打开你的对话是这样的：

$.post('xyz.htm', function(data) { $('#mydialog .mytarget').html(data).slideDown(); }); 

诀窍是使用回调函数（如参数获取响应），以及倾销响应到您想要的元素。

Answer 2

假设你有下面的标记

<div id="__DialogPanel" style="display:none" title=""></div> 

有了这个代码，你设置的对话框

$("#__DialogPanel").dialog({ 
    autoOpen: false, 
    resizable: false, 
    position: 'center', 
    stack: true, 
    height: 'auto', 
    width: 'auto', 
    modal: true 
}); 

有了这个代码，您显示对话框，包括Ajax调用的结果

$.ajax({ 
    type: "get", 
    dataType: "html", 
    url: 'some/url', 
    data: {}, 
    success: function(response) { 
     $("#__DialogPanel").empty().html(response).dialog('open'); 
    } 
}); 

使用此代码，您可以在对话框中提交表单，然后在一切正常时关闭它或者如果有错误再次显示表格

$.ajax({ 
    type: 'post', 
    dataType: 'html', 
    url: '/someother/url', 
    async: false, 
    data: $("#myform").serialize(), 
    success: function (response, status, xml) { 
     //Check for error here 
     if (error) { 
      $("#myform").parent().html('').html(response); 
     } 
     else { 
      $("#__DialogPanel").dialog('close'); 
     } 
    } 
}); 

希望它有帮助！