0

I've never written Ajax before and I am currently trying to code up an infinite scrolling page. When the user scrolls down to the bottom of the page, more items are supposed to load, but right now they aren't loading. Here is my Javascript to detect when they hit the bottom and make the Ajax call:

window.onload=function(){
//Find out how many items I have loaded and what filter I am using so I can make the Ajax call
var vloaded = <?php echo $i; ?>;
var vfilter = "<?php echo $filter ?>";
$(window).on('scroll', function () { 
  if ($(window).height() + $(window).scrollTop() >= $(document).height() - 10) {
    //I have reached the bottom of the page, now load items
    alert("loaded is " + vloaded + " and filter is " + vfilter);
    $.post("/organizer/getMore", 
        { filter: vfilter, loaded: vloaded }, 
                function(responseText) {
                    $("grid").append(responseText); 
                },"html");
    //I've loaded the next 30 items, increment my counter for next time
    vloaded +=30;   
  }
});
}

The alert is displaying when I hit the bottom, and my variable is incrementing correctly. I'm using Zend Framework, so the URL points to my getMoreAction() function here:

public function getmoreAction()
{
//Used by Ajax to get more items for the infinite scroll
    //Figure out how I'm filtering items and how many I've already loaded
    $filter = $_POST['filter'];
    $loaded = $_POST['loaded'];
    echo "Filter is ".$filter;
    echo "Loaded ".$loaded;
    //Get all the items in the database ordered by filter
    require_once(APPLICATION_PATH . '/models/ItemArray.php');
    $items = ItemArray::getItems($user->getID(), $filter, $loaded );
    //Return items back to Ajax call, converted to html
    echoItems($items);  
}

I already know the getItems function works, because I'm also using it when the page first loads, and echoItems is just a loop to echo the html for each item, which also works elsewhere. The echos in the action never execute, so I'm assuming there is something wrong with my post call such that I'm never even getting to this action.

jaimerump
  • 882
  • 4
  • 17
  • 35
  • 1
    Do you use firebug? If not, do. It's an add-on to Firefox that lets you quickly see the post/response (and MUCH more) of your ajax requests, so you can see what's going on quickly and easily. – random_user_name Jun 26 '12 at 17:38
  • Also, if you use Chrome or IE, the F12 button will bring up the built-in console. – efesar Jun 26 '12 at 17:55
  • Well, from firebug I found out that I was getting a fatal error from user not being defined. I fixed that, but still nothing is happening. Every time I scroll down the alert box pops up again, but no new items are loaded. `$("grid").append(responseText);` should append any html contained in the variable `responseText` to the end of the element with id 'grid', correct? Also, in Firefox the alert box seems to pop up whenever I scroll down 10 pixels rather than when I scroll down to within 10 pixels of the bottom. – jaimerump Jun 26 '12 at 18:21

1 Answers1

1

2 suggestions.

  1. Use the jQuery function $(document).ready() instead of the window.onload property.
  2. Use the jQuery function $.ajax() instead of $.post()

I refactored just so I could read it more easily.

// put these in the global scope
var vloaded = <?php echo $i; ?>;
var vfilter = "<?php echo $filter ?>";

$(document).ready() 
{

  // I forgot to leave this in
  $(window).on('scroll', function () 
    {
      var height = $(window).height();
      var scrollTop = $(window).scrollTop();
      var dHeight = $(document).height();

      if( height + scrollTop >= dHeight - 10) 
      {
          alert("loaded is " + vloaded + " and filter is " + vfilter);

          // an AJAX request instead of a POST request
          $.ajax
          (
            {
              type: "POST",
              url: "/organizer/getMore",
              data: { filter: vfilter, loaded: vloaded },
              dataType: "html",
              success: function( responseText, textStatus, XHR )
              {
                // select the element with the ID grid and insert the HTML
                $( "#grid" ).html( responseText );
              }
            }
          );

          // global variable
          vloaded +=30;

      } // if
    }

  ); // on

} // ready
efesar
  • 1,323
  • 2
  • 9
  • 9
  • With `$(document).ready()` the alert no longer pops up at all, and in Firefox it messes up the layout of the page for some reason. – jaimerump Jun 26 '12 at 18:27
  • It seems to duplicate my footer, which is located in a separate file and inserted by Zend_Layout, every time the Ajax kicks in. And on firefox it kicks in 10 pixels from the top instead of the bottom. – jaimerump Jun 26 '12 at 18:40
  • Do you have a web-facing URL that I can look at? – efesar Jun 26 '12 at 18:48
  • You would need to be logged in to see the page, and since the application hasn't been launched yet I can't let anyone in. What do you need to see? – jaimerump Jun 26 '12 at 18:54
  • I reviewed my code, and I forgot the `window.on()` event. It's back in there. Sorry about that. I don't know how it's messing up the layout ... There aren't any javascript console errors, are there? – efesar Jun 26 '12 at 19:11
  • The only other question I have now is about your "grid" element. Is it named "grid" or did you give it an id of "grid"? – efesar Jun 26 '12 at 19:13
  • It's an unordered list with an id of grid. And the only console error it's displaying is a 404 error for a stylesheet that it's displaying perfectly fine anyway. – jaimerump Jun 26 '12 at 19:19
  • Okay, the new code is up there and I tested it on my local server. It works. Also, the data point `url` should point to a valid PHP file. – efesar Jun 26 '12 at 19:27