SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Addict
    Join Date
    Sep 2006
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Ajax loaded js not working

    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

    http://tinyurl.com/82exd3u

    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.

    http://tinyurl.com/7jfjek8

    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. #2
    SitePoint Addict
    Join Date
    Sep 2006
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    bump... i was kinda hoping this was a common problem, with ajax and what not. But it seems like its not.

  3. #3
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,221
    Mentioned
    153 Post(s)
    Tagged
    0 Thread(s)
    Not sure if this is the reason, but live is deprecated, you should be using on. I can't visit the sites, I get an error (might be the corporate proxy).

  4. #4
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,221
    Mentioned
    153 Post(s)
    Tagged
    0 Thread(s)
    BTW, your code works fine for me (using live or on).

    Here is what I created as my test:
    MainPage.html
    Code:
    <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
    Code:
    This is the about content
    content_services.html
    Code:
    This is the services content

  5. #5
    SitePoint Addict
    Join Date
    Sep 2006
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    SitePoint Addict
    Join Date
    Sep 2006
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the the ajax works fine, its the accordion loaded by the ajax that doesnt work.... your example didnt have that

  7. #7
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,221
    Mentioned
    153 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    SitePoint Addict
    Join Date
    Sep 2006
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so my only option would be to build the services.php page without header, and load the entire thing?

  9. #9
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,221
    Mentioned
    153 Post(s)
    Tagged
    0 Thread(s)
    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. #10
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,221
    Mentioned
    153 Post(s)
    Tagged
    0 Thread(s)
    Okay, I got it. You can use #content, but you need to add a second parameter to your load call, like so:
    Code:
    $('#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. #11
    SitePoint Addict
    Join Date
    Sep 2006
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #12
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,221
    Mentioned
    153 Post(s)
    Tagged
    0 Thread(s)
    Okay, try this
    Code:
    $('#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. #13
    SitePoint Addict
    Join Date
    Sep 2006
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #14
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,221
    Mentioned
    153 Post(s)
    Tagged
    0 Thread(s)
    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. #15
    SitePoint Addict
    Join Date
    Sep 2006
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh, alright yeah, i think ill just go with that then.... thanks for letting me know

  16. #16
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,221
    Mentioned
    153 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •