Dynamically Loading Content [duplicate]

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] (Dec 31); Continuous page load content PHP (Dec 31) ? — hakre
– hakre, Commented Jan 4, 2014 at 13:51

sergio · Accepted Answer · 2014-01-04 12:22:07Z

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

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.
It is an example, from php file you need to send this data(your intems) Here an example stackoverflow.com/questions/16873549/jquery-ajax-with-php. As you can see, they send data to php file
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.

dev · Accepted Answer · 2014-01-04 11:56:57Z

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

Collectives™ on Stack Overflow

Dynamically Loading Content [duplicate]

2 Answers 2

6 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Linked

Related