Search system with on-demand loading

0

I have a search system with load on demand with php and jquery, I can search for letters correctly, and do the load on demand correctly, the problem is that when changing the letter to fetch, it loads the data of the new letter together with the previous letter clicked, does not clear the old search to load the new one.

Follow my php code:

if (isset($_GET['action_search']) && $_GET['action_search'] == 'action_search'):
header('Cache-Control: no-cache, must-revalidate');
header('Content-Type: application/json; charset=utf-8');
$type = 'exame';
$_SESSION['letras'] = $_GET['letra'];

$inicio = $_POST['inicio'];
$max = $_POST['max'];

if (!empty($_GET['letra']) && $_GET['letra'] != 'all'):

    $read->ExeRead("ws_posts", 
            "where post_type = :type and post_status = 1 and post_letra = :letra order by post_letra asc", 
            "type={$type}&letra={$_GET['letra']}");

    $resultado['resultaQuantidade'] = $read->getRowCount();

    $read->ExeRead("ws_posts", 
            "where post_type = :type and post_status = 1 and post_letra = :letra limit $inicio, $max",
            "type={$type}&letra={$_GET['letra']}");

    if ($resultado['resultaQuantidade'] > 0):

        foreach ($read->getResult() as $resultados):
            $resultado_dados[] = $resultados;
        endforeach;

        $resultado['dados'] = $resultado_dados;

    else:
        $resultado['dados'] = null;
        $resultado['resultaQuantidade'] = 0;
    endif;

    echo json_encode($resultado);

else:
    unset($_SESSION['letras']);

    $read->ExeRead("ws_posts", 
            "where post_type = :type and post_status = 1 order by post_letra asc", 
            "type={$type}");
    $resultado['resultaQuantidade'] = $read->getRowCount();

    $read->ExeRead("ws_posts", 
            "where post_type = :type and post_status = 1 order by post_letra asc limit $inicio, $max", 
            "type={$type}");

    if ($resultado['resultaQuantidade'] > 0):

        foreach ($read->getResult() as $resultados):
            $resultado_dados[] = $resultados;
        endforeach;

        $resultado['dados'] = $resultado_dados;

    else:
        $resultado['dados'] = null;
        $resultado['resultaQuantidade'] = 0;
    endif;

    echo json_encode($resultado);

endif;endif;

Now follow my jquery code:

$('tr#search-indexes').on('click', 'a.letra_click', function (e) {
        var res = $(this).attr('search-letra');
        $(this).siblings('a').removeClass('active');
        $(this).addClass('active');
        e.preventDefault();
        $('.load').show();

        carregar(0, 5, '<?= INCLUDE_PATH; ?>/modulos/responds.php?letra=' + res + '&action_search=action_search');

        $("a.carregar-mais").click(function (e) {
            e.preventDefault();
            $('.load').show();

            var inicio = $('ul#alfabeto-itens li').length;
            carregar(inicio, 5, '<?= INCLUDE_PATH; ?>/modulos/responds.php?letra=' + res + '&action_search=action_search');
        });

    });

function carregar(inicio, max, url) {

    var dado = {inicio: inicio, max: max};

    $.ajax({
        type: 'post',
        dataType: 'json',
        url: url,
        data:dado,
        beforeSend: function () {
            $('.load').show();
        },
        success: function (data) {
            $('.load').hide();
            $('a.carregar-mais').show();
            for (var j = 0; j < data.dados.length; j++) {
                $('.load').hide();
                $('ul#alfabeto-itens').append('<li class="hg-services__item"><a href="<?= BASE; ?>/exames/' + data.dados[j].post_name + '"><span>' + data.dados[j].post_title + '</span></a></li>');
            }

            var conta = $('ul#alfabeto-itens li').length;
            if (conta == data.resultaQuantidade) {
                $('.load').hide();
                $('a.carregar-mais').hide();
            }
        }
    });
}
    
asked by anonymous 29.03.2018 / 23:28

1 answer

1

Create a global variable to store the letter you searched for at any given time, then simply compare the letter that was saved with the letter you clicked, and if it was different, clean the div using jQuery.empty()

Commented example:

/* Variável global para salvar a última letra pesquisada */
let ultimaLetraPesquisada;

$('tr#search-indexes').on('click', 'a.letra_click', function (e) {
        var res = $(this).attr('search-letra');
        $(this).siblings('a').removeClass('active');
        $(this).addClass('active');
        e.preventDefault();
        $('.load').show();

        carregar(0, 5, '<?= INCLUDE_PATH; ?>/modulos/responds.php?letra=' + res + '&action_search=action_search', ultimaLetraPesquisada != res);

        $("a.carregar-mais").click(function (e) {
            e.preventDefault();
            $('.load').show();

            var inicio = $('ul#alfabeto-itens li').length;
            carregar(inicio, 5, '<?= INCLUDE_PATH; ?>/modulos/responds.php?letra=' + res + '&action_search=action_search', ultimaLetraPesquisada != res);

            /* O 'ultimaLetraPesquisada != res' irá comparar se a letra pesquisada é igual a pesquisa anterior */

            /* Salva a última letra pesquisada */
            ultimaLetraPesquisada = res
        });

        /* Salva a última letra pesquisada */    
        ultimaLetraPesquisada = res

});

function carregar(inicio, max, url, resetaDiv = false) {

    var dado = {inicio: inicio, max: max};

    $.ajax({
        type: 'post',
        dataType: 'json',
        url: url,
        data:dado,
        beforeSend: function () {
            $('.load').show();
        },
        success: function (data) {
            $('.load').hide();
            $('a.carregar-mais').show();

            if (resetaDiv) {
              /* Limpa a div */
              $('ul#alfabeto-itens').empty();
            }

            for (var j = 0; j < data.dados.length; j++) {
                $('.load').hide();

                $('ul#alfabeto-itens').append('<li class="hg-services__item"><a href="<?= BASE; ?>/exames/' + data.dados[j].post_name + '"><span>' + data.dados[j].post_title + '</span></a></li>');
            }

            var conta = $('ul#alfabeto-itens li').length;
            if (conta == data.resultaQuantidade) {
                $('.load').hide();
                $('a.carregar-mais').hide();
            }
        }
    });
}

Source: link     

30.03.2018 / 00:46