在Jquery Modal對話框中單擊確定按鈕時觸發事件

Question

我想顯示一個對話框，只有一個確定按鈕上的ajax調用的響應。當用戶點擊確定時，它應該重新加載頁面。但是現在頁面重新加載會在彈出對話框後立即發生。它不會等待用戶單擊確定。僅供參考我正在使用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; 
    } 
}); 

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

Answer 2

您可以通過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 3

因爲你重裝而不管是什麼點擊運行。如果你想一個回調函數分配給模態窗口：

jQuery UI dialog with boolean return - true or false

而且，沒有必要使location.href等於自己（或使用window對象）。 location.reload()也適用。

Answer 4

簡單的瀏覽器警報（）爲我做這項工作，因爲alert（）是一個阻塞調用。如果您省略了警報，那麼您的代碼不會與任何事件綁定，以檢查用戶是否單擊按鈕，這就是代碼塊立即執行並重新加載頁面的原因。

所以結合下面的代碼：

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

一些按鈕，點擊裏面，來解決問題。

Answer 5

不要在success.instead使用window.location的功能與OK按鈕打開模態的成功（如何做到這一點，我想你已經知道了），並指定一些ID給按鈕讓說id="loction_btn"。 然後使用僅此

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