[Jqueryモーダル]ダイアログボックスの[OK]ボタンをクリックしたときにトリガーイベントが発生する

Question

ajax呼び出しの応答時に[OK]ボタンだけのダイアログボックスを表示しようとしています。ユーザーが[OK]をクリックすると、ページがリロードされます。しかし、ダイアログボックスがポップアップされた後すぐにページのリロードが即座に行われます。ユーザーが[OK]をクリックするのを待っているわけではありません。参考Jqueryモーダルダイアログボックスを使用しています。

私は仕事をしていますが、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

あなたはこのように、登録されたイベントで、各属性buttonsdialogモーダル渡すことができます：あなたのリロードがクリックされたかの無関係に実行されるため

$.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自体に等しい（またはウィンドウオブジェクトを使用）を作成する必要はありません。 location.reload()も同様です。

Answer 4

alert（）がブロッキングコールであるため、私はのための仕事をしてくれます。警告を省略すると、コードがユーザーがボタンをクリックしたかどうかをチェックするためのイベントとバインドされないため、コードブロックがすぐに実行され、ページが再ロードされます。この問題を解決するために、いくつかのボタンクリックの内側

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

：

だから、次のコードをバインドします。

Answer 5

は（、私はあなたがすでに知っていると思うことを行う方法）の成功で、[OK]ボタンを持つモーダルを開くsuccess.insteadでwindow.locationの機能を使用し、そのためにいくつかのIDを割り当ててはいけませんボタンをid="loction_btn"としましょう。 は、ちょうどこの

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