如何在jQuery UI对话框中提交表单并显示其响应 [英] How to submit form in jquery ui dialog and display its response

问题描述

嗨 我正在使用jquery ui对话框，并尝试使用ajax提交表单并显示其响应.直到表单对话框和Ajax要求其正常工作，但不知道如何在同一对话框中显示其响应.任何建议都会对我有所帮助.

Hi I'm using jquery ui dialog and trying to submit form using ajax and display its response. Till form dialog and ajax request its working fine but don't know how to display its response in same dialog. Any suggestion going to help me.

推荐答案

假设您具有以下标记

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

使用此代码，您可以设置对话框

With this code you setup the dialog

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

使用此代码，您可以显示对话框并包含ajax调用的结果

With this code you show the dialog and include the results of an ajax call

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

使用此代码，您可以在对话框中提交表单，然后在一切正常的情况下将其关闭，或者在出现错误的情况下再次显示该表单

With this code you submit the form in the dialog and then close it if everything is ok or display again the form if has errors

$.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');
        }
    }
});

希望有帮助！

这篇关于如何在jQuery UI对话框中提交表单并显示其响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！