Mostrar botón solo si hay más datos para cargar

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.

Esto es lo que tengo hasta ahora;

//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.

preguntado el 01 de septiembre de 12 a las 16:09

Seems unecessary to get the same data twice, and can't you just check if the returned result has content? And you should probably be using on() no live() ! -

I don't want to get the same data. I want to get new data. I will use on now thanks. How can I check if the result has returned content? How can I load in new content that is not on the page at them moment? -

Well, search for long polling! The best way would be to return something from the server that tells the client there is new data etc. Another option would be to just use websockets, comet etc. -

Perhaps you could return the data as JSON and then include a boolean hasMoreData which is sent from PHP. If it is true, then show the "read more" link. But then you still have to solve the problem of knowing which data to load next. I can, however, think of a few ways to go about this (e.g. a simple counter in JavaScript to send with the request for more data). I can put together an answer with code a bit later. -

@adeneo I did think about those options, particularly SSE but came to the conclusion that it's not necessary and would be time wasting. Trying the request every 5 seconds is a much simpler task. -

2 Respuestas

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.

Respondido el 01 de Septiembre de 12 a las 16:09

Hi, thanks for the answer. I am actually pretty new to all this jQuery/DOM stuff and don't fully understand what you mean. Is there a more laments way of putting it? - jacob windsor

Sure - start with php. Once you get you're data from the database add it to the document wherever you want using php (or jQuery, but it's more overhead). when you add the elements make sure you give them a distinct class. Use a jquery selector to get the elements into a variable (collection). then write your scripts for showing and hiding more or less elements. Then write your script to determine if you are showing all the data - Zachary Kniebel

Follow this link to my dev site and check out the teo incremental accordion files. They're a bit more advanced versions and theyre a bit tailored, but theyre what youre looking for. I'm happy to explain anything you need clarification for. - Zachary Kniebel

If you think this solution will help others please upgrade it or accept it if it solved your problem - Zachary Kniebel

First of all, there are several ways in which you can accomplish this. You can load all of the data at once and manipulate what to show with jQuery. Alternatively, you can gradually fetch more data from the server, which I will give a suggestion on how to do below (the former may have performance improvements). Also, loading data gradually with jQuery will have an effect on SEO.

As I wrote in my comment to your question, you could use JSON to return data from PHP to jQuery and include a variable indicating whether or not there is more data to fetch. This variable can then be checked to see if you should show the "read more" link or not. Let us first take a look at the server side of things.

I don't know how you want to "split" your data, but for the sake of simplicity, I'm just going to assume that the text gets cut off after 500 characters, after which another 500 will be loaded and so forth.

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 fetch 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 didn't test this code, but I hope you get my idea.

Respondido el 01 de Septiembre de 12 a las 18:09

I think you've got the wrong end of the stick, although some of what you've said can be applied to what i'm trying to do. It's not that I only want part of some text to be loaded, I am making a news feed. I want the #refreshFeed button to show when more data has been added to the table and then it can be clicked to load it. It will appear as if the data is being pushed but really jQuery is checking for new data every 5 seconds. I don't have enough time to use SSE. - jacob windsor

@nbs189 I understand what you mean now. However, I don't think this is very clear in the question, so you might consider updating it. Writing "new data" rather than "more data", for instance, makes it easier to understand what you wanted to do. Also, "load more" may be slightly misleading. - ba0708

I will update the question, sorry for the inconvenience. To the user 'Load More' is pretty obvious. You would think so too if you saw the way it was laid out. If you have any ideas on what I could do that would be great! Don't worry about it too much though, since you had answered before and it's my fault you misunderstood. - jacob windsor

@nbs189 Don't worry about it - maybe it was just me. :-) Since you don't have the time for implementing a persistent connection (long polling, bosch, web sockets, etc.), then I'm afraid you are stuck with sending requests to the server in intervals. You could store the currently displayed news IDs in an array and then periodically ask the server for an array of IDs, which you can compare to the ones you have loaded already. This gives you the possibility to remove deleted entries and add newly added ones. The difference in the two arrays' item IDs are the ones you have to request from PHP. - ba0708

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.