单击 Jquery 模态对话框中的确定按钮触发事件

Question

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

简单的浏览器 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;
    }
});

Answer 1

您可以传递 dialog 模态 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
              }
           }
       });
    }
});

Answer 2

因为无论单击什么，您的重新加载都会运行。如果你想给模态分配一个回调函数 window:

jQuery UI dialog with boolean return - true or false

此外，没有必要使 location.href 等于自身（或使用 window 对象）。 location.reload() 同样有效。

Answer 3

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

所以绑定如下代码：

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

点击里面的一些按钮，解决问题。

Answer 4

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'
                      }
                    });
                   }
            });

Answer 5

不要在 success.instead 中使用 window.location 函数成功时用 ok 按钮打开模式（怎么做，我想你已经知道了）并为那个按钮分配一些 id 让我们说 id="loction_btn"。然后只使用这个

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

单击 Jquery 模态对话框中的确定按钮触发事件

Triggering event on clicking OK button in Jquery Modal dialog box

javascript

jquery

jquery-ui-dialog