1

fiz um código em javaScript no qual faço requisições no php e com o retorno de um json eu populo meu html, o problema é que em um determinado momento eu preciso para a execução do código javaScript porém não estou conseguindo faze ele parar, o $.post é disparado no click de um botão, mas verifiquei que o $.post é chamado 2 vezes em 1 click. Obs: tentei para o javaScript com o return; porém o $.post é chamado novamente

 $(document).on('click', '#btn_filtrarAnuncio',function(evento){ 
    var combo = document.getElementById("busca_anuncio_categoria");
    var categoria = combo.options[combo.selectedIndex].value; 
    var comboEstado = document.getElementById("busca_anuncio_estado");
    var estado = comboEstado.options[comboEstado.selectedIndex].value; 
    evento.preventDefault();
    carregar(0, 3, categoria, 'Chamadas/listarAnuncios.php');
    document.getElementById('cardAnuncios').innerHTML = "";


    $(document).on('click', '#carregarMaisFiltro',function(){ 

        var init = (jQuery('.anunciosJsonFiltro').length);
        carregar(init, 3, categoria,'Chamadas/listarAnuncios.php')
    });
    function carregar(init, max, categoria, url){
        var dados = { init : init, max : max, categoria : categoria, estado : estado };
        if(init >= 3)
        {
            $('#img_loadBuscarAnuncio').fadeIn('slow');
            $('#cardContainer').css("opacity", 0.4);
        }
        $.post(url, dados, function (data) {
            $("#carregarMaisFiltro").last().remove();

            for(i = 0; i < data.dados.length; i++){
                var img = data.dados[i].img ? data.dados[i].img : "../anuncio-padrao.png";

            $("#cardAnuncios").append('<div class="anunciosJsonFiltro">'
                +'<a style="display: block; color: rgba(0,0,0,0.87);" href="#">'
                     +'<div style="box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); overflow: hidden; margin-bottom: 6px;">'  
                         +'<div class="col s4 m4" style="padding: 0px; margin: 0px;">'
                            +'<div style="width: 100%; overflow: hidden;">'
                                +'<div style="display: inline-block; position: relative; right: -50%;">'
                                     +'<img src="img/anuncios/'+img+'" alt="user background" style="height: 150px; width: auto; position: relative; left: -50%; vertical-align: bottom;">'
                                 +'</div>'
                             +'</div>'
                         +'</div>'
                         +'<div class="col s8 m8 truncate-text" style="padding-left: 14px; padding-top: 8px; height: 150px;">'
                                 +'<span class="grey-text text-darken-4" style="font-size: 20px;">'+data.dados[i].nm_titulo+'</span>'
                                +'<br>'
                                +'<span class="grey-text">Anúncio criado por: '+data.dadosComplementares[i].nm_usuario+' em '+moment(data.dados[i].dt_criacao).format("DD/MM/YYYY")+'</span>'
                                +'<div class="star-result" style="margin-bottom: -10px;">'
                                     +'<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">'
                                     +'<style>'
                                         +'.checked {'
                                             +'color: orange;'
                                        +'}'
                                   +'</style>'
                                    +'<span class="fa fa-star checked"></span>'
                                     +'<span class="fa fa-star checked"></span>'
                                     +'<span class="fa fa-star checked"></span>'
                                     +'<span class="fa fa-star"></span>'
                                     +'<span class="fa fa-star"></span>'
                                 +'</div>'
                                 +'<br>'
                                 +'<i class="mdi-image-navigate-next cyan-text text-darken-2"></i>'
                                 +'<span class="cyan-text text-darken-2">'+data.dadosComplementares[i].categoria+'</span>'
                                 +'<br>'
                                 +'<i class="mdi-communication-location-on cyan-text text-darken-2"></i>'
                                +'<span class="cyan-text text-darken-2">'+data.dadosComplementares[i].bairro+', '+data.dadosComplementares[i].municipio+' - '+data.dadosComplementares[i].estado+'</span>'
                         +'</div>'
                     +'</div>'
                 +'</a>'
                 +'</div>');
            }

            if(data.dados.length > 0)
            {
                $("#cardAnuncios").append('<button id="carregarMaisFiltro" class="btn right" style="background-color: #0097a7;" type="submit" name="action"><center>Carregar mais</center></button>');
            }; 
            var conta = $(".anunciosJsonFiltro").length;

            if(conta == data.totalAnuncios+init) {
                // deveria parar aqui  < ------
                $("#carregarMaisFiltro").last().remove();
                $('#img_loadBuscarAnuncio').fadeOut('slow');
                $('#cardContainer').css("opacity", 1.0);
                $("#carregarMaisFiltro").hide();
            }
        }, "json");
    }

});
0

1 Resposta 1

2

Você colocou este evento dentro de outro:

$(document).on('click', '#carregarMaisFiltro',function(){ 

    var init = (jQuery('.anunciosJsonFiltro').length);
    carregar(init, 3, categoria,'Chamadas/listarAnuncios.php')
});

Ambos os eventos estão chamando a função que contém o $.post, logo a função será executada 2 vezes.

Para corrigir isso, basta colocar esse evento fora do outro e a função carregar() também para que fique acessível para ambos os eventos:

$(document).on('click', '#carregarMaisFiltro',function(){ 
  var init = (jQuery('.anunciosJsonFiltro').length);
  carregar(init, 3, categoria,'Chamadas/listarAnuncios.php')
});

$(document).on('click', '#btn_filtrarAnuncio',function(evento){ 
  var combo = document.getElementById("busca_anuncio_categoria");
  var categoria = combo.options[combo.selectedIndex].value; 
  var comboEstado = document.getElementById("busca_anuncio_estado");
  var estado = comboEstado.options[comboEstado.selectedIndex].value; 
  evento.preventDefault();
  carregar(0, 3, categoria, 'Chamadas/listarAnuncios.php');
  document.getElementById('cardAnuncios').innerHTML = "";
});

function carregar(init, max, categoria, url){
var dados = { init : init, max : max, categoria : categoria, estado : estado };
if(init >= 3)
{
    $('#img_loadBuscarAnuncio').fadeIn('slow');
    $('#cardContainer').css("opacity", 0.4);
}
$.post(url, dados, function (data) {
    $("#carregarMaisFiltro").last().remove();

    for(i = 0; i < data.dados.length; i++){
        var img = data.dados[i].img ? data.dados[i].img : "../anuncio-padrao.png";

    $("#cardAnuncios").append('<div class="anunciosJsonFiltro">'
        +'<a style="display: block; color: rgba(0,0,0,0.87);" href="#">'
             +'<div style="box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); overflow: hidden; margin-bottom: 6px;">'  
                 +'<div class="col s4 m4" style="padding: 0px; margin: 0px;">'
                    +'<div style="width: 100%; overflow: hidden;">'
                        +'<div style="display: inline-block; position: relative; right: -50%;">'
                             +'<img src="img/anuncios/'+img+'" alt="user background" style="height: 150px; width: auto; position: relative; left: -50%; vertical-align: bottom;">'
                         +'</div>'
                     +'</div>'
                 +'</div>'
                 +'<div class="col s8 m8 truncate-text" style="padding-left: 14px; padding-top: 8px; height: 150px;">'
                         +'<span class="grey-text text-darken-4" style="font-size: 20px;">'+data.dados[i].nm_titulo+'</span>'
                        +'<br>'
                        +'<span class="grey-text">Anúncio criado por: '+data.dadosComplementares[i].nm_usuario+' em '+moment(data.dados[i].dt_criacao).format("DD/MM/YYYY")+'</span>'
                        +'<div class="star-result" style="margin-bottom: -10px;">'
                             +'<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">'
                             +'<style>'
                                 +'.checked {'
                                     +'color: orange;'
                                +'}'
                           +'</style>'
                            +'<span class="fa fa-star checked"></span>'
                             +'<span class="fa fa-star checked"></span>'
                             +'<span class="fa fa-star checked"></span>'
                             +'<span class="fa fa-star"></span>'
                             +'<span class="fa fa-star"></span>'
                         +'</div>'
                         +'<br>'
                         +'<i class="mdi-image-navigate-next cyan-text text-darken-2"></i>'
                         +'<span class="cyan-text text-darken-2">'+data.dadosComplementares[i].categoria+'</span>'
                         +'<br>'
                         +'<i class="mdi-communication-location-on cyan-text text-darken-2"></i>'
                        +'<span class="cyan-text text-darken-2">'+data.dadosComplementares[i].bairro+', '+data.dadosComplementares[i].municipio+' - '+data.dadosComplementares[i].estado+'</span>'
                 +'</div>'
             +'</div>'
         +'</a>'
         +'</div>');
    }

    if(data.dados.length > 0)
    {
        $("#cardAnuncios").append('<button id="carregarMaisFiltro" class="btn right" style="background-color: #0097a7;" type="submit" name="action"><center>Carregar mais</center></button>');
    }; 
    var conta = $(".anunciosJsonFiltro").length;

    if(conta == data.totalAnuncios+init) {
        // deveria parar aqui  < ------
        $("#carregarMaisFiltro").last().remove();
        $('#img_loadBuscarAnuncio').fadeOut('slow');
        $('#cardContainer').css("opacity", 1.0);
        $("#carregarMaisFiltro").hide();
    }
}, "json");
}
3
  • Blz amigo vou testar dessa forma é já te dou um retorno, o estranho é que a primeira vez que uso a função do click do botão busca funciona normal, só que se eu aperto nesse botão novamente ele passa a usar o $.post 2 vezes
    – Reignomo
    Commented 26/10/2018 às 3:06
  • É porque ao clicar a primeira vez o segundo evento não existe, já no segundo click ele já foi criado e vai disparar 2 vezes.
    – Sam
    Commented 26/10/2018 às 3:25
  • Bom dia, fiz dessa forma que você sugeriu e funcionou perfeitamente, muito obrigado, estou há 3 dias parado nesse ponto você me salvou
    – Reignomo
    Commented 26/10/2018 às 12:41

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 .