Lista por jquery e ação submit - resolvido

Tenho este script, que ao selecionar um estado, ele carrega os municípios,. o que está funcionando. Mas se tenho salvar por uma ação submit, ele mostra o erro, mas o que o usuário escolheu no município, some e os municípios ficam em branco.

<script type="text/javascript">
	$(function() {
		$('#estadoMunicipio')
				.change(
						function() {
							if ($(this).val()) {
								$('#municipioEstado').hide();
								$('.carregando').show();
								$.getJSON('/nota-fiscal-servico-web/buscaMunicipioPorPaisEstado/' + $(this).val(),
													function(j) {
														var options = '<option value="" class="chosen-select">'
														+'</option>';
														for (var i = 0; i < j.length; i++) {
															options += '<option class="chosen-select" value="' +
		              j[i].id + '">'
																	+ j[i].descricao
																	+ '</option>';
														}
														$('#municipioEstado')
																.html(options)
																.show();
														$('.carregando').hide();
													});
								} else {
									$('#municipioEstado')
											.html(
													'<option  class="chosen-select" value="">-- Escolha um estado --</option>');
								}
							});
		});
	</script>

Qual erro?
O que acontece é que o javascript é executado linearmente, de cima para baixo, a partir da função principal (no caso do jquery, é a que é chamada após o carregamento da tela).
Devido a isso, ao identificar o erro, o teu código não trata o mesmo como devido e, então, a execução do script é interrompida.
Você precisa tratar todos os erros que vai disparar, caso contrário, terá este tipo de problema.

Vou tentar informar o que está acontecendo;

Tenho um formulário com os campos, sendo todos obrigatórios:

Estado, que é um select, preenchendo com todos os estados.
Município, que é um select, preenchendo com todos os municípios, após a escolha do estado.
ICMS, que é um inpu para digitar a porcentagem.

Em um novo registro sigo os passos.

  1. Escolho um estado. Ele carrega os municípios.
  2. Escolho o município e clico em salvar.
  3. Ele dá uma exceção informando que o campo valor é obrigatório. Assim limpando o que escolhi em município.

Ele deveria mostrar a exceção e como faço para que o município escolhido fique com todos os municípios pré carregado ?

Entendeu ?

Você precisa assim que definir as funções, ativar um “gatilho” (trigger) com jquery assim…

<script type="text/javascript">
...
$('#estadoMunicipio').trigger('change');
</script>

Dessa forma logo após o carregamento da página, o estado vai ser “auto clicado” como se o usuário estive mudando o estado, agora você precisa garantir que o valor pré carregado (option) do estado seja válido para que os municípios sejam devidamente exibidos… por exemplo se no seu select estados o primeiro option estiver assim…

<select id="estadoMunicipio">
    <option value="">SELECIONE</option>
    ...
</select>

Ai já não fica legal, melhor seria deixar um UF/estado válido pre selecionado…

Não entendi …


Mas ao clicar e tentar salvar o ID do município, escolhido vai e volta, só não consigo atualizar o componente.

Quero dizer que é muito comum se ver/deixar um option “vazio”, para o usuário escolher o estado depois (e o evento do change funcionar…), no seu caso melhor seria deixar com um uf/estado definido…

<select id="estadoMunicipio">
    <option value="AC">Acre</option>
    ...
</select>

Por isso falei do trigger, entenda que toda vez que se dá um submit na página, você obrigatoriamente “força” a página carregar tudo novamente, os comportamentos que você tinha antes são perdidos (stateless) e por isso você precisa “restaurar” de algum jeito, e no jquery isso é feito com trigger pegou?

Isto já tinha entendido… Este gatilho funciona para todos estes tipos de caso ?

Um outro seria o seguinte. Seleciono um serviço. Ele vai até o banco de dados, via jquery , e retorna a porcentagem … Ao salvar e dar um erro ele apaga a porcentagem que veio do jquery . Esta trigger ajusta aqui também ?

Agora entendi o que quis dizer …


A questão de deixar pré selecionado um estado e município nesta tela pode ocorrer, mas não seria o correto.

A trigger vai atuar no evento que você colocou, se os passos do usuário são escolher no estado, depois escolher o municipio, etc, cada passo precisa ter seu trigger…

Na verdade o trigger simula o evento do usuário, por isso você precisa passar o evento como parâmetro, para a sua porcentagem poderia ser no blur por exemplo…

 $('#idPorcentagem').trigger('blur');

Se precisar de um clique em outro campo…

 $('#idCampo').trigger('click');

E assim por diante, você quem define as regras… você só precisa colocá-los no código sempre depois do evento caso o contrário vai gerar erros por tentar acionar um evento que ainda não existe…

Por que não seria o correto, se os campos são obrigatórios, já que precisa de um estado e munícipio?

Deixa eu adivinhar, frescura de design (atuei em um projeto que a “cliente” queria o combo em branco pode isso? :joy: pois esteticamente ficava mais bonito :rage:)

Porque o usuário pode alterar os mesmos. ai se encaixa o inicio do processo.

Mas porque não conseguimos pegar este retorno do jquery ?

Não altera nada já que o evento é change, ele vai ter que mudar de qualquer forma…

O que estou tentando te dizer, é que não existe retorno do jquery quando se usa submit… a página é carregada novamente, o jquery, js, css, html, etc vão ser baixados do servidor tudo de novo, é o padrão de uma requisição http…

Este e a aba que tem os campos Município e Estado. Tem várias abas e vários campos.

entendi…

A questão é no evento submit do botão e não no change…

Nesse caso é uma regra de negócio sua, mas o principal creio que você pegou, o trigger vai te ajudar nessa, boa sorte!

Sim obrigado. Vou testar aqui e posto o resultado.

1 curtida

Pensando em uma outra maneira aqui.

Abre um modal, com os dois selects estado e município. Ao selecionar o estado, carrega os municípios do estado. Seleciona o município. Clico em OK, Altero os valores no controller atual.

Mas como recarregar os componentes com os valores atualizados ?

Usa ajax para postar o form, assim nada some. Abaixo um exemplo, mas dá uma estudada geral.

1 curtida

Valeu … Assim ficou bem melhor

1 curtida