Dynamically Loading Content

Question

I am trying to load content as the user scrolls from my database. I am trying to load 10 items at a time in order. currently I have achieved everything I want to do except I am loading the first 10 items every time. I don't really know how to keep track of what items were loaded last. If I made a variable it would reset anyways everytime the script is called.

What do I need to change in order for it to load the next 10 items instead of the first 10?

php:

<?php
    // database connection info
    $conn = mysql_connect('localhost','root','') or trigger_error("SQL", E_USER_ERROR);
    $db = mysql_select_db('test',$conn) or trigger_error("SQL", E_USER_ERROR);

    //offset
    $offset=0;
    // number of rows to show per page
    $rowsperpage = 10;

    // get the info from the db 
    $sql = "SELECT ID, confession, image FROM test LIMIT $offset, $rowsperpage";
    $result = mysql_query($sql, $conn) or trigger_error("SQL", E_USER_ERROR);

    // while there are rows to be fetched...
    while ($list = mysql_fetch_assoc($result)) {
        echo '<table border="0" width="600px">';
        echo "<tr>";
        echo "<td><p>" . '<img src="' . $list['image'] . '" hspace="10" border="1" style="float:left;">' . "</p>";
        echo "<p>" . "#" . $list['ID'] . ": " . $list['confession'] . "</p></td>";
        echo "</tr>";
        echo "</table>";
        echo "<br>";
        //next ten rows
        $offset+=10;
    }
?>

javascript:

  //load content as page scrolls
  function yHandler() {

      var content = document.getElementById('content');
      var contentHeight = content.offsetHeight;
      var yOffset = window.pageYOffset;
      var y = yOffset + window.innerHeight;

      if (y >= contentHeight) {
          // Ajax call to get more dynamic data goes here
          content.innerHTML += '<div class="newData"></div>';
          document.onload = $.post('test5.php', function (data) {
              $('.newData').html(data);
          });
      }
  }
  window.onscroll = yHandler;

Why does it feels like you're all the time duplicating your own question? [pagination loading on new page \[on hold\]](http://stackoverflow.com/q/20854102/367456) (Dec 31); [Continuous page load content PHP](http://stackoverflow.com/q/20850393/367456) (Dec 31) ? — hakre, Jan 04 '14 at 13:51

sergio · Accepted Answer · 2014-01-04T12:22:07.837

3

You need to set some counter to this, for example:

<input type="hidden" value ='counter_value'>

And when you send request, you have to send it with counter value, and in php file dependce on counter value select next 10 items from db. After thet using java script increase counter value by ++. And when you will send again request the value will be +1, and in php make logic to select next items

For example, when you reached the bottom of the page, you want to download next items.

$(window).scroll(function() {

   if($(window).scrollTop() + $(window).height() == $(document).height()) {
      ///here you have to send ajax to php file to get items
var counter= $('#idOfInputwithCouner').attr('value');
  $.ajax({

    url: 'youPhpFile.php',
    data:  "counter=" + counter,
        type: 'POST',
        processData: false,
        contentType: false,
        success: function (data) {
            alert('data'); //here you will get data from php file
        $('#idOfInputwithCouner').attr('value',counter +1); //increase input value 
        }
     })
   }
});

edited Jan 04 '14 at 12:22

answered Jan 04 '14 at 11:58

sergio

5,210
7
24
46

Okay that makes sense. How can i retrive that varable in my js from my php? Currently I am trying $_GET['count']; and it is not working. – OT2O Jan 04 '14 at 12:14
Edited. Hope it will help – sergio Jan 04 '14 at 13:33
Didn't seem to work. My alert just said data. – OT2O Jan 04 '14 at 13:39
It is an example, from php file you need to send this data(your intems) Here an example http://stackoverflow.com/questions/16873549/jquery-ajax-with-php. As you can see, they send data to php file – sergio Jan 04 '14 at 13:46
1. You need to send right response to your php file via ajax with counter value. 2. You need to increase value of your counter +1. 3.Make logic in php file to select items from db and send them back to show on the page. – sergio Jan 04 '14 at 13:50
Here is what I am working with. Sorry I have never used ajax before and I am new to php. I put it in a jfiddle to make it easy for you to look at. http://jsfiddle.net/NuEpU/1/ I don't understand how to call my number that is in the ajax from the php. – OT2O Jan 04 '14 at 13:58

score 1 · Answer 2 · answered Jan 04 '14 at 11:56

1

you may use pagination logic here, send pageNumber with each call and retrieve data accordingly,

answered Jan 04 '14 at 11:56

dev

439
2
6

Dynamically Loading Content

2 Answers2