How to open a link in ctools modal by clicking a views row in table format?

Question

I want to open a page in ctools modal. This works for me.

<a href="/my-page/nojs" class="ctools-use-modal">Click</a>

But now I want to open the same page in ctools modal by clicking the views row. The views is in table format.

<tr class="ctools-use-modal clickable" onclick="window.location='/my-page/nojs'">

It opens the link but not in ctools modal. I am using bootstrap theme.

I noticed that after page load there is another class added to the anchor tag ctools-use-modal-processed which is not added to the table row.

And we can't use an anchor tag before or after the tr in html table. We can only use it inside a td.

How can I achieve this?

Answer 1

I used this code and it solved my problem.

// Bind table rows that will open ctools modals to the appropriate function.
      $('tr.ctools-use-modal', context).once('ctools-use-modal', function() {
        var $this = $(this);
        $this.click(Drupal.CTools.Modal.clickAjaxLink);
        // Create a drupal ajax object
        var element_settings = {};
        if ($this.attr('href')) {
          element_settings.url = $this.attr('href');
          element_settings.event = 'click';
          element_settings.progress = { type: 'throbber' };
        }
        var base = $this.attr('href');
        Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);
      });

and table row like this

<tr class="ctools-use-modal" href="/my-page/nojs">

Hope it will help someone.