I need to create a script in jQuery and PHP that will show a load more news button only when there is more data to load that’s not already on the page. The easiest solution would be to test if a table has been updated but i’m not sure that can be done. Another way would be to test if there is content in the table that is not currently on the page, again not sure how to do this.
This is what I have so far;
//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);
});
});
This just makes the button show up after 5 seconds and does not test if there is more data to load. The php script in the second function just loads data from a table.
I would hope there is a way to use the same script in the function at the moment and do it all in jQuery.
Just as an example, if anyone has ever been on twitter or the new facebook app for iphone the concept is exactly the same. When there is new information in the database a button is shown that will load that data to the top of the feed when clicked. I am sure facebook and twitter will use SSE though but I don’t need to do that. All i need to do is check for new data every 5 seconds.
I just finished two view more link features on a site and I can tell you from the performance testing that we did that your best bet is to load all of the data and add it to the DOM on page load into elements with
display: none. Use a jQuery selector to get all those elements and store the collection in a variable. You can then write your view more/less scripts for those elements.If you need any help with the scripts let me know and I’m happy to help. Good luck! 🙂
Edit:
I think I may have missed part of your question (how to know when to hide or show the buttons). You will want to keep a variable that you use to store how many items you ate showing and slice to show more/less. Alternatively (but with more overhead) you can use classes as flags to determine what elements are and are not shown.