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