4

Estou no seguinte dilema, que pode ser simples para muitos aqui, porém, como sou iniciante, estou passando por uma grande dificuldade em um sistema que estou dando suporte...

Ao clicar em um botão, é executado um script que retorna dados em JSON. Porém, a cada clique, é como se ele dobrasse a execução deste script (Executa 2x, depois executa 4, 8, 16, etc).

Vocês que possuem mais experiência na área, podem me dar uma luz, por favor?

Estou enviando as 2 funções do script, para caso as 2 estejam em algum conflito, e o arquivo PHP requisitado.

Várias Requisições

selectDB

    function selectDB(){
    $(document).ready(function(){
        var pos = document.getElementById('dgn_id').value;
    var postURL= "busca_dgn_pri.php";
    $.ajax({
            async: false,
            type: "POST",
            cache: 'false',
            url: postURL,
            data: {dgn_id: pos},
            success: function(html){
                var dgnData = $.parseJSON(html);

                $('#dgn_pri')
                .append($("<option></option>")
                .attr("value",dgnData.dgn[0].dgn_pri)
                .attr("selected","selected")
                .attr("disabled","disabled")
                .text(dgnData.dgn[0].dgn_pri));
            }
    });
    });
}

addOptionSelect

 function addOptionSelect(){
    $(document).ready(function () {
        $("option").remove();

        $('#btnprox').click(function(){
            $("option").remove();
            addOptionSelect();
            selectDB();
        });
        $('#btnante').click(function(){
            $("option").remove();
            addOptionSelect();
            selectDB();
        });
        $('#btnprim').click(function(){
            $("option").remove();
            addOptionSelect();
            selectDB();
        });
        $('#btnulti').click(function(){
            $("option").remove();
            addOptionSelect();
            selectDB();
        });
        $('#btnnovo').click(function(){
            $("option").remove();
            addOptionSelect();
        });
        $('#btnexcl').click(function(){
            $("option").remove();
            addOptionSelect();
            selectDB();
        });
        $('#btncanc').click(function(){
            $("option").remove();
            addOptionSelect();
            selectDB();
        });
        $('#btnsalv').click(function(){
            $("option").remove();
            addOptionSelect();
            selectDB();
        });

        var sel = $('input[type=checkbox]:checked').map(function(_, campo) {
            var nomeCampo = $(campo).attr('name');
            return nomeCampo;
        }).get();

        $.each(sel, function(key, value){
            if (($('option[value='+key+']').length == 0) && (value != "sem_diag")) {
                var campoTxt = $('label[for='+value+']').html();
                $('#dgn_pri')
                    .append($("<option></option>")
                    .attr("value",campoTxt)
                    .text(campoTxt));                
            } else {
                $("option").remove();
            }
        });

    });
}

Arquivo PHP

    $pos = $_REQUEST['dgn_id'];

$sql = "SELECT dgn_id, dgn_pri FROM nut_diagnutric WHERE dgn_id = $pos";

$result = $DB->query($sql);

$rows = array();
while($row = $DB->fetchArray($result)){
        $rows[] = $row;
}

$qryResult = array();
$qryResult['dgn'] = array_unique($rows);
echo json_encode($qryResult);
3
  • Coloque o parâmetro event (a função deve ficar function(event)) em cada função dos eventos coloque também o seguinte código event.preventDefault(); e event.stopPropagation(); no início de cada evento de click que é chamada a função selectDB(). Veja se resolve.
    – KaduAmaral
    Commented 4/08/2015 às 19:57
  • Coloca pf mais informação do que tem o JSON e o que queres fazer com os dados que vêm do PHP para podermos ajudar mais.
    – Sergio
    Commented 4/08/2015 às 20:03
  • Essa função function selectDB(){ ..} não precisa de uma subfunção : $(document).ready(function(){}); pois isso só é usado para carregar quando ler o documento, vc pode passar todo o conteúdo desse document ready dentro do seu método direto... senão ele vai ficar lendo várias vezes esse post. Commented 4/08/2015 às 20:17

4 Respostas 4

5

Se entendi bem seu código pode ser resumido a isso:

$(document).ready(function () {
    $('#btnprox,#btnante,#btnprim,#btnulti,#btnnovo,#btnexcl,#btncanc,#btnsalv').click(function(){
        $("option").remove();
        addOptionSelect();
        selectDB();
    });

    function addOptionSelect(){   
        var sel = $('input[type=checkbox]:checked').map(function(_, campo) {
            var nomeCampo = $(campo).attr('name');
            return nomeCampo;
        }).get();

        $.each(sel, function(key, value){
            if (($('option[value='+key+']').length == 0) && (value != "sem_diag")) {
                var campoTxt = $('label[for='+value+']').html();
                $('#dgn_pri')
                    .append($("<option></option>")
                    .attr("value",campoTxt)
                    .text(campoTxt));                
            } else {
                $("option").remove();
            }
        });
    }

    function selectDB(){
        var pos = document.getElementById('dgn_id').value;
        var postURL= "busca_dgn_pri.php";
        $.ajax({
                async: false,
                type: "POST",
                cache: 'false',
                url: postURL,
                data: {dgn_id: pos},
                success: function(html){
                    var dgnData = $.parseJSON(html);

                    $('#dgn_pri')
                    .append($("<option></option>")
                    .attr("value",dgnData.dgn[0].dgn_pri)
                    .attr("selected","selected")
                    .attr("disabled","disabled")
                    .text(dgnData.dgn[0].dgn_pri));
                }
        });
    }
});
4

Dentro da função tem chamada para ela mesma creio que isso é a raiz do problema, porque toda vez que você faz um click, é feito outro evento, e na proxima vez que o mouse for pressionado dispara 2 eventos( ou mais conforme for incrementando) em paralelo:

function addOptionSelect(){
.
.
.
    addOptionSelect();
}

Então toda vez que ela chama ela mesma ela "prepara" mais um evento click() ou seja o evento click se propaga gerando esses eventos todos.

Para corrigir de maneira rápida pode mandar um stopimmediatepropagation() dentro do evento click() assim:

$('#btnnovo').click(function(e){
...
e.stopimmediatepropagation();
....
});

http://api.jquery.com/event.stopimmediatepropagation/

Outra coisa que eu iria comentar é sobre o $(document).ready(function () { mas já foi comentado, então é só se atentar para esse detalhe também, mas no caso em questão não irá surgir efeitos. (apesar de estar errado usa-lo da forma em que esta)

4

Tens algumas ideias no código que são erradas e/ou podem ser a fonte do problema.

De maneira geral quando adicionas elementos novos ao DOM deves adicionar event handlers ao(s) próprio(s) elemento(s). Se vais usar um seletor genérico tipo $('.minhaClasse') e já há na página elementos com essa classe e que já têm um event handler, então vais ter código a correr duas vezes.

Outra coisa que não faz muito sentido no teu código é teres a função addOptionSelect a chamar-se a sí própria quando o que ela faz é adicionar event handlers. Isso é garantido de adicionar event handlers duplicados, e ter código a correr duas vezes.

Outra coisa que não faz muito sentido é teres $(document).ready(function () { dentro dessa função. Tens um problema de lógica. Esse $(document).ready(function () { deve ser corrido uma vez no inicio da página carregar, se fôr necessário, e não mais.

4

O seu problema está no como você criou a função addOptionSelect

Para entender de forma mais simples eu simplifiquei a sua função para o mínimo necessário para o problema ocorrer, excluindo apenas o código que chama o addOptionSelect pela primeira vez

function addOptionSelect() {
    $(document).ready(function () {

        //$("option").remove();

        $("#btnprox").click(function () {
            addOptionSelect();
            console.log("click do btnprox");
        });

        console.log("resto do código");
    });
}

Com apenas isso, a primeira vez que clico no botão btnprox ele executa como esperado e aparece uma vez a mensagem, porém no cliques seguintes vai dobrando a quantidade de mensagens.

Isso ocorre porque no clique do botão você chama de novo a função addOptionSelect, e esta função adiciona um handler novo para o clique do botão, então na próxima vez que você clica no botão este código é executado 2 vezes, adicionando mais 2 handler para o clique, que na próxima vez executa 4 vezes, adicionado mais 4 handlers para o clique e assim por diante.

O que você precisa fazer é remover o código que adiciona os handlers de dentro desta função e executar ele apenas uma vez quando a página for carregada, como por exemplo

function addOptionSelect() {
    $(document).ready(function () {

        //$("option").remove();

        console.log("resto do código");
    });
}

$(document).ready(function() {
    $("#btnprox").click(function () {
        addOptionSelect();
        console.log("click do btnprox");
    }); 
});

Obs, o $(document).ready não é realmente necessário dentro do addOptionSelect, eu apenas incluí ele no exemplo para tornar o código mais similar ao original e facilitar o entendimento da diferença

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 .