1

I have emerged me a problem with a page view and maybe someone can help me solve. Following this tutorial: http://codekarate.com/daily-dose-of-drupal/multiple-views-part-3 I created a view showing a content in 2 ways (such as poster and poster with text). For this purpose uses a javascript file that is responsible for displaying two different ways the contents of the view. Everything worked fine until add a pager and save the view with ajax enabled. Suddenly everything stopped working. It works only on the first page, if you press the Pager (with ajax) the next page and nothing works. The script is as follows:


(function ($, Drupal, window, document, undefined) {

Drupal.behaviors.my_custom_behavior = {
  attach: function(context, settings) {
//Sets default class for course views and toggles class when changing view.
$('#content').once('course-view', function() {
  if ($(".view").hasClass("course-view")) {
    $(".view").addClass("grid-view"); // Sets .grid-view as default class on the view

    $(".list").click(function() {      
      if ($(".view").hasClass("grid-view")) {
        $(".view").addClass("list-view"); // adds .list-view to the view class
        $(".view").removeClass("grid-view"); // removes .grid-view from the view class
      }
    });

    $(".table").click(function() {
      if ($(".view").hasClass("list-view")) {
        $(".view").addClass("grid-view"); // adds .grid-view to the view class
        $(".view").removeClass("list-view"); // removes .list-view from the view class
      }
    });
  }
});

  }

    };


})(jQuery, Drupal, this, this.document);

Can somebody help me? Why only works on the first page?

2

Views Ajax is same as the Drupal Ajax, ajax response also run the behaviors.

What you need to do is removing the once() because it will stop your event binding for the second time. For preventing the event bound twice due to the ajax, just remember to add context as scope when you search for the element with jQuery.

(function ($, Drupal, window, document, undefined) {

Drupal.behaviors.my_custom_behavior = {

  attach: function(context, settings) {

    // Sets default class for course views and toggles class when changing view.
    // Context is important here for limiting the scope.
    var view = $(".view", context);

    if ( view.hasClass("course-view") ) {
      view.addClass("grid-view"); // Sets .grid-view as default class on the view

      $(".list", view).click(function() {      
        if (view.hasClass("grid-view")) {
          view.addClass("list-view"); // adds .list-view to the view class
          view.removeClass("grid-view"); // removes .grid-view from the view class
        }
      });

      $(".table", view).click(function() {
        if (view.hasClass("list-view")) {
          view.addClass("grid-view"); // adds .grid-view to the view class
          view.removeClass("list-view"); // removes .list-view from the view class
        }
      });
    }
  }
};

})(jQuery, Drupal, this, this.document);
  • 1
    ajax response also run the behaviors I didn't know this, thx. – No Sssweat Jul 24 '16 at 3:09
  • Thanks! This code works! (Well, I added the following to the end: })(jQuery, Drupal, this, this.document); – Barry Collins Jul 24 '16 at 3:22
  • 1
    @BarryCollins you can accept this answer by clicking the checkmark ✅. Also, considering voting it up, as it gives JimmyKo rep. – No Sssweat Jul 24 '16 at 3:29

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.