Problem/Motivation

We are building a site with panelizer ipe and scald used together. Which means that we often open a second modal on the same page.
I know that only a single modal window can be open at a time. Which is fine.
However it seems that CToolsDetachBehaviors and therefore the detach is not called on the first modal when we open the second modal.
Which is a problem when the first modal contained a ckeditor, and then we open the second modal, the detach is not called, and then opening again the first modal, the ckeditor is broken.

Steps to reproduce

- Have scald installed with latest version, and panels with panelizer set up on a content type
- Create a panelized node page
- Customize this page button on the bottom
- Click on the Add new pane button
- Click on New custom content link (will have a ckeditor if ckeditor is set up)
- Click on a link in the dnd (drag and drop library) that would open another ctools modal (like create new atom, or edit / delete on an existing atom)
- This will open a new modal but the detach behaviours are not called on the previous one beforehand
- Close the new modal, and click on Add new pane button again.
- Click on New custom content link

And there the ckeditor will not load and we get JS errors.

A quick dirty workaround is the following:
in modal.js

  /**
   * Handler to prepare the modal for the response
   */
  Drupal.CTools.Modal.clickAjaxLink = function () {
    Drupal.CTools.Modal.dismiss();
    Drupal.CTools.Modal.show(Drupal.CTools.Modal.getSettings(this));
    return false;
  };

So by dismissing the previous modal before opening the new one, it fixes the problem, but likely there is a better solution.

CommentFileSizeAuthor
#15 2497645-15.patch1.21 KBshubham.prakash
#10 ctools_calling-detach-on-show-and-form-submit-2497645-10.patch1.2 KBaron novak
#4 calling-detach-on-show-and-form-submit-2497645-4.patch770 bytesnagy.balint
#3 calling-detach-on-show-2497645-3.patch385 bytesnagy.balint

Comments

merlinofchaos’s picture

merlinofchaos commented

Dismissing the previous modal is likely not the correct solution as we often want to have continuity between modals; that would actually close the modal and re-open it while clicking inside the modal.

Instead, in I think the show() method, if the modal is already open, run a detach behaviors there; that'll detach the behaviors on the modal without closing it, and then the new modal can be rendered into it.

nagy.balint’s picture

nagy.balint commented

I have tried the following:

  Drupal.CTools.Modal.show = function(choice) {

    $(document).trigger('CToolsDetachBehaviors', $('#modalContent'));
    Drupal.detachBehaviors($('#modalContent'));

But unfortunately it does not work.
Even tried to copy paste there the unbind event codes, but it did not help.

Something remains there if the modal is not properly closed.

Likely then this is two issues. One that the CToolsDetachBehaviors was not called, then in theory this code snippet would fix that. But there must be another issue that also happens when pressing cancel in the modal with a ckeditor, that the ckeditor is not correctly cleaned up when detaching, but then thats a different issue, and likely for a different issue queue (#1990224: Problem with Panels IPE).

nagy.balint’s picture

nagy.balint commented
StatusFileSize
new calling-detach-on-show-2497645-3.patch385 bytes

Okey i found out why it did not work for me.

Because bootstrap theme overrode my modal.js :(

So it actually works fine if i trigger the event there, cause then it will trigger detach in ckeditor.

Patch attached.

However it should also do that when pressing cancel in the custom content form. As currently pressing cancel and then opening the ckeditor again also fails.

nagy.balint’s picture

nagy.balint commented
Status: Active » Needs review
StatusFileSize
new calling-detach-on-show-and-form-submit-2497645-4.patch770 bytes

Okey this patch works for me, but maybe i have missed something, so any review welcome :)

damienmckenna’s picture

damienmckenna
Location TN, USA
commented

@merlinofchaos: What do you think?

I'll ask dsnopek to run this through the Panopoly test suite to see if it breaks anything.

nagy.balint’s picture

nagy.balint commented

Any news here?

maximpodorov’s picture

maximpodorov commented

This approach kills the only existing method to respond the events of modal opening and modal closing.

nagy.balint’s picture

nagy.balint commented

how so?

maximpodorov’s picture

maximpodorov commented

Because CToolsDetachBehaviors is called upon both opening and closing.

aron novak’s picture

aron novak
Primary language Hungarian
Location Hungary, Budapest
commented
StatusFileSize
new ctools_calling-detach-on-show-and-form-submit-2497645-10.patch1.2 KB

I am not exactly sure to fully understand the problem in #9. but I've found another issue.

Since https://www.drupal.org/files/issues/panels-editor-cache-fix-2238025-05.p... , Panels triggers a click() event on the cancel button for CToolsDetachBehaviors event, but it causes an infinite recursion as the form submit procedure introduced this even triggering.
Modified patch is attached.

maximpodorov’s picture

maximpodorov commented

What is the purpose of CToolsDetachBehaviors? Is it to indicate that the window is closing?

aron novak’s picture

aron novak
Primary language Hungarian
Location Hungary, Budapest
commented

As I see, yes. And indeed when we submit it, it's going to be closed, so in my understanding, it's not misleading to have it there, we merely have to prevent infinite loops to handle clicks over and over again.

maximpodorov’s picture

maximpodorov commented

But you invoke CToolsDetachBehaviors even if the modal window does not exist.

chris matthews’s picture

chris matthews commented
Status: Needs review » Needs work
Issue tags: +Needs reroll

The 3 year old patch in #10 to modal.js does not apply to the latest ctools 7.x-1.x-dev and (if applicable) needs to be rerolled.

Checking patch js/modal.js...
error: while searching for:
        Drupal.ajax[base].form = $this;

        $('input[type=submit], button', this).click(function(event) {
          Drupal.ajax[base].element = this;
          this.form.clk = this;
          // Stop autocomplete from submitting.
          if (Drupal.autocompleteSubmit && !Drupal.autocompleteSubmit()) {
            return false;
          }
          // An empty event means we were triggered via .click() and
          // in jquery 1.4 this won't trigger a submit.
          if (event.bubbles == undefined) {

error: patch failed: js/modal.js:257
error: js/modal.js: patch does not apply
shubham.prakash’s picture

shubham.prakash commented
Status: Needs work » Needs review
StatusFileSize
new 2497645-15.patch1.21 KB
damienmckenna’s picture

damienmckenna
Location TN, USA
commented
Issue tags: -Needs reroll
japerry’s picture

japerry
Location KOMK
commented
Status: Needs review » Closed (outdated)

Drupal 7 is no longer supported, closing.

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.