0

I have a view which is shown as table. I would like to add a css class to entire row, once the user has clicked somewhere on the row.

With views i added '.baza-pregled-strank-row' class to each row. Below is my jquery code, which is successfully loaded, but not doing what it should, because once i click on the view-field, the class is not aded to the row. Big thanks.

(function ($) {
$('.view-field').on('click', function(e) {
      $('.baza-pregled-strank-row').toggleClass("highlight");
      e.preventDefault();
    });
}(jQuery));  
1
  • See Managing JavaScript in Drupal 7, especially Behaviors section. It seems that your problem may be with the way you include your js file, with the fact you are not using behaviors, or possibly many more, probably already covered in linked piece of documentation.
    – Mołot
    May 27, 2014 at 11:38

3 Answers 3

1

First of all you need to add custom class to your VIEWS wrapper and also for TABLE ROW. I have added my-view-wrapper for the VIEWS and row-wrapper for TABLE ROW

enter image description here

  • Add CLASS to your VIEWS

    enter image description here

  • Add CLASS to your TABLE ROW

    enter image description here

    enter image description here


(function ($) {
  Drupal.behaviors.viewRowHighlight = {
    attach: function (context, settings) {
      $('.my-view-wrapper .row-wrapper').click(function(e){
        $(this).toggleClass('clicked');
      });
    }
  };
})(jQuery);
5
  • I tried doing what you suggested but it does not work, besides firebug console shows the error below SyntaxError: function statement requires a name attach: function (context, settings) {
    – risha riss
    May 27, 2014 at 12:18
  • Are you using Drupal 7?
    – inizio
    May 27, 2014 at 12:33
  • Yes i am, the newest version.
    – risha riss
    May 27, 2014 at 12:35
  • There's an error in your javascript inizio. I corrected it. @rishariss copy the javascript code and try again.
    – Beebee
    May 27, 2014 at 13:06
  • 1
    I have updated my code you can check it out.
    – inizio
    May 27, 2014 at 13:12
0

I followed the documentation that Mołot suggested and managed to make it work. Below is the code with dummy classes, targeting the views row inside views wrapper. Thanks for all the help guys.

(function ($) {
  Drupal.behaviors.views_row_highlight = {
    attach: function (context, settings) {
      $('.views-table-wrapper .views-table-row', context).click(function () {
        $(this).toggleClass('highlight');
      });
    }
  };
})(jQuery);
0

The class Views adds to the fields is called views-field. This code would toggle the class hightlight for each field (cell) in the table.

Drupal.behaviors.highlightViewsField = {
  attach: function (context) {
    $('.views-field').on('click', function(e) {
      $(this).toggleClass("highlight");
    });
  }
}

If you want to toggle the row you would do something like

Drupal.behaviors.highlightViewsRow = {
  attach: function (context) {
    $('.view-content tr').on('click', function(e) {
      $(this).toggleClass("highlight");
    });
  }
}
3
  • 1
    Without behaviors this is a simple way to make user ask "why does it fail half of the times?" pretty soon.
    – Mołot
    May 27, 2014 at 11:46
  • does not work. I belive that the targeted class for click event thould be view-field since row is made of view-fields which take all the space and the row should be targeted for adding new class to it.
    – risha riss
    May 27, 2014 at 12:32
  • Thanks Molot, I've updated the answer with Drupal.behaviours. May 27, 2014 at 12:47

Not the answer you're looking for? Browse other questions tagged or ask your own question.