Results 1 to 6 of 6

Thread: Scripts dont load for AJAX generated content - Help Please

  1. #1
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up Scripts dont load for AJAX generated content - Help Please

    Hi All

    I'm going to keep this simple. I'm using a hashchange plugin for my page navigation

    I can't get scripts to run for the AJAX generated content. They run perfectly without the hashchange

    Here is a link to my current project:

    http://www.bluecoast.co.uk/test/temptation

    Here is the script that handles the hashchange:

    Code:
    $(function() {
    
        var newHash      = "",
            $mainContent = $("#right"),
            $pageWrap    = $("#wrap"),
            baseHeight   = 0,
            $el;
            
        $pageWrap.height($pageWrap.height());
        baseHeight = $pageWrap.height() - $pageWrap.height();
        
        $("nav").delegate("a", "click", function() {
            window.location.hash = $(this).attr("href");
            return false;
        });
        
        $(window).bind('hashchange', function(){
        
            newHash = window.location.hash.substring(1);
            
            if (newHash) {
                $mainContent
                    .find("#guts")
                    .fadeOut(200, function() {
                        $mainContent.hide().load(newHash + " #guts", function() {
                            $mainContent.fadeIn(200, function() {
                                $pageWrap.animate({
                                    height: baseHeight + $mainContent.height() + "px"
                                });
                            });
                            $("nav a").removeClass("current");
                            $("nav a[href="+newHash+"]").addClass("current");
                        });
                    });
            };
            
        });
        
        $(window).trigger('hashchange');
    	
    });
    I'm loading the scripts in the header of the main index.php page like so:

    Code:
    <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="js/jquery.form.js"></script>
    <script type="text/javascript" src="js/jquery.tweet.js"></script>
    <script type="text/javascript" src="js/easing.js"></script>
    <script type="text/javascript" src="js/jquery.anythingslider.min.js"></script>
    <script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
    <script type="text/javascript" src="js/jquery.tools.min.js"></script>
    <script type="text/javascript" src="js/jquery.localscroll-1.2.7-min.js"></script>
    
    <!--[if IE 7]><link href="css/ie7.css" rel="stylesheet" type="text/css" media="screen" /><![endif]-->
    
    <script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>
    <script type='text/javascript' src='js/dynamicpage.js'></script>
    <!--[if IE]>
       <script src="js/html5.js"></script>
    <![endif]-->
    
    <script type="text/javascript" src="js/custom.js"></script>
    Would somebody be kind enough to help me with this?

    Thanks in advance
    Craig

  2. #2
    Join Date
    Aug 2005
    Posts
    174
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    I'm having a similar problem..

    I am loading external content using .load, I have functions in the main document which is called from the external content, but nothing happens!

    If I include the external content using php include then those functions work! but obviously I would like to do this with jquery too!

  3. #3
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi Nikomou

    It would work with php includes as that's processed server side before the page is served and the scripts are run. Meaning the elements are already present when the functions are called

    I think the problem here is the the new elements are not added to the DOM and so the scripts ignore them

    It's a pain as I know what needs to be done, I just can't do it! lol

  4. #4
    Join Date
    Aug 2005
    Posts
    174
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Hi ThatBloke,

    I found a post here - http://stackoverflow.com/questions/3...om-with-jquery

    which lead me to the live() api - http://api.jquery.com/live/

    Any idea how to implement it?

    Niko

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    If you're using .load() to import contents via AJAX and you have something like $('.whatever').click(function() . . .

    You can do instead:

    Code:
    $('.whatever').live('click', function() . . .
    You can do this with any event and it will apply to $('.whatever') whenever it shows up. But you can only do it with events. That gives you a lot to work with, but might require that you rethink things a little or a lot. If all you're trying to do is attach an event though, .live() works virtually seamlessly as a substitute for the event. See:

    http://api.jquery.com/live/

    for more info.
    Last edited by jscheuer1; 10-19-2011 at 10:32 AM. Reason: clarity
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks jscheuer1

    nikomou - I've found an easier solution which works a treat for me. jscheur1's solution will also work:

    Create an anonymous function that calls another function on document ready, I've called mine init:

    Code:
    $(document).ready(function() {
    init();
    });
    Then include all your custom scripts (not libraries or plugins as they're already loaded) in the init function, e.g:

    Code:
    function init() {
         //Include all your scripts here//
    }
    Hope it helps

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
  •