By rossmcdowell on

Hello,

I have a page.tpl.php which loads the javascripts used for my site; ceebox, fades, color changes on rollover etc. It does this through print $scripts; in the head of the page. Everything works fine when the page first loads...

However I have made the page 'infinite' and the page loads new nodes when the user scrolls to the bottom. These nodes are not affected by rollovers and ceebox does not work, which leads me to believe that the scripts are not being applied to these new nodes.

What is the best way to fix this problem? In my head it makes sense that I should just be able to reload the scripts whenever a new batch of nodes are loaded and it should work.

If anyone has any suggestions or has any idea how to make the script loading more dynamic, that would be amazing. If you need more information please feel free to ask...

Thanks

R

Comments

rossmcdowell’s picture

rossmcdowell commented

I am currently reading this:

"Why do my events stop working after an AJAX request?"
http://docs.jquery.com/FAQ#Why_do_my_events_stop_working_after_an_AJAX_r...

But getting no where...

scrypter’s picture

scrypter commented

explains, the newly loaded Ajax content is not bound to the jquery stuff loaded initially when the entire page loads. You may find an answer googling for drupal.behaviors, as this is one way to fix the problem. It is using drupal_add_js() with the second param of 'setting'. After the ajax, a call to the rebinding js makes the new content behave. It depends how the jquery stuff is written, if it is ajax friendly then binding new content can be achieved. If it isn't, I think you are unable to make this work without rewriting the jquery plugin(s).

I have had exactly the same problem, and as yet have not solved it. I can understand why there is this problem but have found it difficult to fix at the coding level.

www.purpleoar.co.nz/scryptik - Javascript editor with syntax error checking
www.purpleoar.co.nz - Web development, Drupal consultancy

rossmcdowell’s picture

rossmcdowell commented

Thank you for getting back to me:
How can you tell if the JS is AJAX friendly?
I have had a quick read of the Drupal.behaviors documentation and looked at a few forum posts...I guess I need to get my head around it all.
How would you swap out this js for example?:

$(document).ready(function(){
	var nodeh = 375;
	$('.boxgrid.caption').hover(function(){
		$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:320});
	}, function() {
		$(".cover", this).stop().animate({top:'375px'},{queue:false,duration:320});
	});
});

So that it used drupal.behaviors instead of document.ready? Any further reading would be appreciated...

Thanks again,

R

jaypan’s picture

jaypan
Location Victoria, BC
commented 
Drupal.behaviors.myModule = function()
{
  var nodeh = 375;
  $('.boxgrid.caption').hover(function(){
    $(".cover", this).stop().animate({top:'160px'},{queue:false,duration:320});
    }, function() {
    $(".cover", this).stop().animate({top:'375px'},{queue:false,duration:320});
  });
};

Contact me to contract me for D7 -> D10/11 migrations.