Javascript JQuery:重新打开模式弹出窗口
我在一个经典的ASP页面上有一个JQuery模式弹出表单。它设置为用户单击链接打开表单。他们输入电子邮件地址,然后提交表格。我想做的是检查电子邮件是否在我的数据库中,如果没有,请重新加载带有错误消息的模式弹出表单 该表单工作正常,但如果没有为该表单设置另一个弹出窗口,而未找到电子邮件,我不确定如何再次弹出该表单。我刚刚开始JQuery,如果这是一个简单的问题,那么很抱歉。我环顾了四周,但没有找到任何这样的例子 以下是JQuery代码:Javascript JQuery:重新打开模式弹出窗口,javascript,jquery,Javascript,Jquery,我在一个经典的ASP页面上有一个JQuery模式弹出表单。它设置为用户单击链接打开表单。他们输入电子邮件地址,然后提交表格。我想做的是检查电子邮件是否在我的数据库中,如果没有,请重新加载带有错误消息的模式弹出表单 该表单工作正常,但如果没有为该表单设置另一个弹出窗口,而未找到电子邮件,我不确定如何再次弹出该表单。我刚刚开始JQuery,如果这是一个简单的问题,那么很抱歉。我环顾了四周,但没有找到任何这样的例子 以下是JQuery代码: <script type="text/javascri
<script type="text/javascript">
$(function () {
//Modal pop-up form
// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
$("#dialog:ui-dialog").dialog("destroy");
var email = $("#email"),
allFields = $([]).add(email);
tips = $(".validateTips");
function updateTips(t) {
tips
.text(t)
.addClass("ui-state-highlight");
setTimeout(function () {
tips.removeClass("ui-state-highlight", 1500);
}, 500);
}
function checkLength(o, n, min, max) {
if (o.val().length > max || o.val().length < min) {
o.addClass("ui-state-error");
updateTips("Length of " + n + " must be between " +
min + " and " + max + ".");
return false;
} else {
return true;
}
}
function checkRegexp(o, regexp, n) {
if (!(regexp.test(o.val()))) {
o.addClass("ui-state-error");
updateTips(n);
return false;
} else {
return true;
}
}
$("#dialog-form").dialog({
autoOpen: false,
height: 350,
width: 350,
modal: true,
buttons: {
"Send Login": function () {
var bValid = true;
allFields.removeClass("ui-state-error");
bValid = bValid && checkLength(email, "email", 5, 80);
// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
bValid = bValid && checkRegexp(email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "Please enter a valid email address.");
if (bValid) {
$("#users tbody").append("<tr>" +
"<td>" + email.val() + "</td>" +
"</tr>");
$(this).dialog("close");
$("form[name='modalPopup']").submit()
}
},
Cancel: function () {
$(this).dialog("close");
}
},
close: function () {
allFields.val("").removeClass("ui-state-error");
}
});
$("#send-password")
.click(function () {
$("#dialog-form").dialog("open");
});
});
</script>
$(函数(){
//模态弹出窗体
//解决演示系统中缺陷的方法(http://dev.jqueryui.com/ticket/4375),忽略!
$(“#dialog:ui dialog”).dialog(“销毁”);
var email=$(“#email”),
所有字段=$([])。添加(电子邮件);
提示=$(“.validateips”);
函数更新(t){
提示
.文本(t)
.addClass(“ui状态突出显示”);
setTimeout(函数(){
removeClass(“ui状态突出显示”,1500);
}, 500);
}
函数校验长度(o、n、最小值、最大值){
如果(o.val().length>max | | o.val().length
以下是打开表单的链接:
<strong>Forgot your login?:</strong> <a href="#" id="send-password">click here</a></p>
<div id="dialog-form" title="Send My Login">
Enter the email address associated with your account. Your password will be sent to you.
<br />
<strong>If you do not have an email address</strong>, or do not
remember it, please contact your Human Resources department to have your login
provided to you.
<p class="validateTips"></p>
<form action="SendLogin.asp" method="Post" name="modalPopup">
<fieldset>
<label for="email">Email</label>
<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
</div>
忘记登录了?:
以下是表格:
<strong>Forgot your login?:</strong> <a href="#" id="send-password">click here</a></p>
<div id="dialog-form" title="Send My Login">
Enter the email address associated with your account. Your password will be sent to you.
<br />
<strong>If you do not have an email address</strong>, or do not
remember it, please contact your Human Resources department to have your login
provided to you.
<p class="validateTips"></p>
<form action="SendLogin.asp" method="Post" name="modalPopup">
<fieldset>
<label for="email">Email</label>
<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
</div>
输入与您的帐户关联的电子邮件地址。您的密码将发送给您。
如果您没有电子邮件地址,或者
记住,请联系您的人力资源部门进行登录
提供给你的。
电子邮件
非常感谢您的帮助!首先关闭对话框有什么特别的原因吗 我要做的是保持对话框打开,并使用
$.post()
所以你的按钮处理程序会变成这样:
if (bValid) {
$("#users tbody").append("<tr>" +
"<td>" + email.val() + "</td>" +
"</tr>");
$.post('SendLogin.asp',$("form[name='modalPopup']").serialize(),function(data){
if (data.success)
{
$(this).dialog("close");
// do some further action..
}
else
{
// tell the user about the problem
}
}, 'json');
}
if(bValid){
$(“#users tbody”).append(”+
“”+email.val()+“”+
"");
$.post('SendLogin.asp',$('form[name='modalPopup'])).serialize(),函数(数据){
if(data.success)
{
$(此).dialog(“关闭”);
//采取进一步行动。。
}
其他的
{
//将问题告知用户
}
}“json”);
}
注意:我将“json”作为第4个参数传递给$.post()
。这会自动将响应处理程序中的数据
参数转换为js对象,但显然需要从服务器返回一些json数据。您可能需要调整此参数以使用经典asp
注2:Firebug是ajax请求调试的朋友
您可以阅读此处使用的函数:
function getQuerystring(key, default_) {
if (default_ == null) default_ = "";
key = key.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regex = new RegExp("[\\?&]" + key + "=([^&#]*)");
var qs = regex.exec(window.location.href);
if (qs == null)
return default_;
else
return qs[1];
}
然后在我的弹出参数中调用它: