Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm creating a theme that uses only the homepage. When a button is clicked, the content for that section is loaded into a div on the homepage via AJAX (script below).

$.ajaxSetup ({  
    cache: false  
});  
    var ajax_load = "<center><img src='<?php bloginfo("template_url"); ?>/images/loading.gif' alt='Loading...' /></center>";  

    var loadUrl = "http://localhost:8888/cnNew/?portfolio=portfolio-test"; 
        $("#ourTeam").click(function(){
            $("#main")
                .html(ajax_load)
                .load(loadUrl + " #content");
        });

All of the .js files are being loaded in via wp_enqueue_script:

function my_init() {
    if (!is_admin()) {
        // comment out the next two lines to load the local copy of jQuery
        wp_deregister_script('jquery');
        wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js', false, '1.4.3');
        wp_enqueue_script('jquery');
        wp_enqueue_script( 'galleria_plugin', get_bloginfo('template_directory') . '/js/galleria.js', array('jquery') );
    }
}
add_action('init', 'my_init');

function my_scripts() {
    wp_enqueue_script( 'carousel', get_bloginfo('template_directory') . '/js/carousel.js', array('jquery') );
    wp_enqueue_script( 'backstretch', get_bloginfo('template_directory') . '/js/jquery.backstretch.min.js', array('jquery') );
    wp_enqueue_script( 'nivo_slider', get_bloginfo('template_directory') . '/js/jquery.nivo.slider.pack.js', array('jquery') );
    wp_enqueue_script( 'tabify', get_bloginfo('template_directory') . '/js/jquery.tabify-1.4.js', array('jquery') );
    wp_enqueue_script( 'mouse_wheel', get_bloginfo('template_directory') . '/js/scroll/jquery.mousewheel.js', array('jquery') );
    wp_enqueue_script( 'scroll_pane', get_bloginfo('template_directory') . '/js/scroll/jquery.jscrollpane.min.js', array('jquery') );
}
add_action('template_redirect', 'my_scripts');

THE ISSUE:

Since the page isn't refreshing and the content is being loaded into a DIV via AJAX when a button is clicked, i'm guessing, the content that is being loaded in that uses jQuery and other .js files is coming in broken because the .js files have already loaded without that content being on the page.

I need to find a way to "refresh" the already loaded .js files so that the newly loaded content doesn't come in broken. Or am I approaching this in the wrong way?

I'm a novice when it comes to AJAX since this is the first time i've used it. I was given this: http://www.wphardcore.com/2010/5-tips-for-using-ajax-in-wordpress/ as a reference but I found it hard for me to follow.

Thanks for the help!

share|improve this question
    
Firefox >Tools > Error console, should help you find the javascript error... –  onetrickpony Dec 20 '10 at 17:38
    
Explain what you mean by "broken". Like the markup is broken and the display is messed up? Or JavaScript breaks altogether? Or JavaScript just doesn't work with items you've loaded via AJAX? –  MathSmath Dec 20 '10 at 18:06
    
When going to the page directly that has the content on it that would be loaded into the home page, everything works accordingly (slideshow and tabs). But when the content is loaded via the AJAX into the homepage, the slideshow and tabs are not working, like the .js files never loaded. (but they did when the site first loads) –  jetDL Dec 20 '10 at 18:09
    
@ambitious There are no errors being thrown. –  jetDL Dec 20 '10 at 18:10

1 Answer 1

up vote 2 down vote accepted

So if you say there are no errors, I'm assumming that your problem is the AJAX request changing the DOM, and your scripts being loaded before that.

If the document changes, you'll need to tell your scripts that, so they will fire their events on the new content.

So:

  • Either you reload all scripts again after the AJAX updated the document (then you should put your script tags inside the element that's being changed) - this is ugly

  • Or use live(), or livequery() in your scripts to scan for document changes. For eg:

    $(".bla").click(function(){ ... })

    should be changed to

    $(".bla").live('click', function(){ ... }


from the jquery API, live():

Description: Attach a handler to the event for all elements which match the current selector, now and in the future.

update:

The tabify script is initiated in the document.ready section in the header this way: $('#caseSections').tabify(); and is used on secondary pages (the pages that are loaded via ajax into the homepage via a button click).

So tabify will be applied to the #caseSections selector from the initial document. I assume that this works. Your prooblem is that it stops working after the AJAX updates the page, right?

Solutions:

  1. Since it's not set to be fired on a particular event, you'll need to install & enqueue the livequery script I mentioned above. Then change $('#caseSections').tabify(); with:

    $('#caseSections').livequery(function(){ $(this).tabify(); });

  2. Simply call $('#caseSections').tabify(); again after the AJAX completes, in the "success" function.

share|improve this answer
    
Thanks, not sure I fully understand .live(). I've changed my .click to .live but nothing has changed. I changed: $("#ourTeam").click(function(){ - to - $("#ourTeam").live('click', function(){ –  jetDL Dec 20 '10 at 18:58
    
no, not to the AJAX part. it would have been nice if it was that easy :) For example, let's say the "carusel" script is applied to the elements that are updated with the ajax => You need to make the carusel "live" –  onetrickpony Dec 21 '10 at 0:45
    
I'm still not understanding fully, how would I make the individual javascript files "live" when they're being loaded with wp_enqueue_script? Thanks for the help! –  jetDL Dec 21 '10 at 12:37
    
ok, let's take it step by step. How are you using your carousel script on your site? I assume you add a line of code in jquery's documentready() section, right? –  onetrickpony Dec 21 '10 at 14:03
    
Just to help me better, lets use 'tabify' as the example since carousel lives on the homepage and never leaves it. The tabify script is initiated in the document.ready section in the header this way: $('#caseSections').tabify(); and is used on secondary pages (the pages that are loaded via ajax into the homepage via a button click). –  jetDL Dec 21 '10 at 14:55

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.