How to submit form in jquery ui dialog and display its response

问题

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.

回答1:

Suppose you have the following markup

<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
});

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

Hope it helps!

回答2:

I guess you open your dialog like this:

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

The trick is using the callback function (which gets as parameter the response), and dumping the response into your desired element.

来源：https://stackoverflow.com/questions/4255821/how-to-submit-form-in-jquery-ui-dialog-and-display-its-response

标签

jquery

jquery-ui-dialog