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.
2 Answers
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!