2

Tenho um form de Cadastro que possui, dentre outros, o seguinte campo:

<div id="Aditivo" class="col-xs-12 col-md-2">
            @Html.LabelFor(model => model.NumeroAditivo, new { @class = "control-label" })
            @Html.TextBoxFor(model => model.NumeroAditivo, new { @class = "form-control no-caps", @ng_readonly = "!m.Editavel" })
        </div>

Que só deve ser exibido quando o Modelo (outro campo do meu form de Contrato) começar com "Aditivo".

Para isso, criei a seguinte função javascript:

    function verificarAditivo() {
        if ($("#ModeloId_chosen").text().startsWith("Aditivo")) {
            $('#Aditivo').show();
            $('#Numero').attr('class', 'col-xs-12 col-md-2');           
        }
        else {
            $('#Aditivo').hide();
            $('#Numero').attr('class', 'col-xs-12 col-md-4');   
        }
}

A função verifica se o Modelo selecionado (ModeloId_chosen) começa com "Aditivo" para então exibir ou ocultar o campo criado.

Acontece que esta função também deve ser chamada assim que a página é carregada, para isso tentei usar: $(document).ready(verificarAditivo) e $(window).on("load", function () { verificarAditivo(); }

Mas ambos não me atenderam pois, quando chamam a função, a minha lista de Modelos...:

<div class="row">
        <div class="col-xs-12 col-md-12">
            @Html.LabelFor(model => model.ModeloId, new { @class = "control-label" })
            @Html.DropDownListFor(model => model.ModeloId, defaultSelect, new
       {
           @class = "form-control chosen-select",
           @data_url = @Url.Action("ListaModelo", "Modelo", new { modeloId = Model.ModeloId }),
           @chosen = true,
           @ng_options = "o.value as o.label group by o.group for o in options.ModeloId track by o.value",
           @onchange = "verificarAditivo(); carregaComplemento('" + @Url.Action("Listar", "Complemento", new { contratoId = Model.ContratoId }) + "?modeloId=' + this.value);",
           @ng_readonly = "!m.Editavel",
           @ng_model = "v.ModeloId",
           @chosen_scope = "m",
           @ng_change = "alterarModelo();"
       })
        </div>
    </div>

...ainda não foi preenchida. Ou seja, a função está sendo chamada cedo demais e ainda não há onde verificar se o Modelo começa com "Aditivo".

Só consegui "resolver" o problema usando um setTimeout, mas acredito que esta não seja a melhor solução.

Alguma ideia de como chamar a função que criei assim que a página estiver pronta mas com minha lista de Modelos já preenchida?

EDIT1: Também tentei com Angular:

$scope.alterarModelo = function () { verificarAditivo(); }

$scope.$on('$viewContentLoaded', function () { verificarAditivo(); });
2

2 Respostas 2

1

Acabei de perceber que você está usando Angular, e eu não manjo nada de Angular nem da expression language que você está usando para carregar os dados, mas vou tentar te ajudar dando um exemplo com JSVanilla e você tenta adaptar pra sua realidade, vamos lá. Primeiro você precisa saber porque esse erro acontece, diferente de outras linguagens de programação que são multi-thread() e tem por padrão processamento síncrono (como JAVA por exemplo), o JS é o contrário, ele é single-thread e o processamento acontece de forma assíncrona, por isso muitas vezes você acabará caindo em erros como esse pois ele não espera o processamento de um método acabar para executar outro, antigamente se usavam callbacks encadeados para resolver este problema, mas isso era visto como má pratica pela comunidade, então por isso surgiram as Promises, elas basicamente são um estrutura que permite que você execute um bloco de código somente quando outro determinado finalizar o processamento, só que de maneira mais concisa facilitando a manutenção. Vamos tomar como exemplo o seguinte código:

let teste = 0;

function exibirValorTeste () {
    console.log(teste);
}

setTimeout (() => {
        teste = 1;
    }, 3000);

exibirValorTeste();

nesse código o valor exibido no console seria 0 porque o valor da variável teste só muda para 1 depois de 3 segundos, só que o método exibirValorTeste() é chamado antes disso, agora vamos ver o mesmo método utilizando Promises

let teste = 0;

function exibirValorTeste () {
    console.log(teste);
}

new Promise(function(resolve, reject) {
    setTimeout (() => {
        teste = 1;
        resolve();
    }, 3000)
}).then (
    (value) => {
        exibirValorTeste();
    },
  (error) => {
    //pode exibir um alerta de erro por exemplo
  }
);

já neste exemplo ele exibiria 1 no console pois o método exibirValorTeste() só é chamado quando o bloco do setTimeout() é finalizado, e neste momento a variável teste já estaria com o valor 1, para entendermos o funcionamento da Promise vamos dividi-la em duas partes:

new Promise(function(resolve, reject) {
    setTimeout (() => {
        teste = 1;
        resolve();
    }, 3000)
})

Neste momento você está instanciando a Promisse, ela recebe como parâmetro uma função anonima em seu construtor, que por sua vez recebe 2 parâmetros, o resolve serve para sinalizar sucesso e o reject para sinalizar erro em sua Promise, dentro do bloco da Promise temos o setTimeout() que define que depois de 3 segundos a variável teste = 1, perceba que logo em seguida chamamos o resolve() isso sinaliza a Promise que tudo correu bem e que agora ela pode executar o bloco then().

.then (
    (value) => {
        exibirValorTeste();
    },
  (error) => {
    //pode exibir um alerta de erro por exemplo
  }
);

O bloco then() recebe duas funções anônimas como parâmetro a primeira é executada quando você chama o resolve() e deve conter as ações de sucesso, e a segunda é chamada quando você chama o reject() e deve conter as ações de erro, Obs: AS DUAS NUNCA SERÃO EXECUTADAS AO MESMO TEMPO, no nosso exemplo só existe sucesso então sempre cairemos na primeira função, e dentro do bloco de sucesso chamamos a função exibirValorTeste()

Algumas considerações finais:

1° - O segundo parâmetro do método then() é opcional, se quiséssemos poderíamos escrever o then() só com o parâmetro de sucesso.

2° - Você pode passar valores como parâmetro as funções de sucesso e erro, ao chamar o resolve ou o reject como por exemplo reject(algumValor) ou resolve(algumValor), e para usar esses valores é só usar os parâmetros recebido em cada respectiva função, como nossa variável teste era global isso não se fez necessário no nosso exemplo, por isso chamei o resolve() como os parenteses vazios.

recomendo que você aprofunde os estudos nas Promises pois este é um tópico fundamental para qualquer desenvolvedor JS.


Então o que você terá que fazer no seu código é fazer com que o carregamento dos seus dados esteja dentro de uma Promise, e o seu método de verificação esteja dentro do bloco then() dessa Promise, talvez você tenha que deixar de usar as Expression Languages e carregue os dados através de um requisição AJAX, setando os valores via JS manualmente, essa parte aí você vai ter que bater cabeça pra refatorar o seu código. Boa sorte, espero que minha explicação tenha lhe ajudado.

1
  • 1
    Muito obrigado pelas explicações! Commented 31/01/2020 às 18:18
0

Pode ser usado o evento change se for um select, para outros campos html deve procurar um evento que indique que o usuário acabou de preencher o campo, como eventos blur em campos de texto.

Tente alterar a opção selecionada no exemplo abaixo:

$('#campo-select').on('change', function() { 
     console.log('A opção selecionada foi: ' + $(this).val())
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="campo-select">
  <option value="A">Opção A</option>
  <option value="B">Opção B</option>
</select>

5
  • tentei da seguinte forma sem sucesso: $('#Modelo').on('change', function () { verificarAditivo(); }); Vou pesquisar algum evento que indique que o usuário acabou de preencher o campo, mas não sei se é aplicavel sendo que quando a página é carregada, já está selecionado um Modelo no campo. Quando a página já está aberta e o usuário seleciona algum Modelo, eu já consigo chamar a função usando o @onchange, o problema é chamar na hora certa quando a página acabou de ser carregada. Commented 29/01/2020 às 14:33
  • e se chamar no $(document).ready e no change?
    – Pilati
    Commented 29/01/2020 às 14:41
  • O $(document).ready chama a função cedo demais, quando ainda não está preenchida a lista de Modelos. Commented 29/01/2020 às 14:47
  • E como essa lista é preenchida?
    – Pilati
    Commented 29/01/2020 às 16:36
  • Mostrei ali no meu post, tem um Html.DropDownListFor, que recebe os dados do "ListaModelo" que é um JsonResult Commented 29/01/2020 às 17:12

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 .