单击“保存”时,我无法使用Jquery Validate验证jQuery UI对话框。
这是我创建Jquery对话框的代码。它从目标a href URL加载对话框:
$(document).ready(dialogForms);
function dialogForms() {
$('a.dialog-form').click(function() {
var a = $(this);
$.get(a.attr('href'),function(resp){
var dialog = $('<div>').attr('id','formDialog').html($(resp).find('form:first').parent('div').html());
$('body').append(dialog);
dialog.find(':submit').hide();
dialog.find('#return').hide();
dialog.dialog({
title: a.attr('title') ? a.attr('title') : '',
modal: true,
buttons: {
'Save': function() {submitFormWithAjax($(this).find('form'));},
'Cancel': function() {$(this).dialog('close');}
},
close: function() {$(this).remove();},
width: 'auto'
});
}, 'html');
return false;
});
}
function submitFormWithAjax(form) {
form = $(form);
$.ajax({
beforeSend: function(data) {
//alert("beforesend");
form.validate();
},
url: form.attr('action'),
data: form.serialize(),
type: (form.attr('method')),
dataType: 'text',
error: function(data) {
alert(data);
$('#result').html(data);
},
success: function(data) {
//alert("success");
$('#result').html(data);
setTimeout("reloadPage()", 500);
}
});
return false;
}
调用了beforeSend
,但它似乎没有调用validate
方法,该方法位于调用Dialog的父页面上。
$(document).ready(function() {
$("#event_form").validate({
rules: {
Name: {
required: true
},
Category: {
required: true
}
},
messages: {
Name: "Please enter an event name",
Category: "Please choose a category"
},
submitHandler: function(form) {
alert("validated");
// $('#loading_1').show();
// $('#proceed_c').hide();
// $(form).ajaxSubmit();
// //form.submit();
},
errorPlacement: function(error, element) {
error.appendTo(element.next(".status"));
}
});
}
beforeSend
中submitFormWithAjax function
的问题,$("#event_form").validate
的位置或submitHandler: function(form)
内的问题是?任何帮助将不胜感激。
答案 0 :(得分:7)
初始化jQueryUI对话框时,它会修改DOM,整个对话框从页面中的位置取出并插入</body>
标记之前。你可以用Firebug看到这个。这会导致Validate出现问题,因为现在表单为空。要解决此问题,请在对话框的open事件中将其附加到表单。这听起来很古怪,但相信我,它有效:)
dialog.dialog({
title: a.attr('title') ? a.attr('title') : '',
modal: true,
buttons: {
'Save': function() {submitFormWithAjax($(this).find('form'));},
'Cancel': function() {$(this).dialog('close');}
},
close: function() {$(this).remove();},
open: function(){
$(this).parent().appendTo($('#event_form'));
},
width: 'auto'
});
编辑:
<form id='event_form'>
<div id="dialog" title="DialogTitle">
</div>
</form>
答案 1 :(得分:2)
对此采取略微不同的方法。我需要重用我的模态形式,所以一旦jquery“创建”模态,我就追加它:
$("#mdl_Subject").dialog({
autoOpen: false,
show: "drop",
hide: "drop",
modal: true,
create: function () {
$(this).parent().appendTo($('#aspnetForm'));
}
});