I've got a simple modal node edit system going and on close, the AJAX update is working perfectly (using ID selectors), but starts to fail if a variant uses CLASS selectors where multiple targets are required.

Core snippets of the working ID method. No additional custom JScript are in play, core cTools only.

   $selector = '#site-tile-' . $project->nid . '-' . $type;
   $output[] = ajax_command_html($selector, render(sm_site_tile($project, $type, $updated_node)));

Unescaped HTML being returned.

<a href="/ajax/166/update/nojs?destination=projects" class="ctools-use-modal" title="Edit site details"><i class="fa fa-edit" aria-hidden="true"></i></a>

That is nicely inserted & processed into the element container.

<div class="site-tile site-tile-local bottom" id="site-tile-166-local">
....
<a href="/ajax/166/update/nojs?destination=projects" class="ctools-use-modal ctools-use-modal-processed" title="Edit site details"><i class="fa fa-edit" aria-hidden="true"></i></a>
....
</div>

But the same isn't the case when the selector was switched to use class targets.

Same base command, HTML structure, but this time there are multiple targets on the page to update (the reason for the class selector)

   $selector = '.project-client-tile-' . $updated_node->nid;
   $output[] = ajax_command_html($selector, render(sm_client_tile($client)));

Which returns the same HTML

<a href="/ajax/35/update/nojs?destination=projects" class="ctools-use-modal" title="Edit client details"><i class="fa fa-edit" aria-hidden="true"></i></a>

Updates all targets, however, the rendered HTML never gets processed, the ctools-use-modal-processed class is not added.

Note:
If I update the code to use an ID, it works perfectly on single value targets, but fails on the multiple value targets with shared ID (JScript targets the first element with the ID multiple times and skips the other elements, that is expected as multiple ID are invalid!).

I couldn't see the bug that blocked the behavior from attaching correctly, but found a workaround using a custom script.

(function ($) {

  Drupal.behaviors.ZZZMyCToolsModalFix = {
    attach: function(context, settings) {
      $('.ctools-use-modal:not(.ctools-use-modal-processed)').each(function() {
        Drupal.behaviors.ZZCToolsModal.attach($(this).parent());
      });
    }
  };
  
})(jQuery);
CommentFileSizeAuthor
#2 Screenshot-project-dashboard.png123.35 KBAlan D.
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Alan D. created an issue. See original summary.

Alan D.’s picture

For some context.

This site has clients that can have multiple projects and each project can have multiple sites.

The page I'm targeting is a teaser listing of projects, and this teaser listing has modal links to the client and the sites to edit each without having to leave the page.

Each of the inner red boxes are the tiles that are targeted by the AJAX commands