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

Question

Hi I am using jquery ui dialog and am trying to submit a form using ajax and display its response. In the form and ajax dialog box, request its work, but do not know how to display its response in the same dialog box. Any suggestion will help me.

Answer 1

Suppose you have the following markup

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

With this code, you set up a 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 the 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 a dialog box and then close it if everything is OK or the form is displayed again if there are 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 this helps!

Answer 2

I think you open your dialog as follows:

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

The trick uses the callback function (which receives the response as a parameter) and discards the response to the desired element.