Как предотвратить два идентичных диалога Boostrap от открытия пользователем двойным нажатием кнопки?

Question

В случае, если ajax займет некоторое время, чтобы загрузить диалоговое окно и пользователь дважды щелкнул кнопку, на экране отобразится два одинаковых диалоговых окна. Я хочу предотвратить это.

$("#ShowUpCallTag").on('click', function (e) { 
     $.ajax({ 
      url: '/Ship/CallTags/Dialog/' + $(e.target).data('calltagid'), 
      type: 'get', 
      datatype: 'json' 
     }).done(function (data) { 
      var dialog = main.ship.calltags.dialog.buildDialog(data); 
      dialog.open(); 
     }); 
    }); 

Answer 1

Я думаю, что проблема в вашем коде заключается в том, что вы не знаете, открыто или нет диалоговое окно. То, что я хотел бы сделать:

1. Создайте переменную в том же объеме, чем ваш вызов JQuery, например: var dialogOpened = false
2. В функции обработчика нажмите, сделать вызов Ajax только если dialogOpened === false
3. В вашем done(function (data) {}) обратного вызова , установите dialogOpened в true и прислушайтесь к событию, генерируемому Bootstrap, чтобы узнать, когда модаль закрыт пользователем (см. Bootstrap Modal Events)
4. Когда модальная функция закрыта, установите dialogOpened в значение false.
5. То, что я считаю хорошей практикой, также: если элемент, на который вы привязываете клик, является кнопкой, вы можете отключить его сразу после того, как пользователь нажал на нее.

Answer 2

  var isModelDialogOpen = false; 
      $("#ShowUpCallTag").on('click', function (e) { 
      if (isModelDialogOpen == false) { 
       isModelDialogOpen = true; 

       //Popup call tag dialog. 
       $.ajax({ 
        url: '/Ship/CallTags/Dialog/' + $(e.target).data('calltagid'), 
        type: 'get', 
        datatype: 'json' 
        .done(function (data) { 
         var dialog = main.ship.calltags.dialog.buildDialog(data); 
         dialog.open(); 
        }) 
        .always(function (data) { 

         isModelDialogOpen = false; 
        }); 
      } 
     });