在 Jquery Modal 对话框中单击 OK 按钮时触发事件答案

【问题标题】：Triggering event on clicking OK button in Jquery Modal dialog box在 Jquery Modal 对话框中单击 OK 按钮时触发事件
【发布时间】：2017-04-18 04:48:23
【问题描述】：

我试图在响应 ajax 调用时显示一个对话框，其中只有一个 OK 按钮。当用户单击确定时，它应该重新加载页面。但是现在页面重新加载在弹出对话框后立即发生。它不等待用户单击确定。仅供参考，我正在使用 Jquery Modal 对话框。

简单的浏览器 alert() 为我完成了这项工作，但我不喜欢 alert() 的外观。

非常感谢任何帮助！

$.ajax({
    url: "modules/mymod/save.php", 
    type: "POST",
    data: $('#requestForm').serialize(),
    statusCode: {404: function () {alert('page not found');}},
    success: function (data) {
        // alert(data);
        modal({type: 'alert', title: 'Alert', text: data});
        window.location.href = window.location.href;
    }
});

【问题讨论】：

stackoverflow.com/questions/33029730/…

标签： javascript jquery jquery-ui-dialog

【解决方案1】：

Reference:

            $.ajax({
                url: "modules/mymod/save.php", 
                type: "POST",
                data: $('#requestForm').serialize(),
                statusCode: {404: function () {alert('page not found');}},
                success: function (data) {
                    // alert(data);
                    modal({
                        type: 'alert',
                        title: 'Alert',
                        text: data,
                        buttons: [{
                                text: 'OK', //Button Text
                                val: 'ok', //Button Value
                                eKey: true, //Enter Keypress
                                addClass: 'btn-light-blue btn-square', //Button Classes 
                                onClick: function() {
                                    window.location.href = window.location.href;
                                }
                            }, ],
                        center: true, //Center Modal Box?
                        autoclose: false, //Auto Close Modal Box?
                        callback: null, //Callback Function after close Modal (ex: function(result){alert(result);})
                        onShow: function(r) {
                            console.log(r);
                        }, //After show Modal function
                        closeClick: true, //Close Modal on click near the box
                        closable: true, //If Modal is closable
                        theme: 'xenon', //Modal Custom Theme
                        animate: true, //Slide animation
                        background: 'rgba(0,0,0,0.35)', //Background Color, it can be null
                        zIndex: 1050, //z-index
                        buttonText: {
                        ok: 'OK',
                        yes: 'Yes',
                        cancel: 'Cancel'
                    },
                    template: '<div class="modal-box"><div class="modal-inner"><div class="modal-title"><a class="modal-close-btn"></a></div><div class="modal-text"></div><div class="modal-buttons"></div></div></div>',
                    _classes: {
                    box: '.modal-box',
                    boxInner: ".modal-inner",
                    title: '.modal-title',
                    content: '.modal-text',
                    buttons: '.modal-buttons',
                    closebtn: '.modal-close-btn'
                      }
                    });
                   }
            });

【讨论】：

@AdityaAmit 试试我的解决方案。希望它能在你的场景中工作。谢谢
我尝试了您的解决方案，但未触发按钮单击事件。只有默认行为即将到来。
@AdityaAmit 你需要 Check this link .
感谢@Zaheer 我添加了回调函数。现在它正在工作。

【解决方案2】：

因为您的重新加载运行与单击的内容无关。如果要为模态窗口分配回调函数：

jQuery UI dialog with boolean return - true or false

另外，不需要让 location.href 等于它自己（或使用 window 对象）。 location.reload() 也可以。

【讨论】：

【解决方案3】：

您可以传递dialog modal buttons 属性，每个属性都有一个注册事件，如下所示：

$.ajax({
    url: "modules/mymod/save.php", 
    type: "POST",
    data: $('#requestForm').serialize(),
    statusCode: {404: function () {alert('page not found');}},
    success: function (data) {

        $("#dialog-confirm").dialog({
          resizable: false,
          height: 200,
          modal: true,
          buttons: {
              Proceed: function() {
                 window.location.href = window.location.href;
              },
              Cancel: function() {
                 // Cancellation code here
              }
           }
       });
    }
});

【讨论】：

OP 没有使用 Jquery 对话框
@MayankPandeyz 有一个 jquery-ui-dialog 标签。
@KobyDouek 问题是我不能在这里使用确认对话框。因为取消时无事可做。我只希望页面重新加载等到用户单击确定。谢谢。
@AdityaAmit 所以只需将取消功能留空。这会奏效。

【解决方案4】：

简单的浏览器 alert() 为我完成了这项工作，因为 alert() 是一个阻塞调用。如果您省略警报，那么您的代码不会与任何事件绑定以检查用户是否单击了按钮，这就是代码块立即执行并重新加载页面的原因。

所以绑定如下代码：

window.location.href = window.location.href;

在一些按钮内单击，以解决问题。

【讨论】：

【解决方案5】：

不要在成功时使用 window.location 函数。而是在成功时使用 ok 按钮打开模式（如何做到这一点，我想你已经知道了）并为该按钮分配一些 id，比如说id="loction_btn"。然后就用这个

$('document').on('click','#location_btn',function(){
   window.location.href = window.location.href;
});

【讨论】：