2017-10-13 57 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