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.

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

share|improve this question
1  
Please take a look at this answer on how loading should be done. Take a deep look at the filemtime() part and the get_stylesheet_directory_uri(). Then change this in your code, test it again and report back/update the question. –  kaiser Mar 21 '13 at 15:30
    
Please wrap that dump in <pre> tags before posting it. This is not readable. echo '<pre>'.htmlspecialchars( var_export( $GLOBALS['wp_query'], true ) ).'</pre>'; –  kaiser Mar 22 '13 at 14:40

2 Answers 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).

share|improve this answer

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 ) );

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.

share|improve this answer
    
Hi Kaiser ! I've done everything you said, but still the same problem. But I've found something : when I try to go on one of the other 1à pages, I have a "Page not found" !!! The permalinks structure is /%postname%/ . When I change the permalinks structure to default (page ID), it works well :s ! Have you got an idea ? –  Cédric Charles Mar 22 '13 at 9:03
    
@CédricCharles Yes: Flush your permalinks again (visit Settings > Permalink > Update). Anyway: 404s are another topic. Please go and update your question with what your code looks like, your error/var_dump/debug and console messages. –  kaiser Mar 22 '13 at 9:41
    
I've update the permalinks, but still doesn't work... Anyway, with the post_ID structure, I still have a problem. The 11 pages are added to my page in a random order. Sometimes it's the good one (0-1-2-3-4-5-6-7-8-9-10), sometimes not (random, for example : (1-8-2-4-0-5-7-10-3-6-9) :s ! –  Cédric Charles Mar 22 '13 at 9:58
    
@CédricCharles Please go back and update your question with all your code_. This is the _third problem you're bringing to the table... :/ –  kaiser Mar 22 '13 at 10:19
    
I've updated my code :) –  Cédric Charles Mar 22 '13 at 10:52

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.