如何在ajax成功函数上调用pop up div [英] How do I call pop up div on ajax success function
本文介绍了如何在ajax成功函数上调用pop up div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
< div id =pwdModalclass =white-popup mfp-with-anim mfp-hide>
< div id =ForgotPassDiv>
< h3 class =text-center>忘记/更改密码< / h3>
< div class =text-center>
< div class =panel-body>
< fieldset>
< div class =form-group>
< input class =form-control input-lgplaceholder =E-mail Addressid =txtForgotPassEmailname =emailtype =email/>
< / div>
< input class =btn btn-lg btn-primary btn-blockvalue =发送我的密码id =btnForgotPasstype =submit/>
< lable>新密码将发送到您的官方电子邮件ID< / lable>
< / fieldset>
< / div>
< / div>
< / div>
< div id =ChangePassDivstyle =display：none>
< h3 class =text-center>更改密码< / h3>
< div class =text-center>
< div class =panel-body>
< fieldset>
< div class =form-group>
< input class =form-control input-lgplaceholder =输入您的4位数OTPid =txtChangePassOTPname =OTPtype =password/>
< input class =form-control input-lgplaceholder =输入新密码id =txtNewPassname =NewPasstype =password/>
< input class =form-control input-lgplaceholder =重新输入新密码id =txtConfirmPassname =ConfirmPasstype =password/>
< / div>
< input class =btn btn-lg btn-primary btn-blockvalue =Doneid =btnChangePasstype =submit/>
< / fieldset>
< / div>
< / div>
< / div>
< / div>
这是弹出更改密码，
我试图在AjaxSuccess函数上调用此弹出窗口
$（＃btnLogin）。click（function（）{
debugger;
var uName = $（＃txtUserName）。val（）;
var pass = $（＃txtPassword）。val（）;
var UserType = @ Html.Raw（Json.Encode（ViewBag.Usertype））;
if（uName =='' || pass ==''）{
alert（请输入必填字段。）
}
else {
调试器;
$。 ajax（{
类型：POST，
url：/ MainIndex / ValidateUser，
dataType：json，
data：{userName：uName，密码：pass}，
成功：函数（info）{
if（info ==1）
{
var url =/ Latest / LatestReport;
window.location.href = url;
}
else if（info ==5）
{
var url =/ Latest / LatestReport;
window.location.href = url;
}
else if（info ==4）
{
var url =/ PrintedReport / PrintedReportMain;
window.location.href = url;
}
else if（info ==6）
{
// var url =/ Events / InnerConference;
var url =/ NewConference / iifl_conference;
window.location.href = url;
}
else if（info ==7）
{
var url =/ AboutUs / ResearchTeam;
window.location.href = url;
}
else if（info ==8）
{
var url =/ AboutUs / IIFLTeam;
window.location.href = url;
}
else if（info ==9）
{
var url =/ AboutUs / SalesTradingTeam;
window.location.href = url;
}
else if（info ==10）
{
var url =/ AboutUs / IBTeam;
window.location.href = url;
}
else if（info ==11）
{
var url =/ AboutUs / SettlementAndOp;
window.location.href = url;
}
else if（info ==12）
{
var url =/ AboutUs / Leadership;
window.location.href = url;
}
其他
{
alert（请输入有效的电子邮件ID和密码）
$（＃txtUserName）。val（ ）;
$（＃txtPassword）。val（）;
}
}
}）;
}
}）;
在这个函数上我试图调用Popup div ..但它没有调用弹出窗口..但是直接加载页面
我试过的：
$（＃btnLogin）。click（function（）{
debugger;
var uName = $（＃txtUserName）。val（）;
var pass = $（＃txtPassword）。val（）;
var UserType = @ Html.Raw（Json.Encode （ViewBag.Usertype））;
if（uName ==''|| pass ==''）{
alert（请输入必填字段。）
}
else {
调试器;
$ .ajax（{
类型：POST，
url：/ MainIndex / ValidateUser，
dataType：json，
data：{userName：uName，password：pass}，
success：function（info）{
// var model = @ Html.Raw（Json.Encode（ViewBag.Usertype））;
//
// alert（Text is：+ model.Text）;
if（info ==1）
{
document.getElementById（pwdModal）。style.display ;
$（＃pwdModal）。show（）;
alert（你好）;
$（＃pwdModal）。removeClass（hide）;
// ChangePassword（）;
//
// var url =/ Latest / LatestReport;
// window.location.href = url;
// var url =/ Events / InnerConference;
// window.location.href = url;
}
else if（info ==5）
{
var url =/ Latest / LatestReport;
window.location.href = url;
}
else if（info ==4）
{
var url =/ PrintedReport / PrintedReportMain;
window.location.href = url;
}
else if（info ==6）
{
// var url =/ Events / InnerConference;
var url =/ NewConference / iifl_conference;
window.location.href = url;
}
else if（info ==7）
{
var url =/ AboutUs / ResearchTeam;
window.location.href = url;
}
else if（info ==8）
{
var url =/ AboutUs / IIFLTeam;
window.location.href = url;
}
else if（info ==9）
{
var url =/ AboutUs / SalesTradingTeam;
window.location.href = url;
}
else if（info ==10）
{
var url =/ AboutUs / IBTeam;
window.location.href = url;
}
else if（info ==11）
{
var url =/ AboutUs / SettlementAndOp;
window.location.href = url;
}
else if（info ==12）
{
var url =/ AboutUs / Leadership;
window.location.href = url;
}
其他
{
alert（请输入有效的电子邮件ID和密码）
$（＃txtUserName）。val（ ）;
$（＃txtPassword）。val（）;
}
}
}）;
}
}）;
它只执行info == 1条件..因为它已经从服务器端定义
因此在info = 1内
我试过
if（info ==1）
{
$（＃pwdmodol）。show（）;
}
但弹出窗口不会出现
解决方案
（＃ btnLogin）。click（function（）{
debugger;
var uName =
（＃txtUserName）。val（）;
var pass =
（＃txtPassword）。val（）;
var UserType = @ Html.Raw（Json.Encode（ViewBag.Usertype））;
if（uName ==''|| pass ==''）{
alert（请输入必填字段。）
}
else {
debugger ;
<div id="pwdModal" class="white-popup mfp-with-anim mfp-hide">
<div id="ForgotPassDiv">
<h3 class="text-center">Forgot / Change Password</h3>
<div class="text-center">
<div class="panel-body">
<fieldset>
<div class="form-group">
<input class="form-control input-lg" placeholder="E-mail Address" id="txtForgotPassEmail" name="email" type="email"/>
</div>
<input class="btn btn-lg btn-primary btn-block" value="Send My Password" id="btnForgotPass" type="submit"/>
<lable>New password will be sent to your official Email-id</lable>
</fieldset>
</div>
</div>
</div>
<div id="ChangePassDiv" style="display: none">
<h3 class="text-center">Change Password</h3>
<div class="text-center">
<div class="panel-body">
<fieldset>
<div class="form-group">
<input class="form-control input-lg" placeholder="Enter your 4 digit OTP" id="txtChangePassOTP" name="OTP" type="password"/>
<input class="form-control input-lg" placeholder="Enter your new password" id="txtNewPass" name="NewPass" type="password"/>
<input class="form-control input-lg" placeholder="Re-type your new password" id="txtConfirmPass" name="ConfirmPass" type="password"/>
</div>
<input class="btn btn-lg btn-primary btn-block" value="Done" id="btnChangePass" type="submit"/>
</fieldset>
</div>
</div>
</div>
</div>
This is the pop up for change Password ,
I am trying to call this popup on AjaxSuccess funtion
$("#btnLogin").click(function () {
debugger;
var uName = $("#txtUserName").val();
var pass = $("#txtPassword").val();
var UserType= @Html.Raw(Json.Encode(ViewBag.Usertype));
if (uName == '' || pass == '') {
alert("please enter required Fields.")
}
else {
debugger;
$.ajax({
type: "POST",
url: "/MainIndex/ValidateUser",
dataType: "json",
data: { "userName": uName, "password": pass },
success: function (info) {
if(info=="1")
{
var url = "/Latest/LatestReport";
window.location.href = url;
}
else if(info=="5")
{
var url = "/Latest/LatestReport";
window.location.href = url;
}
else if(info=="4")
{
var url = "/PrintedReport/PrintedReportMain";
window.location.href = url;
}
else if(info=="6")
{
// var url = "/Events/InnerConference";
var url = "/NewConference/iifl_conference";
window.location.href = url;
}
else if(info=="7")
{
var url = "/AboutUs/ResearchTeam";
window.location.href = url;
}
else if(info=="8")
{
var url = "/AboutUs/IIFLTeam";
window.location.href = url;
}
else if(info=="9")
{
var url = "/AboutUs/SalesTradingTeam";
window.location.href = url;
}
else if(info=="10")
{
var url = "/AboutUs/IBTeam";
window.location.href = url;
}
else if(info=="11")
{
var url = "/AboutUs/SettlementAndOp";
window.location.href = url;
}
else if(info=="12")
{
var url = "/AboutUs/Leadership";
window.location.href = url;
}
else
{
alert("Please Enter Valid Email ID And Password")
$("#txtUserName").val("");
$("#txtPassword").val("");
}
}
});
}
});
On this Function I am trying to call the Popup div .. but it not calling the popup.. But directly loading the page
What I have tried:
$("#btnLogin").click(function () {
debugger;
var uName = $("#txtUserName").val();
var pass = $("#txtPassword").val();
var UserType= @Html.Raw(Json.Encode(ViewBag.Usertype));
if (uName == '' || pass == '') {
alert("please enter required Fields.")
}
else {
debugger;
$.ajax({
type: "POST",
url: "/MainIndex/ValidateUser",
dataType: "json",
data: { "userName": uName, "password": pass },
success: function (info) {
// var model = @Html.Raw(Json.Encode(ViewBag.Usertype));
//
// alert("Text is: " + model.Text);
if(info=="1")
{
document.getElementById(" pwdModal").style.display;
$("#pwdModal").show();
alert("Hello");
$("#pwdModal").removeClass("hide");
// ChangePassword();
//
// var url = "/Latest/LatestReport";
// window.location.href = url;
// var url = "/Events/InnerConference";
// window.location.href = url;
}
else if(info=="5")
{
var url = "/Latest/LatestReport";
window.location.href = url;
}
else if(info=="4")
{
var url = "/PrintedReport/PrintedReportMain";
window.location.href = url;
}
else if(info=="6")
{
// var url = "/Events/InnerConference";
var url = "/NewConference/iifl_conference";
window.location.href = url;
}
else if(info=="7")
{
var url = "/AboutUs/ResearchTeam";
window.location.href = url;
}
else if(info=="8")
{
var url = "/AboutUs/IIFLTeam";
window.location.href = url;
}
else if(info=="9")
{
var url = "/AboutUs/SalesTradingTeam";
window.location.href = url;
}
else if(info=="10")
{
var url = "/AboutUs/IBTeam";
window.location.href = url;
}
else if(info=="11")
{
var url = "/AboutUs/SettlementAndOp";
window.location.href = url;
}
else if(info=="12")
{
var url = "/AboutUs/Leadership";
window.location.href = url;
}
else
{
alert("Please Enter Valid Email ID And Password")
$("#txtUserName").val("");
$("#txtPassword").val("");
}
}
});
}
});
It only execute the info==1 condition.. since it has been defined from the server side
hence inside the "info=1"
I tried to
if(info=="1")
{
$("#pwdmodol").show();
}
But the popup is not coming 解决方案
("#btnLogin").click(function () { debugger; var uName =
("#txtUserName").val(); var pass =
("#txtPassword").val(); var UserType= @Html.Raw(Json.Encode(ViewBag.Usertype)); if (uName == '' || pass == '') { alert("please enter required Fields.") } else { debugger;
这篇关于如何在ajax成功函数上调用pop up div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
