'Load more' button duplicates or does not work AJAX / JSON

Question

'Load more' button duplicates or does not work AJAX / JSON

Navigation

#1 by (1 votes)

3

Personal oops, all right?

Next, I have a table that is fed with content from an external file in JSON (created from PHP with data coming from the DB). When you open the site, the table comes with only 2 records and clicking 'Load more' plus 2 records are added to the table.

The way I sort the array is through the unique ID of the DB, so if there is a deletion of the record it is leaked (ie: 0 | 1 | 3 | 6 | 7 | 8) which causes' more 'does not work or duplicate the data.

I made a fix, however I need to create a new ID in JSON to sort everything out again, keeping the count constant. So I would like to know how to optimize or fix my code to work WITHOUT the fix, ie using the ID, in ascending order, even if it is not sequential, as in the example quoted above.

This is my jQuery code:

$(document).ready(function() {
    var url = "data/results.json";

    $.getJSON(url, function (response){
        $.each (response, function (index, table) {
            loopTable(index <= 1, index, table);
        }); //end each
    }); //end getJSON

    function loopTable(test, index, table){
        var write;
        if(test){

            write += '<tr class="count">';
            write += '<td>' + table.name + '</td>';
            write += '<td>' + table.data + '</td>';
            if (table.status === true) {
                write += '<td class="ap">Aprovado</td>'; 
            } else {
                write += '<td class="ng">Negado</td>';
            }
            write += '<td>' + table.id + '</td>';
            write += '<td><button class="bt_delete">Deletar</button></td>';
            write += '</tr>';

            $('#mytable').append(write);
        }
    }; //end function       

    $('.more').on('click', function(event){
        event.preventDefault();
        var galleryLength = $('.count').length;
        $.ajax(url, {
            cache: false,
            success: function(data){
                if(data){
                    var jsonLength = data.length; 
                }
                $.each(data, function(index, table){
                    loopTable(table.id >= galleryLength && table.id < galleryLength + 2, index, table);
                    if ( table.id.length == galleryLength ) {
                        $('.more').hide();
                    };
                });
            },
            error:  function(){
                $('#myerro').append('<h3>Desculpe, houve um problema.</h3>');
            },
            beforeSend: function(){
                $('.more').hide();
                $('.spinner').fadeIn();
            },
            complete: function(){
                $('.spinner').hide();
                $('.more').fadeIn();
            }
        }); //end ajax
    }); //end click
}); //end ready

javascript jquery ajax json

asked by anonymous 14.03.2015 / 16:26

1 answer

I can not install tomcat and I do not get message when accessing localhost: 8080 Share and tanned facebook count in the wordpress loop

score 1 · Accepted Answer

Assuming the% s of% s that are in the JSON that comes from PHP are in ascending order (which makes more sense), I think you need to track which was the last id loaded. It's also a good idea to make sure that id reads only two records. To do this:

Add a variable, loopTable :

$(document).ready(function() {
    var url = "data/results.json";
    var lastId = -1;

Uncheck lastId and crawl loopTable there. It is also important to initialize the variable lastId properly:

    function loopTable(index, table){
        var write = '';
        write += '<tr class="count">';
        write += '<td>' + table.name + '</td>';
        write += '<td>' + table.data + '</td>';
        if (table.status === true) {
            write += '<td class="ap">Aprovado</td>'; 
        } else {
            write += '<td class="ng">Negado</td>';
        }
        write += '<td>' + table.id + '</td>';
        write += '<td><button class="bt_delete">Deletar</button></td>';
        write += '</tr>';

        $('#mytable').append(write);
        lastId = table.id;
    }; //end function

We have to ensure that when write is called for the first time, it will read the first two records, no matter what the% s of% s, after all it has to work even if elements with loopTable s 0 and 1 have been removed:

    $.getJSON(url, function (response) {
        var carregados = 0;
        $.each (response, function (index, table) {
            loopTable(index, table);
            carregados++;
            if (carregados == 2) return false;
        }); //end each
    }); //end getJSON

Do not use id . Instead, use id :

    $('.more').on('click', function(event){
        event.preventDefault();
        $.ajax(url, {

                var lastLoaded = lastId;
                var carregados = 0;
                $.each(data, function(index, table) {
                    if (table.id <= lastLoaded) return true;
                    loopTable(index, table);
                    carregados++;
                    if (carregados == 2) return false;
                });

I think this section is wrong, and should not even be there, at least I do not see the sense of it being inside galleryLength :

                    if ( table.id.length == galleryLength ) {
                        $('.more').hide();
                    };

In addition, there is an important note to make. PHP is bringing all the records, converting them all to JSON, everything is being streamed over the network / internet, and javascript is getting all of that and then filtering. It would be much better for you to do the filtering on the PHP side, where AJAX would send the id of the last record loaded and the number of records to load, and then PHP would send only the requested records.