1

I use colorbox node, which loads a node inside colorbox overlay. Inside colorbox I load a jquery script to add some parameters to all links inside. However, the loading is done by 2 ajax calls and I end up with doubled parameters on all links. I tried to use .once() but that does not return anything, probably because it fires after first ajax call. How to wait until second ajax call? Thank you.

my script:

(function($){ // Create local scope.
Drupal.behaviors.jjj = {
  attach: function (context, settings) {

$('#colorbox #block-book-navigation a', context).once('jjj', function () {
       $("#colorbox #block-book-navigation a").each(function(){

                       $(this).addClass("xxx");
console.log( "test" );               
       });

 });
}}; 
})(jQuery);
  • Can you post the code you tried that didn't work? Then we can point out ways to improve it. – rooby Sep 16 '14 at 23:47
  • @rooby please see updated code – loparr Sep 17 '14 at 0:19
  • How are you loading that script? theme info file, drupal_add_js, #attached, etc.? – rooby Sep 17 '14 at 1:28
  • @rooby the file is loaded using drupal_add_js inside content type template – loparr Sep 17 '14 at 1:36
1

I figured it out. The wrong code came out of misunderstsatnding .once function. "nav" means a class that the selector #colorbox #block-book-navigation would be marked, so code is not fired multiple times on that selector. http://codekarate.com/blog/drupal-7-prevent-duplicating-javascript-behaviors Correct code should be:

(function ($) {
  Drupal.behaviors.myCustomJS = {
    attach: function(context, settings) {
      $('#colorbox #block-book-navigation').once('nav', function() {

        $("#colorbox #block-book-navigation a").each(function(){         
            $(this).addClass("colorbox-node");

       });


      });
    }
  };
})(jQuery);
| improve this answer | |
1

A couple of things to improve your own answer...

If a second element that matched the selector "#colorbox #block-book-navigation" were added, the addClass() would run again on all anchor tags in both elements including the ones it's already run on.

This code fixes a couple of issues:

(function ($) {
  Drupal.behaviors.myCustomJS = {
    attach: function(context, settings) {
      $('#colorbox #block-book-navigation', context).once('nav', function() {
        $("a", this).addClass("colorbox-node");
      });
    }
  };
})(jQuery);

Notes:

  • In "$('#colorbox #block-book-navigation', context)" the ", context" is added which means that this selector is only searched for in the current context which is the whole document on the initial page load or the content loaded via AJAX on an AJAX call.
  • Likewise in "$("a", this)" the ", this" makes sure it only finds anchor tags inside the "#colorbox #block-book-navigation" element that is currently being processed. I've taken away the earlier part of the selector as it's redundant now.
  • If you're not doing any other logic for every link then the ".each()" is redundant. I've removed for this example.

This code should be more perfomant (jQuery doing less DOM traversal) and more robust in that it should prevent any unnecessary repetition of logic.

| improve this answer | |
0

Can you try this?

(function($) { 
    // Create local scope.
    Drupal.behaviors.jjj = {
        attach: function (context, settings) {
            $('#colorbox #block-book-navigation', context).once('jjj', function () {
                $(this).find('a').addClass('xxx');
            });
        }
    }; 
}) (jQuery);
| improve this answer | |
  • Hi, nothing happens. I added also console.log to the code. – loparr Sep 17 '14 at 1:20
0

Currently the other solutions assume that no a tags are inserted inside an existing #colorbox #block-book-navigation in any other ajax calls.

This solution would also work in that case and is also a bit simpler than the other solutions as long as you aren't using the each loop for any other purposes:

Drupal.behaviors.jjj = {
  attach: function(context, settings) {
    $('#colorbox #block-book-navigation a', context).once('jjj').addClass('xxx');
  }
}; 
| improve this answer | |

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.