Question

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

简单的浏览器警报（）为我完成工作，但我不喜欢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

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

jQuery UI dialog with boolean return - true or false

此外，无需使location.href等于自身（或使用窗口对象）。 private void BindComboBoxItem() { ItemRepository repo = new ItemRepository(); List<Item> items = repo.GetAll(); List<KeyValuePair<int, string>> allitems = new List<KeyValuePair<int, string>>(); KeyValuePair<int, string> first = new KeyValuePair<int, string>(0, "Please Select"); allitems.Add(first); foreach (Item item in items) { KeyValuePair<int, string> obj = new KeyValuePair<int, string>(item.Id, item.Name); allitems.Add(obj); } cbxSelectItem.DataSource = allitems; cbxSelectItem.DisplayMember = "Value"; cbxSelectItem.ValueMember = "Key"; }同样有效。

Answer 3

简单浏览器警报（）为我完成工作，因为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

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

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

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

5 个答案: