成功时的 Ajax 自定义对话框

ajax custom dialog box upon success

本文关键字：自定义 对话框 Ajax 成功      更新时间：2023-09-26

我已经编写了一个自定义对话框/模式框，如下所示：

<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-dialog="somedialog" 。

但是，现在我想仅在 AJAX 返回成功并将消息从 AJAX 传递到对话框的<h2>文本时调用此自定义对话框。我该怎么做呢？

阿贾克斯调用： 

     <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代码转换为用于对话框变量声明的jQuery，以实现一致性 - 尽管使用本机JS是完全可以的，但这里缺乏一致性
  • 通过注释删除窗口重定向，因为它违背了显示对话框的目的，不是吗？

以下是修订后的 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)

相关文章：