J - C Sharper J - C Sharper - 4 months ago 17
Ajax Question

How to prevent two identical Boostrap dialog from opening by user double clicking the button?

In case the ajax take a while to load the dialog and user double clicking the button, two identical dialog will popup on the screen. I want to prevent it from happening.

$("#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

I think that the problem in your code is that you don't know if a dialog is opened or not. What I would do :

  1. Create a variable in the same scope than your jQuery call, for example : var dialogOpened = false
  2. In your click handler function, do the ajax call only if dialogOpened === false
  3. In your done(function (data) {}) callback, set dialogOpened to true and listen for Bootstrap generated event to know when the modal is closed by the user (see Bootstrap Modal Events)
  4. When the modal is closed, set back dialogOpenedto false.
  5. What I consider to be a good practice also : if the element on which you bind the click is a button, you can disable it just after the user has clicked on it.
Comments