Im using jQuery dialog on my form.

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

    $('.form-container').once('form-cont', function () {

    $('.my-form').once('my-form', function () {


  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);

        addClass('modal__wrap--' + className).


Drupal.custom.setModal = function (container) {

    var $container = $(container);

        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

1 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.

  • Sorry my question wasn't clear so I've updated it. The AJAX submission loads a another form which also has a link to a modal.
    – Evanss
    Feb 26, 2016 at 12:47
  • If it would have been about the AJAX replacement function, it might have been Drupal related somehow. With the new information in place it looks like it's more a question on jQuery. But we already started investigating. So please also add some information on how you trigger show / hide of your dialogs. Feb 26, 2016 at 12:59
  • Ive updated my question with that code.
    – Evanss
    Feb 26, 2016 at 13:14
  • Screened your code. I suppose you also always generate a new link with your AJAX calls. Did you check whether the values of the data-modal-id attribute are different for each of the links and that the dialogs added by your AJAX call have a different class with this ID? Feb 26, 2016 at 13:25
  • Each link has a different data-modal-id. However when I look for the div.ui-dialog thats being targeted I can see there are one too many after the AJAX submission. It looks to me that the old dialog modals aren't being removed when there corresponding link is.
    – Evanss
    Mar 1, 2016 at 11:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.