0

boa tarde! Meu Jquery está adicionando os resultados obtidos via ajax e eles estão sumindo. O que pode estar acontencendo? E como resolver? Obrigado

var _urlSearchInput;
var _urlSearch; 

$('#vai').click(function(){

    _urlSearchInput = $('#campo-busca').val();
    _urlSearch = window.location.origin + "/search/" + _urlSearchInput + "/";
    //alert(_urlSearch);
    //alert(_urlSearchInput);

    $.ajax({
        url: _urlSearch,
        dataType: "json",
        type: "post",
        success: function(json) {
            var html; 
            var matias = json; 
            if(typeof json == 'string'){ 
                matias = JSON.parse(json); 
            } 
            for(item in matias){
                        html += '<div class="media wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">'; 
                        if (typeof matias[item].midias['102x112'] != 'undefined'){
                        html +=     '<a href="#" class="media-left">';
                        html +=         '<img alt="" src="' + matias[item].midias['102x112']  + '">';
                        html +=     '</a>';
                        }
                        html +=     '<div class="media-body">';
                        html +=         '<h4 class="media-heading">';
                        html +=             '<a href="'+ matias[item].url +'">' + matias[item].title + '</a>';
                        html +=         '</h4>';
                        html +=         '<p>' + ( !matias[item].description ? '' : matias[item].description) + '</p>';
                        html +=     '</div>';
                        html +='</div>';            
            }

                $('#resultados-busca').append(html.replace("undefined", ""));   
            }
        });
    });
6
  • tenta remover essa classe animated parece que é uma animação de CSS Commented 26/02/2018 às 18:07
  • Já tentei... tentei sem nenhuma classe de CSS e mesmo assim nada. Commented 26/02/2018 às 18:09
  • os elementos permanecem na DOM ou são removidos? adiciona um return false; antes de fechar a ultima chave do success; Commented 26/02/2018 às 18:13
  • Os elementos não permanecem na DOM. Eles são criados e depois somem. Adicionei o return false antes do fechamento da chave do sucess... nada mudou. =/ Commented 26/02/2018 às 18:17
  • consegue adicionar um retorno do seu json para eu fazer um teste aqui? Commented 26/02/2018 às 18:25

1 Resposta 1

0

Eu consegui "resolver" a questão do sumiço das DIVs adicionada pelo append adicionando o "event". Agora o resultado é adicionado, porém, quando eu procuro outra coisa ele adiciona embaixo do resultado anterior. Gostaria que ele apagasse os resultados da busca anterior. Como devo proceder?

Obrigado

Código atual:

$('#vai').click(function(event){
    event.preventDefault();     
    var _urlSearchInput = $('#campo-busca').val();
    var _urlSearch = window.location.origin + "/search/" + _urlSearchInput + "/";

    $.ajax({
        url: _urlSearch,
        dataType: "json",
        type: "POST",

        success: function(json) {
            var html; 
            var matias = json; 
            if(typeof json == 'string'){ 
                matias = JSON.parse(json); 
            } 

            for(item in matias){
                html += '<div class="item fadeInDown">'; 
                if (typeof matias[item].midias['102x112'] != 'undefined'){
                html +=     '<a href="#" class="media-left">';
                html +=         '<img alt="" src="' + matias[item].midias['102x112']  + '">';
                html +=     '</a>';
                }
                html +=     '<div class="media-body">';
                html +=         '<h4 class="media-heading">';
                html +=             '<a href="'+ matias[item].url +'">' + matias[item].title + '</a>';
                html +=         '</h4>';
                html +=         '<p>' + ( !matias[item].description ? '' : matias[item].description) + '</p>';
                html +=     '</div>';
                html +=  '</div>';
                html +=  '<hr>';            
            }
                if(html != "")
                    $("#resultados-busca").append(html.replace("undefined", ""));   
            }

        });
    });
3
  • Primareimente, aconselho que não uso o campo de resposta para fazer uma pergunta, sempre que precisar você pode editar sua pergunta inicial. Agora como sugestão de solução tente usar .html() ao invés de .append() e veja o que ocorre. Commented 27/02/2018 às 14:01
  • Funcionou alterando o .append() para o .html(). Commented 27/02/2018 às 14:21
  • Muito obrigado!! Commented 27/02/2018 às 14:21

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .