Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

matheusmarson

Posicionamento combobox de estados e cidades

Recommended Posts

Olá a todos.

 

Estou com um problema para posicionar um combobox populado com cidades via ajax em uma determinada cidade.

As situação é a seguinte:

 

Tem 2 combobox um para estados e outro para cidades ambos populados via ajax com dados do BD

o combo estado carrega todos os estados que estão cadastrados no BD. Até aí blz!

 

O combo cidades vai carregar as cidades do BD que correspondem a escolha da o estado no combo de estados.

Blz funcionando perfeito

 

Ocorre que para realizar alterações de dados dos usuários preciso posicionar estes 2 combos já nos valores que foram cadastrados no momento do cadastro, ou seja se o usuário se cadastro como estado de São paulo e cidade de Bauro por exemplo os combos deveriam ser posicionados nestes valores

 

Na página de atualização após carregar os campos com as funções de carregamento que criei em ajax fui posicionar via jquery da seguinte forma:

 

$("#estados").val($variavel_que_pega_estado_BD); 

aqui funcionou perfeito! Posicionou o combo;

 

$("#cidades").val($variavel_que_pega_cidade_BD);

Aqui já não posicionou!

 

Alguém saberia me dizer o porque?

Teria que dar algum refresh no combo cidade após ele receber os dados via ajax?

 

Desde já muito obrigado

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom, primeiro eu não faria dessa forma, pois é chato demais escolher o Estado e depois a cidade, o melhor é você fazer um auto-complete em um input tipo texto, e a pessoa vai digitando o nome e vai aparecendo as cidades parecidas (filtrando), daí ele seleciona somente uma e você vai salvar somente o ID da cidade em questão na tabela do usuario. Já na requisição no banco para alteração faria basicamente a mesma coisa, só que você vai carregar a cidade buscando o ID da tabela de usuários e coloca no input somente o nome, e em um oculto coloca o valor do ID.

 

ex.:

<!--PÁGINA DE CADASTRO-->

<script>
  //CÓDIGO FICTÍCIO (NÃO FUNCIONA)
  //CÓDIGO FICTÍCIO (NÃO FUNCIONA)
  //CÓDIGO FICTÍCIO (NÃO FUNCIONA)
  //CÓDIGO FICTÍCIO (NÃO FUNCIONA)
  //PRA DEIXAR CLARO!
  $(function(){
		$("#cidade").auto_preenchimento(fucntion(){
			$("#cidade-id").val(id_dessa_cidade);
		});
  });
</script>
<form>
	<input type="text" name="nome" value="" />
	<input type="text" id="cidade" name="cidade" value="" />
 	<input type="hidden" name="cidade-id" value="" />
</form>






<!--PÁGINA DE EDIÇÃO-->

<script>
  //CÓDIGO FICTÍCIO (NÃO FUNCIONA)
  //CÓDIGO FICTÍCIO (NÃO FUNCIONA)
  //CÓDIGO FICTÍCIO (NÃO FUNCIONA)
  //CÓDIGO FICTÍCIO (NÃO FUNCIONA)
  //PRA DEIXAR CLARO!
  $(function(){
		$("#cidade-id").pega_valor(fucntion(){
            //faz o ajax no PHP pra achar o nome
			$("#cidade").val(nome_da_cidade);
		});
  });
</script>
<form>
	<input type="text" name="nome" value="Quimera das Tantas" />
	<input type="text" id="cidade" name="cidade" value="Nome da Cidade - UF" />
 	<input type="hidden" name="cidade-id" value="15" />
</form>

modelo: 

https://jqueryui.com/autocomplete/

img.png

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • Por ILR master
      Salve galera.
       
      Vou publicar um evento e quero colocar um Cronômetro regressivo que mostre em tempo real os dias, horas e minutos que faltam para determinada data, tipo:.
      Faltam 5 dias, 12:30:00 para inauguração.
       
      Qdo chegar no dia, quero que apenas apareça uma mensagem.
       
      Alguém pode me ajudar?
    • Por ment0r
      Boa noite pessoal, tudo bem?
       
      Estou desenvolvendo um sistema simples com exibição de formulário via modal. Uma vez cadastrado o serviço (tabela possui apenas dois campos, id e nome), eles são exibidos numa tabela com um ícone que permite a alteração do nome.

       
      Eu clico no ícone e é chamado um modal que é gerado via ajax (pois são vários registros).
       

       
      Nesse modal é mostrado o serviço e uma vez alterado, o botão Salvar chama uma função que atualiza a tabela servico, concluindo a tarefa. Fiz o mesmo processo pra cadastrar o serviço, com a diferença de que o modal está presente na mesma página, ou seja, não é chamado via ajax.
       
      Eis os códigos:
      <a href="#" onclick="modalUpdate(<?= trim($array['id']) ?>)"> <i class='bx bx-edit'></i> </a> // Trecho onde eu chamo a função modalUpdate. Função btAltServico click:
      $('#btAltServico').click(function() { var inpnome = $('#nome'); var inpid = $('#id'); if (inpnome.val() == '') { swal("Atenção", "Por favor, preencha os campos obrigatórios", "warning"); if (inpnome.val() == '') { inpnome.css("border","2px solid #f94545"); } else { inpnome.css("border",""); } alert(inpnome); alert(inpid); } else { $.ajax({ url: '../inc/ajax/altServico.php', type: 'post', dataType: 'json', // pode ser html data: { nome : inpnome.val(), id : inpid.val() }, success: function(resposta){ if (resposta == 1) { inpnome.val(""); inpnome.css("border",""); swal("Sucesso", "Serviço alterado", "success"); } else { if (resposta == 0) { swal("Erro", "Serviço não alterado. Log de erro gerado.", "error"); } else { swal("Atenção", "Serviço já cadastrado", "warning"); } } } }) } });  
      E modalUpdate.php :
       
      <?php /* * altServico.php * * Script responsável pelo update de serviços na tabela servico * * Função chamada pelo arquivo ajax.js */ //if ($_POST) { require'../conn.php'; require'../../class/class.geral.php'; $geral = new Geral(); $nome = $_POST['nome']; $id = $_POST['nome']; $ativo = 1; // Verifica se o servico já foi cadastrado $sqlVer = "select nome from algo68_db_cliente.servico where nome = '".$nome."' and id <> ".$id.""; $queryVer = mysqli_query($conn, $sqlVer); $resultVer = mysqli_num_rows($queryVer); if ($resultVer > 0) { echo json_encode(2); // servico já cadastrado } else { // Update do servico $sql = "update algo68_db_cliente.servico set nome = '".$nome."', ativo = ".$ativo." where id = ".$id; $query = mysqli_query($conn, $sql); $result = mysqli_affected_rows($conn); if ($result > 0) { echo json_encode(1); // alterou o servico } else { $geral->logErro(date('d/m/Y|H:i:s'), @$_SERVER[REQUEST_URI], 'AlterarServico', mysqli_error($conn)); echo json_encode(0); // não alterou o servico } } //} ?> O problema é que quando clico no botão Salvar, não acontece nada - se eu colocar um alert qualquer na função click, só pra saber se está chegando, também não da nada. E está da mesma forma que o cadastro de serviço, que funciona perfeitamente.

      Bom, é isso pessoal, tentei ser o mais breve e especifico possível. Qualquer ajuda é bem vinda, obrigado a todos, desde já.
    • Por gersonab
      bom dia
      tenho uma aplicação onde gero um arquivo em pdf, gostaria de recuperar a url do pdf q foi criado, pois quando este é criado ele abre automaticamente e ou ja faz o download do mesmo, preciso da url para enviar para outros.
      <button type="button" class="btn btn-outline-primary" onclick="createPDF();">Imprimir</button> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/canvas2image@1.0.5/canvas2image.min.js"></script> <script language="javascript"> (function($){ $.fn.createPdf = function(parametros) { var config = { 'fileName':'html-to-pdf' }; if (parametros){ $.extend(config, parametros); } var orig = $(this); var widthOrig = $(orig).width(); $(orig).width(900); var quotes = document.getElementById($(orig).attr('id')); html2canvas(quotes, { onrendered: function(canvas) { var pdf = new jsPDF('p', 'pt', 'letter'); for (var i = 0; i <= quotes.clientHeight/900; i++) { var srcImg = canvas; var sX = 0; var sY = 900*i; var sWidth = 900; var sHeight = 900; var dX = 0; var dY = 0; var dWidth = 900; var dHeight = 900; window.onePageCanvas = document.createElement("canvas"); onePageCanvas.setAttribute('width', 900); onePageCanvas.setAttribute('height', 900); var ctx = onePageCanvas.getContext('2d'); ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight); var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0); var width = onePageCanvas.width; var height = onePageCanvas.clientHeight; if (i > 0) { pdf.addPage(612, 791); } pdf.setPage(i+1); pdf.addImage(canvasDataURL, 'PNG', 20, 40, (width*.62), (height*.62)); // Retirar o comentário caso queira ver como está sendo gerado o canvas. //document.body.appendChild(onePageCanvas); } pdf.save(config.fileName); $(orig).width(widthOrig); } }); }; })(jQuery); function createPDF() { $('#renderPDF').createPdf({ 'fileName' : '<?php echo $usercli['idocl']; ?>' }); }  
    • Por gersonab
      Boa tarde a todos.
      tenho pesquisado e ainda não encontrei uma forma de montar uma imagem online, tipo, tenho uma área de 400px por 400px , nesta gostaria de acrescentar algumas imagens que já tenho, tipo clicar e arrastar para dentro, sendo que estas imagens já se encontram online no site, seria mais ou menos assim : poderia colocar dentro desta área uma imagem do gato , do cachorro e ou outra. Não sei qual biblioteca ou forma de fazer.
      gostaria da ajuda para iniciar, desde já agradeço.
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.