JQuery диалог загрузки формы через AJAX, отправить форму обратно в модальный диалог

Question

Я объединил пару вопросов stackoverflow, чтобы получить код ниже. Ссылки загружают форму редактирования в модальном порядке через ajax, но при отправке формы вся страница отправляется и перезагружается. Я хотел бы только модал для перезагрузки.

<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: 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>

Answer 1

Попробуйте отправить форму с помощью метода jQuery load, например:

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

Метод serializeArray преобразует содержимое вашей формы в формат JSON, который принимает метод load. Весь вызов в основном загружает содержимое страницы, которая появляется после отправки, в myDiv. yourFormIdHere - это идентификатор, который вы дали вашему тегу <form>

.

Answer 2

У вас есть два варианта:

• отправить форму через AJAX
• отправить форму на скрытый Ифраме

После отправки обработайте обновление содержимого модели.