How to make Views rows clickable with jQuery

Question

I am trying to follow Jimajamma's instructions here to make my Views rows clickable.

My View class =

.clickable-row .views-row {
border:12px solid purple;
}

My js file shows ok in the page source here

I am not sure which field is meant by "as long as one field in your view is a link" - I have tried Content: Link, Content: Path and Content: Nid.

Result here - purple border rows are not clickable.

Can anyone please suggest what I am missing?

Answer 1

Please change your JS code to below given one and try again. It should be working.

Drupal.behaviors.clickableRowsOnViews = {
  attach: function() {

    jQuery('.clickable-row .views-row').each(function() {
      if (jQuery(this).find('a').length) {
        jQuery(this).click(function() {
          window.location = jQuery(this).find('a').attr('href');
          return false;
        });
      }
    });
  }
}

Answer 2

First of all, take a look on the javascript guide on drupal.org : https://drupal.org/node/756722 Here you can find Why you need to use the "Drupal" object and a good javascript pattern file.

Now an answer :

You using view, so you can display your results with a special class on your links for target them later in your javascript. ".clickable-row" Class are on the block, maybe you should attach this class on each row like this screen

Next, we can attach the special class on any field in field display setting like this:

Now when you render view, the link have a class we can use for target it with jQuery See the DOM and HTML render

Our view is ready ! Next Step, Javascript.

1) Include your javascript

Follow the documentation below to add it.

2) Javascript Content

I use a simple javascript canvas, i will use and explain it :

 /**
  * Javascript Drupal Bootstrap File
  */
(function ($, Drupal, window, document, undefined) {
    // Application global variable
    // You can share data only here
    var app = {};

    // InitApp
    // Bootstrap app configuration 
    function initApp(){
        app.drupal          = Drupal.settings.your_module_namespace;
        app.$clickableRow   = $('.clickable-row');
    }

    // attachEvents
    // Here you bind all your jQuery event for example
    function attachEvents(){
        // On each clickable row, we apply our js feature
        app.$clickableRow.click(clickableRowFeature);
    }

    // Click event callback 
    function clickableRowFeature(event){
        // Apply jQuery on current clicked element
        var $this   = $(this);
        // Get the url if exists
        var url     = $this.find('.useThisLink a').attr('href');
        if(url){
            // Redirect the user to url location
            window.location = url;
        }
    }
    // Here you can have others behaviors, "your_module_namespace" must be unique !
    // Behaviors can be called many time, if you don't want reboot your app
    // you can use an initialized variable
    Drupal.behaviors.your_module_namespace = {
        attach: function (context, settings) {
            if(!app.initialized){
                initApp();
                attachEvents();
                app.initialized = true;
            }
        }
    };
})(jQuery, Drupal, this, this.document);

This should be work if you have follow previous steps. A little extra, the code after work with your current view

 /**
 * Javascript Drupal Bootstrap File
 */
(function ($, Drupal, window, document, undefined) {
    // Application global variable
    // You can share data only here
    var app = {};

    // InitApp
    // Bootstrap app configuration 
    function initApp(){
        app.drupal          = Drupal.settings.your_module_namespace;
        app.$clickableRow   = $('.clickable-row .views-row');
    }

    // attachEvents
    // Here you bind all your jQuery event for example
    function attachEvents(){
        app.$clickableRow.click(clickableRowFeature);
    }

    function clickableRowFeature(ev){
        var $this   = $(this);
        var url     = $this.find('.field-content a').attr('href');
        if(url){
            window.location = url;
        }
    }
    // Here you can have others behaviors, "your_module_namespace" must be unique !
    // Behaviors can be called many time, if you don't want reboot your app
    // you can use an initialized variable
    Drupal.behaviors.your_module_namespace = {
        attach: function (context, settings) {
            if(!app.initialized){
                initApp();
                attachEvents();
                app.initialized = true;
            }
        }
    };
})(jQuery, Drupal, this, this.document);

That's done !