jQuery dialog is duplicated when set on a form that uses AJAX

Question

Im using jQuery dialog on my form.

Drupal.behaviors.custom = {
attach: function (context, settings) {

    $('.form-container').once('form-cont', function () {
      Drupal.custom.modalLinks();
    });

    $('.my-form').once('my-form', function () {
       Drupal.custom.setModal(this);
    });

);

  Drupal.custom.modalLinks = function () {
    $('body').on('click', '.modal-link', function (e) {
      var id = $(this).data('modal-id');
      var className = $(this).data('modal-class');
      var $modal = $('.modal--' + id);

      $modal.dialog('widget').
        addClass('modal__wrap--' + className).
        addClass('modal__wrap');
      $modal.dialog('open');

      e.preventDefault();
    });
  };

Drupal.custom.setModal = function (container) {

    var $container = $(container);

    $container.find('.my-modal').
      dialog({
        autoOpen: false,
        draggable: false,
        width: 900,
        minHeight: 120,
        modal: true
    });

};

This is working fine when the page is first loaded. However my form has AJAX submission. When submitted the form then returns a new form which also has a dialog modal link.

If I submit the form then when it reloads with AJAX then the jQuery dialog modal is duplicated (not visible but I can see with dev tools). If I open the dialog now then 2 modals are opened.

From reading about duplicate dialogs (but not for Drupal specifically) it seems the solution is to use remove or destroy on the modal. However when I try this is always completely disables the modal, it doesn't just remove the duplicates. https://stackoverflow.com/questions/2864740/jquery-how-to-completely-remove-a-dialog-on-close

Answer 1

The behavior you describe is not related to the dialog function. From your provided code you can see that dialogs are created with all elements that have the identifier ".my-modal".

So I suppose within your AJAX call the original dialog element is not replaced by another version of the dialog, but a further element having the class "my-modal" is added to your markup.

You should investigate your AJAX callback function, whether it replaces the original markup or adds elements.