1

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

0

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 '16 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. – Mario Steinitz Feb 26 '16 at 12:59
  • Ive updated my question with that code. – Evanss Feb 26 '16 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? – Mario Steinitz Feb 26 '16 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 '16 at 11:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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