Call the content of a page in AJAX in Wordpress

Question

Out of Wordpress, I've made a simple index page wich call the content of 10 other pages thanks to AJAX. Now I need to put this into Wordpress and the AJAX calls don't work at all.

I have created the homepage and 10 other pages. When the user arrives on my website, the homepage has a menu. Each item of this menu has a link with the HREF relative to 1 of the 10 pages (thanks to get_permalink( page_id );). My script get the value of the HREF and try to load the content of the page. I worked out of Wordpress but it doesn't inside of Wordpress.

Here is the menu :

<ul class="nav">
    <li><a href="<?php echo get_permalink( 41 ); ?>" data-parallax><span class="accessibility">Règle #</span><span class="number">0</span><span class="accessibility"> -</span><span class="rule-label">La coparentalité</span></a></li>
    <li><a href="<?php echo get_permalink( 43 ); ?>" data-parallax><span class="accessibility">Règle #</span><span class="number">1</span><span class="accessibility"> -</span><span class="rule-label">N’obligez pas votre enfant à faire un choix</span></a></li>
    <li><a href="<?php echo get_permalink( 45 ); ?>" data-parallax><span class="accessibility">Règle #</span><span class="number">2</span><span class="accessibility"> -</span><span class="rule-label">Optez pour un discours positif</span></a></li>
    <li><a href="<?php echo get_permalink( 49 ); ?>" data-parallax><span class="accessibility">Règle #</span><span class="number">3</span><span class="accessibility"> -</span><span class="rule-label">Épargnez les détails à votre enfant</span></a></li>
    <li><a href="<?php echo get_permalink( 51 ); ?>" data-parallax><span class="accessibility">Règle #</span><span class="number">4</span><span class="accessibility"> -</span><span class="rule-label">Ne faites pas de votre enfant votre messager</span></a></li>
    <li><a href="<?php echo get_permalink( 53 ); ?>" data-parallax><span class="accessibility">Règle #</span><span class="number">5</span><span class="accessibility"> -</span><span class="rule-label">Détachez-vous de votre ex-conjoint</span></a></li>
    <li><a href="<?php echo get_permalink( 55 ); ?>" data-parallax><span class="accessibility">Règle #</span><span class="number">6</span><span class="accessibility"> -</span><span class="rule-label">Fixez des limites et des attentes pour vos enfants</span></a></li>
    <li><a href="<?php echo get_permalink( 57 ); ?>" data-parallax><span class="accessibility">Règle #</span><span class="number">7</span><span class="accessibility"> -</span><span class="rule-label">Restez ouvert à la communication</span></a></li>
    <li><a href="<?php echo get_permalink( 59 ); ?>" data-parallax><span class="accessibility">Règle #</span><span class="number">8</span><span class="accessibility"> -</span><span class="rule-label">Devenez adulte et responsable</span></a></li>
    <li><a href="<?php echo get_permalink( 61 ); ?>" data-parallax><span class="accessibility">Règle #</span><span class="number">9</span><span class="accessibility"> -</span><span class="rule-label">Mettez votre enfant en confiance et en sécurité</span></a></li>
    <li><a href="<?php echo get_permalink( 63 ); ?>" data-parallax><span class="accessibility">Règle #</span><span class="number">10</span><span class="accessibility"> -</span><span class="rule-label">Apprenez à rebondir !</span></a></li>
</ul>

In function.php, I have that :

/************************************************************************/
/*  JS
/************************************************************************/

function load_my_scripts() {

    //Include one of my custom javascript files
    wp_register_script('scrollTo', get_stylesheet_directory_uri().'/js/jquery.scrollTo-min.js', array('jquery'), filemtime( get_stylesheet_directory().'/js/jquery.scrollTo-min.js'), true );
    wp_register_script('seo-parallax', get_stylesheet_directory_uri().'/js/jquery.seo-parallax.js', array('jquery'), filemtime( get_stylesheet_directory().'/js/jquery.seo-parallax.js'), true );
    wp_register_script('myscript', get_stylesheet_directory_uri().'/js/scripts.js', array('jquery'), filemtime( get_stylesheet_directory().'/js/scripts.js'), true );

    wp_enqueue_script('scrollTo');
    wp_enqueue_script('seo-parallax');
    wp_enqueue_script('myscript');
}
add_action('wp_enqueue_scripts', 'load_my_scripts');

In jquery.seo-parallax, I have that :

(function( $ ) {
  $.fn.SEOParallax = function() {
        var container_id = "content"; // the id of the container (must be the same on each page)
        var container = $("#"+container_id); // the container where the content will be put in
        var pages = $("a[data-parallax]"); // every content that should be injected
        var number = 0;
        // console.log(number);
        $(container).html("");
        pages.each(function(page){
            var page = $(this);

            var url = $(this).attr("href");
            console.log(url);
            // Remove the current content
            $.get(url, function(data) {
                // console.log(url);
                var code = $(data);
                code.each(function() {
                    if($(this).attr("id") == container_id){
                        subcontainer = $("<span id='rule-photo-"+number+"-anchor' class='rule-anchor'></span>")
                        $(subcontainer).appendTo($(container));
                        $($(this).html()).insertAfter($(subcontainer));
                        $(page).attr("href", "#rule-photo-"+number+"-anchor");
                        number += 1;

                    } 
                })
            });
        });
            // wrap the content and include it in the page

        // end
  };
})( jQuery );

In scripts.js, I have that :

;( function($) {
    $( "body" ).SEOParallax();

    $( "body" ).delegate( "a", "click", function() {
        $( 'html, body' ).animate( {
            scrollTop: $( $( this ).attr( "href" ) ).offset().top
        }, 1200 );
        return false;
    } );
} )( jQuery || {} );

So normally, when the page is loaded, the seo-parallax script take the 11 links that are in the navigation, empty #content of the current page and add the content in #content of each page. On chrome, the content is not in the good order. Normally y has to place the content is this order : 0-1-2-3-4-5-6-7-8-9-10. But instead, it's randomly placed (example : 1-4-0-9-6-10-2-5-8-3-7).

UPDATE : I've called <?php var_dump($GLOBALS['wp_query']) ?> juste before <?php get_footer(); ?>, here what I have :

object(WP_Query)#23 (47) { ["query_vars"]=> array(55) { ["error"]=> string(0) "" ["m"]=> int(0) ["p"]=> string(2) "41" ["post_parent"]=> string(0) "" ["subpost"]=> string(0) "" ["subpost_id"]=> string(0) "" ["attachment"]=> string(0) "" ["attachment_id"]=> int(0) ["name"]=> string(0) "" ["static"]=> string(0) "" ["pagename"]=> string(0) "" ["page_id"]=> string(2) "41" ["second"]=> string(0) "" ["minute"]=> string(0) "" ["hour"]=> string(0) "" ["day"]=> int(0) ["monthnum"]=> int(0) ["year"]=> int(0) ["w"]=> int(0) ["category_name"]=> string(0) "" ["tag"]=> string(0) "" ["cat"]=> string(0) "" ["tag_id"]=> string(0) "" ["author_name"]=> string(0) "" ["feed"]=> string(0) "" ["tb"]=> string(0) "" ["paged"]=> int(0) ["comments_popup"]=> string(0) "" ["meta_key"]=> string(0) "" ["meta_value"]=> string(0) "" ["preview"]=> string(0) "" ["s"]=> string(0) "" ["sentence"]=> string(0) "" ["fields"]=> string(0) "" ["category__in"]=> array(0) { } ["category__not_in"]=> array(0) { } ["category__and"]=> array(0) { } ["post__in"]=> array(0) { } ["post__not_in"]=> array(0) { } ["tag__in"]=> array(0) { } ["tag__not_in"]=> array(0) { } ["tag__and"]=> array(0) { } ["tag_slug__in"]=> array(0) { } ["tag_slug__and"]=> array(0) { } ["ignore_sticky_posts"]=> bool(false) ["suppress_filters"]=> bool(false) ["cache_results"]=> bool(false) ["update_post_term_cache"]=> bool(true) ["update_post_meta_cache"]=> bool(true) ["post_type"]=> string(0) "" ["posts_per_page"]=> int(10) ["nopaging"]=> bool(false) ["comments_per_page"]=> string(2) "50" ["no_found_rows"]=> bool(false) ["order"]=> string(4) "DESC" } ["tax_query"]=> object(WP_Tax_Query)#43 (2) { ["queries"]=> array(0) { } ["relation"]=> string(3) "AND" } ["meta_query"]=> object(WP_Meta_Query)#42 (2) { ["queries"]=> array(0) { } ["relation"]=> NULL } ["post_count"]=> int(1) ["current_post"]=> int(-1) ["in_the_loop"]=> bool(false) ["comment_count"]=> int(0) ["current_comment"]=> int(-1) ["found_posts"]=> int(0) ["max_num_pages"]=> int(0) ["max_num_comment_pages"]=> int(0) ["is_single"]=> bool(false) ["is_preview"]=> bool(false) ["is_page"]=> bool(true) ["is_archive"]=> bool(false) ["is_date"]=> bool(false) ["is_year"]=> bool(false) ["is_month"]=> bool(false) ["is_day"]=> bool(false) ["is_time"]=> bool(false) ["is_author"]=> bool(false) ["is_category"]=> bool(false) ["is_tag"]=> bool(false) ["is_tax"]=> bool(false) ["is_search"]=> bool(false) ["is_feed"]=> bool(false) ["is_comment_feed"]=> bool(false) ["is_trackback"]=> bool(false) ["is_home"]=> bool(false) ["is_404"]=> bool(false) ["is_comments_popup"]=> bool(false) ["is_paged"]=> bool(false) ["is_admin"]=> bool(false) ["is_attachment"]=> bool(false) ["is_singular"]=> bool(true) ["is_robots"]=> bool(false) ["is_posts_page"]=> bool(false) ["is_post_type_archive"]=> bool(false) ["query_vars_hash"]=> string(32) "8f15f3752a526b936a323e2a33ace1e5" ["query_vars_changed"]=> bool(false) ["thumbnails_cached"]=> bool(false) ["query"]=> array(0) { } ["request"]=> string(143) "SELECT wp_4_posts.* FROM wp_4_posts WHERE 1=1 AND wp_4_posts.ID = 41 AND wp_4_posts.post_type = 'page' ORDER BY wp_4_posts.post_date DESC " ["posts"]=> &array(1) { [0]=> object(stdClass)#62 (25) { ["ID"]=> int(41) ["post_author"]=> string(1) "7" ["post_date"]=> string(19) "2013-03-20 11:06:49" ["post_date_gmt"]=> string(19) "2013-03-20 11:06:49" ["post_content"]=> string(0) "" ["post_title"]=> string(38) "La coparentalité, comment ça marche?" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(6) "closed" ["post_password"]=> string(0) "" ["post_name"]=> string(34) "la-coparentalite-comment-ca-marche" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2013-03-20 14:29:31" ["post_modified_gmt"]=> string(19) "2013-03-20 14:29:31" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(43) "http://miniguide.wp.2houses.com/?page_id=41" ["menu_order"]=> int(0) ["post_type"]=> string(4) "page" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["ancestors"]=> array(0) { } ["filter"]=> string(3) "raw" } } ["post"]=> object(stdClass)#62 (25) { ["ID"]=> int(41) ["post_author"]=> string(1) "7" ["post_date"]=> string(19) "2013-03-20 11:06:49" ["post_date_gmt"]=> string(19) "2013-03-20 11:06:49" ["post_content"]=> string(0) "" ["post_title"]=> string(38) "La coparentalité, comment ça marche?" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(6) "closed" ["post_password"]=> string(0) "" ["post_name"]=> string(34) "la-coparentalite-comment-ca-marche" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2013-03-20 14:29:31" ["post_modified_gmt"]=> string(19) "2013-03-20 14:29:31" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(43) "http://miniguide.wp.2houses.com/?page_id=41" ["menu_order"]=> int(0) ["post_type"]=> string(4) "page" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["ancestors"]=> array(0) { } ["filter"]=> string(3) "raw" } ["queried_object"]=> object(stdClass)#62 (25) { ["ID"]=> int(41) ["post_author"]=> string(1) "7" ["post_date"]=> string(19) "2013-03-20 11:06:49" ["post_date_gmt"]=> string(19) "2013-03-20 11:06:49" ["post_content"]=> string(0) "" ["post_title"]=> string(38) "La coparentalité, comment ça marche?" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(6) "closed" ["post_password"]=> string(0) "" ["post_name"]=> string(34) "la-coparentalite-comment-ca-marche" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2013-03-20 14:29:31" ["post_modified_gmt"]=> string(19) "2013-03-20 14:29:31" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(43) "http://miniguide.wp.2houses.com/?page_id=41" ["menu_order"]=> int(0) ["post_type"]=> string(4) "page" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["ancestors"]=> array(0) { } ["filter"]=> string(3) "raw" } ["queried_object_id"]=> int(41) }

Where is the problem ? Thanks you

Answer 1

I already mentioned in the comments, that there're preferred ways to load your scripts. The most important is to define the dependencies and the using the proper hooks.

The following part won't work like this:

$(document).ready(function() {
    $("body").SEOParallax();

    $("body").delegate("a", "click", function() {
        $('html, body').animate({
            scrollTop: $($(this).attr("href")).offset().top
        }, 1200);
        return false;
    });
});

The WordPress Javascript Coding Standards by Tom McFarlin show you the right way to do it - avoiding the need for the no conflict mode:

;( function ($) {
    // ...
} ( jQuery ) );

This is a self invoking —and immediately executing— function, injecting jQuery as first argument, which gets named $ inside the scope of the function itself. Now you can safely use $ instead of jQuery.

So your script should look like this:

;( function($) {
    $( "body" ).SEOParallax();

    $( "body" ).delegate( "a", "click", function() {
        $( 'html, body' ).animate( {
            scrollTop: $( $( this ).attr( "href" ) ).offset().top
        }, 1200 );
        return false;
    } );
} )( jQuery || {} );

I should as well note that you shouldn't use .delegate() anymore. Quote from jQuery:

"As of jQuery 1.7, the alternative .on() method may be used in place of .delegate()"

but that's part of another discussion better moved over to StackOverflow.

Answer 2

You could look into using djax, which is dynamic pjax (and pjax being ajax using pushState).

pjax (and by extension djax) allows you to set a container on the page that exists in all other pages, for example a <div id="content">. You simply add a class to it that you also define in the JavaScript of the plugin. For example: <div id="content" class="dynamic">.

This plugin now attempts to load the HTML of the requested URL, looks for the element with the dynamic class and replaces the current page's contents of that element with the fetched result.

djax was a pjax-modification specifically designed for WordPress, and I'm successfully using it on http://www.tjoonz.com (if you want to see a working example).