0

Tenho um Jquery responsável por popular um select baseado no valor de outro select, resolvi a questão com sucesso utilizando o seguinte código:

    $("#tipoProcedimento").change(function(){

    $("#procedimento").empty();
    $("#procedimento").attr("disabled", true);


    $.ajax('http://localhost:8000/backoffice/agendamentos/procedimentos-grupos/'+$(this).val()+'/procedimentos',  
    {
        success: function (data) 
        {
            console.log(data);
            $("#procedimento").empty();

            $("#procedimento").append($("<option />").val('').text('SEM PROCEDIMENTO ESPECIFICO...'));

            $.each(data.procedimentos, function() {
                $("#procedimento").append($("<option />").val(this.nr_seq_proc_interno).text(this.desc_procedimento_busca1));
            });

            $("#procedimento").attr("disabled", false);
        },
        error: function (data)
        {
            console.log('err -> '.data)
            $("#procedimento").attr("disabled", true);
        }
    });
})

Porém, hoje tenho a necessidade de utilizar o mesmo código em outra página pra 4 selects diferentes, o que me levou a conclusão de que a melhor forma de fazer isso, seria transformando os nomes dos respectivos selects em variáveis, a fim de NÃO REPETIR CÓDIGO xD... Assim eu seria capaz de chamar a função pra cada select da seguinte forma:

    $("#tipoProcedimento").change(carregarProcedimentos('#procedimento','#tipoProcedimento'))
    $("#select2").change(carregarProcedimentos('#selectSecundario2','#select2'))
    $("#select3").change(carregarProcedimentos('#selectSecundario3','#select3'))
    ...

Porém ao chamar a função desta segunda forma, por algum motivo ela é acionada assim que a página carrega, comportamento do qual não acontecia da forma anterior !!! E sinceramente, estou confuso ao compreender o porque disso... Achei que teria algo a ver com chamar a função de maneira assincrona, não consegui resolver desta forma também... Então aqui estou (:

1 Resposta 1

1

Ao fazer assim, como informou na pergunta:

$("#tipoProcedimento").change(carregarProcedimentos('#procedimento','#tipoProcedimento'));

Você está executando a função carregarProcedimentos assim que a página é carregada.

Mas desta forma:

$("#tipoProcedimento").change(carregarProcedimentos);

Você está referenciando o callback do evento à função carregarProcedimentos, e não executando ela. No entanto você precisa passar parâmetros ('#procedimento','#tipoProcedimento') à função. Pode fazer de duas formas:

$("#tipoProcedimento").change(function(){
   carregarProcedimentos('#procedimento','#tipoProcedimento');
});

Na função recebe assim:

function carregarProcedimentos(param1, param2){
   console.log(param1); // #procedimento
   console.log(param2); // #tipoProcedimento
}

Ou:

$("#tipoProcedimento").change(['#procedimento','#tipoProcedimento'], carregarProcedimentos);

Neste último caso, você estará enviando uma array para a função, e deverá pegar os valores desta forma:

function carregarProcedimentos(params){
   console.log(params.data[0]); // #procedimento
   console.log(params.data[1]); // #tipoProcedimento
}

A propriedade data retorna o que foi enviado como dados pelo evento.

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 .