2017-10-13 58 views
0

請幫我解決我的問題! 我有一個頁面,裏面帶有一個boostrap3模態。在這種模式的「保存」按鈕發送Ajax查詢,如果成功,我觸發「隱藏」事件對我的模式,像這樣:與js自舉模態交互

success: function (data) { 
      PERSON_AJAX.updatePersonsTable(data); 
      $('#custom-width-modal-person').modal('hide'); 
      $('#person-created-alert').modal('show'); 
     }, 

我還檢查我的形式改變,我上連載的形式打開事件,然後檢查它是否等於隱藏事件上的序列化表單(當用戶關閉模式時沒有點擊「保存」),詢問用戶是否想保存更改,如果是真的,我手動調用我的「保存」功能,如下所示:

form_serialize: function(){ 
    $("#custom-width-modal-person").on({ 
     'shown.bs.modal': function(){ 
      MODAL_BEHAVIORS.formData = $('#create-person').serialize(); 
     }, 
     'hide.bs.modal': function(e){ 
      if (MODAL_BEHAVIORS.formData !== $('#create-person').serialize()){ 
       if(confirm("Do you want to save the data?")){ 
        PERSON_AJAX.setPerson(); 
       } 
      } 
     }, 
    }); 

}, 

這裏的問題是,setPerson()方法也包含hide.bs.modal事件,當用戶想通過剛剛閉幕的模式來保存數據的函數調用兩次。我怎樣才能防止這種互動?

回答

1

你不應該在hide.bs.modal中做這個檢查。 保留模態隱藏事件處理程序。將這個邏輯到一個單獨的功能:

function closeModal(){ 
    if (MODAL_BEHAVIORS.formData !== $('#create-person').serialize()){ 
     if(confirm("Do you want to save the data?")){ 
      PERSON_AJAX.setPerson(); 
     } 
     else{ 
      $('#custom-width-modal-person').modal('hide'); 
     } 
    } 
} 

呼叫closeModal()當用戶點擊X,按Escape鍵,或當你想模態關閉。

+0

模態應該是可見的,直到AJAX在serPerson()返回成功 – 1N7R0

+0

我已經更新了我的答案,讓我知道如果這工作:) – Baksteen

+0

是的,你的答案幫助我很多,我限制關閉模式與ESC和點擊外模式,在點擊X按鈕時添加closeModal(),並添加「else」語句到closeModal()。謝謝! – 1N7R0