jquery dialog load form via ajax, submit form back to modal dialog

I combined a couple stackoverflow questions to get the code below. The links load the edit form in a modal fine via ajax, but when the form is submitted the whole page submits and reloads. I would like only the modal to reload.

<script charset="utf-8" type="text/javascript">
$(document).ready(function() {

jQuery(".ajax").click( showDialog );

//variable to reference window
$myWindow = jQuery('##myDiv');

//instantiate the dialog
$myWindow.dialog({ height: 350,
width: 400,
modal: true,
position: 'center',
autoOpen:false,
title:'Edit Policy',
overlay: { opacity:开发者_C百科 0.5, background: 'black'},
open: function(type,data) { $(this).parent().appendTo("form"); }
});
}
);

//function to show dialog   
var showDialog = function() {
$('##myDiv').load(
this.href,
{},
function (responseText, textStatus, XMLHttpRequest) {
//if the contents have been hidden with css, you need this
$myWindow.show(); 
//open the dialog
$myWindow.dialog("open");
}
);

//prevent the browser to follow the link
return false;
}

//function to close dialog, probably called by a button in the dialog
var closeDialog = function() {
$myWindow.dialog("close");
}
</script>

You have two choices:

• submit the form via AJAX
• submit the form to a hidden Iframe

After the submit, handle updating the model contents.

Try submitting a form via the jQuery load method like this:

$("#myDiv").load("your_submit_page_url_here", $("#yourFormIdHere").serializeArray());

The serializeArray method will convert your form contents into the JSON format that load method accepts. The whole call will basically load the content of page that results after submit into the myDiv. yourFormIdHere is the id that you gave your <form> tag