prevent script to run twice after 2 ajax loads

Question

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
– rooby, Commented Sep 16, 2014 at 23:47
How are you loading that script? theme info file, drupal_add_js, #attached, etc.? — rooby
– rooby, Commented Sep 17, 2014 at 1:28
@rooby the file is loaded using drupal_add_js inside content type template — loparr
– loparr, Commented Sep 17, 2014 at 1:36

loparr · Accepted Answer · 2014-09-18 01:39:20Z

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);

Paul Querol · Accepted Answer · 2015-04-24 17:02:31Z

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.

Nhat · Accepted Answer · 2014-09-17 00:30:54Z

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);

Hi, nothing happens. I added also console.log to the code.

loparr
– loparr

2014-09-17 01:20:20 +00:00
Commented Sep 17, 2014 at 1:20 — loparr
– loparr, Commented Sep 17, 2014 at 1:20

rooby · Accepted Answer · 2016-06-07 01:16:29Z

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'); } };

Stack Exchange Network

prevent script to run twice after 2 ajax loads

4 Answers 4

Hot Network Questions

prevent script to run twice after 2 ajax loads

4 Answers 4

Related

Hot Network Questions