[resolved] AJAX loop to show more posts as user scrolls down the page (3 posts)

  1. Nessdufrat
    Posted 3 years ago #

    I'm trying to do something quite complicated with AJAX, so I decided to start with something simpler : Following a tutorial. This one, to be precise : http://wp.tutsplus.com/tutorials/getting-loopy-ajax-powered-loops-with-jquery-and-wordpress

    I've done everything, watched the video, spent a whole afternoon and evening trying to find out what when wrong, but I couldn't.
    I even downloaded the files, so that I would have exactly the same code. I'm getting the same error...

    I can't really limk the website because it's something we are keeping secret for the moment, so if I put it here, it will be referenced by google...
    But you can find it here : www. espacescomprises (dot) com
    I'm getting this error : [object Object] :: error ::

    I think the problem is that the ajaxLoop.js is not able to retrieve correctly the data output by loopHandler.php (which works, I've tried running it on its own and I get the list of posts without problem).
    ajaxLoop.js is supposed to take the data output by loopHandler.php and append it to the content div... Which is not happening. Generated source code shows that :

    <div id="primary">
    			<div id="content" role="main">
    			</div><!-- #content -->
    		</div><!-- #primary -->

    I'll put the code from ajaxLoop.js here too :

    // ajaxLoop.js
        var page = 1;
        var loading = true;
        var $window = $(window);
        var $content = $("body.blog #content");
        var load_posts = function(){
                    type       : "GET",
                    data       : {numPosts : 1, pageNumber: page},
                    dataType   : "html",
                    url        : "http://www.hereisnormalythenameofmywebsite.com/wp-content/themes/espacescomprises/loopHandler.php",
                    beforeSend : function(){
                        if(page != 1){
                            $content.append('<div id="temp_load" style="text-align:center">\
                                <img src="../images/ajax-loader.gif" />\
                    success    : function(data){
                        $data = $(data);
                            $data.fadeIn(500, function(){
                                loading = false;
                        } else {
                    error     : function(jqXHR, textStatus, errorThrown) {
                        alert(jqXHR + " :: " + textStatus + " :: " + errorThrown);
        $window.scroll(function() {
            var content_offset = $content.offset();
            if(!loading && ($window.scrollTop() +
                $window.height()) > ($content.scrollTop() + $content.height() + content_offset.top)) {
                    loading = true;

    What has gone wrong? Could you give me some pointers? It would be a huge help in achieving the much more complicated thing I'd like to do with the website (it's not that much more complicated, actually, I want to show the list of subcategories after user clicks on category but without refreshing the page. Imagine a drop-down menu, for example)

    Thanks for all advice!

  2. Nessdufrat
    Posted 3 years ago #

    Ok, never mind, it works. It was a stupid access-control-origin issue... I hate myself for not looking at the console right away...

  3. Mic_H
    Posted 3 years ago #


    I'm currently have the same problem... Could you please post the solution?

Topic Closed

This topic has been closed to new replies.

About this Topic