1
我的问题的模式弹出：刷新页面，同时关闭使用jquery
我有一个模式窗体会弹出当我点击提交按钮。模式形式允许用户填写一组字段并请求组织的演示。然后使用codeigniter将表单数据插入到mysql数据库中。当用户提交验证的表单时，模式弹出窗口只显示一个成功消息和一个动态生成的按钮（替换以前的表单），这允许用户关闭模态窗体。
当我点击动态生成的关闭按钮时，模式窗体关闭并刷新页面。
但是，当我单击模式窗体右上角的关闭图标时，我无法做同样的操作（刷新页面）。
我试过使用下面的代码，但我无法刷新模式弹出式关闭事件的页面。
$('#mymodal').on("hidden.bs.modal", function() {
location.reload();;
});
我已经使用jquery.mask.js和jquery.validate.min.js为表单验证为模态形式：
$('#mymodal').on("hidden", function() {
location.reload();;
});
我也使用下面的代码试图。
我的研究：
我已经通过堆栈溢出以下问题了：
- Refresh parent page after closing modal
- How to reload page on closing a Bootstrap 3 modal
- Refresh parent page when jQuery UI Dialog is closed
- Hook into dialog close event
我的模式形式：
<div class="container">
<!-- <form name="" id="" action="" method="get"> -->
<!-- Trigger the modal with a button -->
<div class="col-md-2 col-md-offset-5">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" style="margin:0 auto;">Request a Demo</button>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" id="idmodaldialog">
<!-- Modal content-->
<form name="frmdemo" id="idfrmdemo" method="post">
<div class="modal-content">
<div class="modal-header" align="center">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><strong>Request a Demo</strong></h4>
</div>
<div class="modal-body" id="idmodalcontent">
<div class="row">
<div class="form-group col-md-6">
<label for="txtfirstname">FIRST NAME</label>
<input name="txtfirstname" type="text" class="form-control required" placeholder="Please enter your first name" id="idfirstname" >
</div>
<div class="form-group col-md-6">
<label for="txtlastname">LAST NAME</label>
<input name="txtlastname" type="text" class="form-control required" placeholder="Please enter your last name" id="idlastname">
</div>
</div>
<div class="form-group">
<label for="Email">EMAIL</label>
<input type="email" name="txtemail" class="form-control" placeholder="Please enter your email id" id="idemail">
<div class="divstyle">(Please enter your email id in block letters)</div>
</div>
<div class="form-group">
<label for="idcompany">COMPANY</label>
<input type="text" name="txtcompany" placeholder="Please enter the name of your company" class="form-control" id="idcompany" >
</div>
<div class="form-group">
<label for="Phone">PHONE</label>
<input type="tel" name="txtphone" placeholder="Please enter your phone number" class="form-control" id="idphone">
</div>
<div class="form-group">
<label for="">MODE OF CONTACT</label>
<select name="selmode" id="idmode" class="form-control">
<option value="">Select</option>
<option value="email">Email</option>
<option value="phone">Phone</option>
</select>
</div>
</div>
<div class="modal-footer">
<input type="submit" id="idsubmit" name="submit" value="Submit" class="btn btn-warning" />
</div>
</div>
</form>
</div>
</div>
</div>
我的jQuery的表单验证码：
// Wait for the DOM to be ready
$(function() {
$('#mymodal').on("hidden", function() {
location.reload();;
});
$('#idphone').mask('(000) 000-0000');
// Initialize form validation on the registration form.
// It has the name attribute "frmdemo"
$("form[name='frmdemo']").validate({
// Specify validation rules
rules: {
// The key name on the left side is the name attribute
// of an input field. Validation rules are defined
// on the right side
"txtfirstname": {required:true,firstnameval:true},
"txtlastname": {required:true,lastnameval:true},
"txtemail": {
required: true,
// Specify that email should be validated
// by the built-in "email" rule
email: true,
emailval:true
},
"txtcompany": {
required: true,
companyval:false
},
"txtphone" : {
required : true,
usphoneval:true
},
"selmode" :{
required : true
}
},
// Specify validation error messages
messages: {
txtfirstname: {
required:"Please enter your first name" ,
firstnameval:"Enter proper first name"
//firstnameval:"Enter only alphabets ",
},
txtlastname: {
required:"Please enter your last name " ,
lastnameval:"Enter proper last name"
//firstnameval:"Enter only alphabets ",
},
txtemail: {
required : "Please enter a valid email address",
emailval : "Please enter your corporate email id"
},
txtcompany: {
required :"Please enter the name of your company",
companyval:"Enter a proper company name"
},
txtphone: {
required :"Please enter your phone number",
usphoneval :"Please enter a valid phone number"
},
selmode:"Please select the mode in which we should contact you"
},
// Make sure the form is submitted to the destination defined
// in the "action" attribute of the form when valid
submitHandler: function(form) {
// form.submit();
$('#idmodalcontent').html('Form submitted successfully');
var input = $('<input/>').attr({ type: 'button', name:'btnsubmit', value:'Close', id:'idclose',"class":"btn btn-warning"});
//"data-dismiss":'modal',
$(".modal-footer").html(input);
$("#idclose").on("click",function(){
location.reload();
});
/*$('#idmodalcontent').modal({
onClose: function(dialog){
location.reload(true);
}
});
*/
return false;
}
});
//add your own custom validation rule
//US phone format
$.validator.addMethod("usphoneval", function(value,element)
{
//^\(?([d]{3})\)?[. ]?([d]{3})[. ]?([d]{4})$
if (/^\(?([0-9]{3})\)?[ ]?([0-9]{3})[-]?([0-9]{4})$/.test(value))
{
return true;
} else {
return false;
}
},function()
{
});
//first name : only alphabets
$.validator.addMethod("firstnameval", function(value,element)
{
//^\(?([d]{3})\)?[. ]?([d]{3})[. ]?([d]{4})$
if (/^[a-zA-Z]{1,256}$/.test(value))
{
return true;
} else {
return false;
}
},function()
{
});
$.validator.addMethod("lastnameval", function(value,element)
{
//first character alphabet - rest alphanumeric
if (/^[a-zA-Z][a-zA-Z0-9]{0,256}$/.test(value))
{
return true;
} else {
return false;
}
},function()
{
});
//validate company - first character alphabet,rest only alphabet,dot,spaces
$.validator.addMethod("companyval", function(value,element)
{
if (/^[a-zA-Z][a-zA-Z. ]{1,256}$/.test(value))
{
return true;
} else {
return false;
}
},function()
{
});
$.validator.addMethod("emailval", function(value,element)
{
var n = value.lastIndexOf('@');
var extension = value.substring(n+1).toLowerCase();
if (extension == "gmail.com" || extension=="aol.com"|| extension=="facebook.com"|| extension=="googlemail.com"
|| extension=="hotmail.com" || extension=="hotmail.co.uk" || extension=="yahoo.com" || extension=="yahoo.co.uk"
|| extension=="live.com" || extension=="att.net" || extension=="comcast.net" || extension=="gmx.com"
|| extension=="mac.com" || extension=="me.com" || extension=="sbcglobal.net" || extension=="verizon.net"
|| extension=="msn.com" || extension=="mail.com"|| extension=="email.com" || extension=="games.com"
|| extension=="gmx.net" || extension=="hush.com") {
return false ;
} else {
return true;
}
},function()
{
});
});
你有你的关闭按钮，一个id那么为什么不使用'$（ '＃idclose'）上（ '点击'，函数（）{}）;' – Qsprec
@ A.OzanEkici最好是使用模态的onclose事件，因为它会在其他情况下触发，例如如果用户使用退出键关闭模式。最终取决于用例。 –
是的@MohitBhardwaj你是对的。但那只是解决问题的另一种方式。 – Qsprec