Show button only if there is more data to load data

Question

I need to create a script in jQuery and PHP that will show the load more news button only when more data that has not yet been loaded on the page is loaded. The easiest solution is to check if the table is updated, but I'm not sure if this can be done. Another way is to check if the content in the table that is currently not on the page is again not sure how to do this.

This is what I still have;

 //check for more data every 5 seconds window.setInterval(function() { $.get("phpscripts/getFeed.php", function(result) { //fade in #refreshFeed $("#refreshFeed").fadeIn(300); }); }, 5000); //Get feed on click $("#refreshFeed").live('click', function() { $.get("phpscripts/getFeed.php", function(result) { $("#newsFeed").html(result); }); }); 

It just makes the button appear after 5 seconds and does not check if there is more data to load. The php script in the second function just loads the data from the table.

I would hope that there is a way to use the same script in a function at the moment and do it all in jQuery.

As an example, if anyone has ever been to twitter or the new facebook iphone app, the concept is exactly the same. When new information appears in the database, a button is displayed that will load this data into the top of the feed when clicked. I'm sure facebook and twitter will use SSE, although I don't need this. All I have to do is check for new data every 5 seconds.

Answer 1

I just finished two views of the advanced link features on the site, and I can tell you about the performance testing that we did to best load all the data and add it to the DOM when loading the page into the elements using display: none . Use the jQuery selector to get all of these elements and save the collection in a variable. Then you can write your view more / less scripts for these elements.

If you need help with the scripts, let me know and I will be happy to help. Good luck! :)

Edit:

I think I might have missed part of your question (how to find out when to hide or show buttons). You want to save the variable that you use to store the number of items you ate, showing and slicing, to show more / less. Alternatively (but with a lot of overhead), you can use classes as flags to determine which items are not shown.

Answer 2

First of all, there are several ways you can do this. You can load all data at the same time and manipulate what to show using jQuery. In addition, you can gradually receive more data from the server, and I will give a suggestion on how to do this below (the former may have performance improvements). In addition, loading data gradually using jQuery will affect SEO.

As I wrote in my comment on your question, you can use JSON to return data from PHP to jQuery and include a variable indicating whether there is more data to retrieve. You can then check this variable to see if the "read more" link should be shown or not. Let's look at the server side of things first.

I don’t know how you want to “split” your data, but for simplicity I just assume that the text will be turned off after 500 characters, after which another 500 will be loaded, etc.

 const LOAD_PER_REQUEST = 500; // Load 500 characters per request $text = 'Lorem ipsum...'; // Fetched from database $requestNumber = (isset($_POST['requestNumber'])) ? ((int)$_POST['requestNumber']) : 0; // Use to calculate which data to return to jQuery // Calculate & generate data to return to jQuery $start = ($requestNumber * LOAD_PER_REQUEST); $length = ($start - ($start + LOAD_PER_REQUEST)); $newText = substr($text, $start, $length); $data = array( 'text' => $newText, 'hasMoreData' => (strlen($text) > ($start + LOAD_PER_REQUEST)) // If $text length is longer than where we cut off ); echo json_encode($data); 

Now in jQuery, you can get the data by doing something like this:

 $(function() { var requestNumber = 1; // Assuming that initial data is placed on the page with PHP $('#refreshFeed').on('click', function(){ // Get more data $.ajax({ type: 'POST', url: 'phpscripts/getFeed.php', dataType: 'json', data: 'requestNumber=' + requestNumber, success: function(result) { if (result.hasMoreData) { // There is more data; show "read more" $('#refreshFeed').show(); } else { // No more data; hide "read more" $('#refreshFeed').hide(); } requestNumber++; } }); }); }); 

I have not tested this code, but I hope you understand my idea.