1

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?

  • I think you have two issues. 1) A typo from my example had the classes together, eg .clickable-row.views-row instead of cascading .clickable-row .views-row. I've changed my answer to reflect that in the original question. And 2) You aren't placing your js inside Drupal's behavior wrappers and thus might be/is probably running before the DOM is ready for it. – Jimajamma Dec 29 '13 at 15:41
  • @Jimajamma thanks for your reply - does this tinyurl.com/njocscu look ok for the js but anyway it does not seem to work = tinyurl.com/ph8bno8 Re .clickable-row.views-row it looks like someone edited your original answer drupal.stackexchange.com/posts/34502/revisions to remove the space which you have since put back in. Anyway I have tried it both ways - with and without the space. Thanks... – Juc1 Dec 30 '13 at 20:42
  • you still have it all together, eg, without the space, so if you could change that on your test site, that would be a first step. also, you have multiple links in each row, and that might be the issue as well, so if you can chop that down to just one, that would be awesome. of course, with that 'add comment' in there, this could all become problematic in the future so some further tweaks are most probably going to be in order, eg, putting a class on a field via the ui and then looking for that anchor, etc. – Jimajamma Dec 30 '13 at 20:56
  • @ Jimajamma it is working, thank you = tinyurl.com/ph8bno8 It currently works with two links in the row. Originally I put more than one link field in because I thought maybe one field worked better than another but I intend to have only one node link and then hide it from the display. Anyway thanks :) – Juc1 Dec 31 '13 at 15:49
3

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;
        });
      }
    });
  }
}
  • thanks - here is your suggestion tinyurl.com/q9jfas9 but it does not seem to work (purple rows not clickable) = tinyurl.com/qen425a – Juc1 Dec 30 '13 at 20:36
  • The js was not invoking as it was not initialized by Drupal.behaviors or document.ready I have updated my code now. please check it again. – Jeet Dec 31 '13 at 4:58
  • yes your updated code works thank you :) = tinyurl.com/qen425a – Juc1 Dec 31 '13 at 15:52
3

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

enter image description here

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

enter image description here

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

enter image description here

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 !

  • thank you I have not tried your method yet, I will try it and report back... – Juc1 Dec 31 '13 at 15:53

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.