Ajax loaded js not working

JavaScript
1

So im working on a site that uses ajax to load content between pages, but the javascript inside those pages stops working when its loaded, even though it works just fine if i visit the page directly.

Heres the index page

if you click “services”, you can see it it loads with the accordion sidebar not working. And when i visit the page directly, it works fine.

heres the ajax code im using (tried using live, but it didnt do the job)

$(document).ready(function() {
$(‘.nav’).live(‘click’, function(){
var href = $(this).attr(‘href’)+" Content";
$(‘Content’).hide().load(href).fadeIn(‘normal’);
return false
});
});

and i removed the document() ready part from the accordion code hoping that would do the trick, but still nothing.

Any ideas? thanks in advance

2

bump… i was kinda hoping this was a common problem, with ajax and what not. But it seems like its not.

3

Not sure if this is the reason, but live is deprecated, you should be using [url=http://api.jquery.com/on/]on. I can’t visit the sites, I get an error (might be the corporate proxy).

4

BTW, your code works fine for me (using live or on).

Here is what I created as my test:
MainPage.html

<html>
	<head>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
		<script type="text/javascript">
		$(document).ready(function() {
			$('.nav').on('click', function(){
				var href = $(this).attr('href');
				$('#content').hide().load(href).fadeIn('normal');
				return false;
			});
		});
		</script>
	</head>
	<body>
		<a href="content_about.html" class="nav">About</a> |
		<a href="content_services.html" class="nav">Services</a>
		<div id="content">
			Default Content
		</div>
	</body>
</html>

content_about.html

This is the about content

content_services.html

This is the services content
5

i actually did change it to on, sorry for posting the old code. Heres what i got so far

$(‘.center’).on(‘click’, ‘.nav’, function(){
var href = $(this).attr(‘href’)+" Content"; // remove the extra space
$(‘Content’).hide().load(href).fadeIn();
return false
});

the weird thing is, if i changed the " Content" to “Content”, it loads everything in the services page, and the accordion works fine, but it also loads everything else (header, footer), instead of just whats in the Content div…

isnt this a common occurence while using ajax? or do people normally not have a problem with things like slideshows, accordions, or other plugins if they are loaded this way?

6

the the ajax works fine, its the accordion loaded by the ajax that doesnt work… your example didnt have that

7

Oh, I see. You have an accordian inside your content page correct?

Based on how I read the script execution section of load. When you use Content as part of your URL, it will NOT load/execute the scripts associated to your html page (thus the accordian script isn’t loaded and therefore it won’t function).

8

so my only option would be to build the services.php page without header, and load the entire thing?

9

I’m not 100% certain. That is one work-around. I’ve made my test to be a little more like yours, but it occasionally loads the whole file instead of just the Content section for me. Are you getting that issue too (using Chrome v17)?

It is very odd.

10

Okay, I got it. You can use Content, but you need to add a second parameter to your load call, like so:

$('#content').hide().load(href, function() { if ($('#accordion').length != 0) $('#accordion').accordion(); }).fadeIn('normal');

Replace #accordion with the id of your accordion on your services page (both instances of it!)

11

hm, not sure how that works… heres the code i have for the accordion

$('.accordionButton').click(function() {
	$('.accordionButton').removeClass('on');

 	$('.accordionContent').slideUp('normal');

	if($(this).next().is(':hidden') == true) {
		$(this).addClass('on');

		$(this).next().slideDown('normal');
	 } 
 });
$('.accordionButton').mouseover(function() {
	$(this).addClass('over');	

}).mouseout(function() {
	$(this).removeClass('over');										
});
$('.accordionContent').hide();

$('#firstaccord').slideDown();
12

Okay, try this


$('#content').hide().load(href, function() { 
if ($('.accordionButton').length != 0)
{
  $('.accordionButton').click(function() {
    $('.accordionButton').removeClass('on');
    $('.accordionContent').slideUp('normal');

    if($(this).next().is(':hidden') == true) 
    {
      $(this).addClass('on');

      $(this).next().slideDown('normal');
    } 
  });
  $('.accordionButton').mouseover(function() 
  {
    $(this).addClass('over');	
  }).mouseout(function() 
  {
    $(this).removeClass('over');	
  });
}

if ($('.accordionContent').length != 0)
{
  $('.accordionContent').hide();
}

if ($('#firstaccord').length != 0)
{
  $('#firstaccord').slideDown();
}
}).fadeIn('normal');
13

That didnt work, it just hid all the content in the first page… But shouldnt there be a simpler way to do this, keeping the accordion and the ajax code seperate. I mean its the javascript in general that doesnt work once its loaded through ajax (the accordion just being an example). So if i had a slideshow, or any other number of js in there, this solution wouldnt work…

thanks for you help btw, i really appreciate it

14

Unfortunately, using .load() causes this issue. The only option you have is to remove the header/footer components and then remove the Content from the .load() call, if you want clean unobtrusive markup.

I don’t see any other way of accomplishing it and using Content with the .load() call

15

oh, alright yeah, i think ill just go with that then… thanks for letting me know

16

not a problem, I learned a lot about .load() through all of this hoop-la. If you still run into issue, feel free to reply to this thread again.