Jquery, append vanishing

Question

Jquery, append vanishing

Asked 6 years, 8 months ago

Viewed 88 times

0

good afternoon! My Jquery is adding the results obtained via ajax and they are disappearing. What might be happening? And how to solve? Thank you

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", ""));   
            }
        });
    });

tries to remove this class animated looks like it’s an animation of CSS

– Hebert Lima

2018/02/26 at 18:07
I’ve tried... tried without any CSS class and still nothing.

– Diego Albuquerque

2018/02/26 at 18:09
the elements remain in the DOM or are removed? adds a return false; before closing the last key of the success;

– Hebert Lima

2018/02/26 at 18:13
The elements do not remain in the DOM. They are created and then disappear. I added the Return false before closing the sucess key... nothing has changed. =/

– Diego Albuquerque

2018/02/26 at 18:17
can add a feedback from your json for me to do a test here?

– Hebert Lima

2018/02/26 at 18:25
How should I proceed to simulate this? The data is being passed through an internal server..

– Diego Albuquerque

2018/02/26 at 19:28

Show 1 more comment

1 answer

Browser other questions tagged jquery ajax append

You are not signed in. Login or sign up in order to post.

by Diego Albuquerque • 51 points · Answer 1 · 2018-02-27T13:54:49+00:00

I managed to "solve" the issue of the disappearance of the Divs added by append by adding "Event". Now the result is added, however, when I look for something else it adds under the previous result. I’d like him to erase the results of the previous search. How should I proceed?

Thank you

Current code:

$('#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", ""));   
            }

        });
    });