Support » Themes and Templates » AJAX loop to show more posts as user scrolls down the page

  • Resolved Nessdufrat


    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 :

    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 = $(" #content");
        var load_posts = function(){
                    type       : "GET",
                    data       : {numPosts : 1, pageNumber: page},
                    dataType   : "html",
                    url        : "",
                    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() + {
                    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!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Ok, never mind, it works. It was a stupid access-control-origin issue… I hate myself for not looking at the console right away…


    I’m currently have the same problem… Could you please post the solution?

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘AJAX loop to show more posts as user scrolls down the page’ is closed to new replies.