[英]ajax custom dialog box upon success
我已将自定义对话框/模式框编码如下:
<div id="somedialog" class="dialog">
<div class="dialog__overlay"></div>
<div class="dialog__content">
<h2><strong>Howdy</strong>, I'm a dialog box</h2><
div><button class="action" data-dialog-close>Close</button></div>
</div>
</div>
当前由带有javascript代码的按钮触发,如下所示:
<script src="js/classie.js"></script>
<script src="js/dialogFx.js"></script>
<script>
(function() {
var dlgtrigger = document.querySelector( '[data-dialog]' ),
somedialog = document.getElementById( dlgtrigger.getAttribute( 'data-dialog' ) ),
dlg = new DialogFx( somedialog );
dlgtrigger.addEventListener( 'click', dlg.toggle.bind(dlg) );
})();
</script>
…我们的触发按钮具有data-attribute data-dialog="somedialog"
。
但是,现在我只想在我的AJAX返回成功并将消息从AJAX传递到对话框的<h2>
文本时调用此自定义对话框。 我实际上该怎么做?
ajax呼叫:
<script>
$(document).on("click", "#submit", function(){
var $self = $(this);
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var request = $.ajax({
url: "login.php",
type: "POST",
data: { username: username, password: password},
beforeSend: function(){
$self.html("Loading please wait...");
}
});
//WHEN SUCCESS
request.success(function( data ) {
if( data == 'user' )
{
window.location.href = "filter.php";
} else if(data=='company'){
window.location.href = "filter.php";
}else {
alert("Wrong Username or Password!");
window.location.href = "indexwithlogin.php";
<insert the dialog box here>
}
});
});
</script>
在您的第一个代码块中,您将使用此行调用对话框:
dlgtrigger.addEventListener( 'click', dlg.toggle.bind(dlg) );
...因此,当从AJAX调用获得成功/完成响应时,只需调用它即可。 我对您的脚本进行了一些更改:
jqXHR
延迟对象.done()
代替.success()
。 不推荐使用.done()
,而.error()
相同,后者由.fail()
。 这是修改后的JS:
$(document).on("click", "#submit", function(){
var $self = $(this);
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var request = $.ajax({
url: "login.php",
type: "POST",
data: { username: username, password: password},
beforeSend: function(){
$self.html("Loading please wait...");
}
});
// When successful
// Use deferred object .done()
request.done(function(data) {
if(data=='user') {
window.location.href = "filter.php";
} else if(data=='company') {
window.location.href = "filter.php";
} else {
alert("Wrong Username or Password!");
// Call dialogue box
var dlgtrigger = $('[data-dialog]'),
somedialog = $(dlgtrigger).attr('data-dialog'),
dlg = new DialogFx( somedialog );
dlg.toggle.bind(dlg);
//window.location.href = "indexwithlogin.php";
}
});
});
在成功函数中使用dlg.toggle.bind(dlg)()
代替dlg.toggle.bind(dlg)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.