6

Estou montando um webapp com o framework JQuery Mobile, PHP e AJAX.

Nesse app eu tenho um formulário com selects de ESTADO e CIDADE, foi feito um AJAX que quando seleciona o ESTADO, carrega as CIDADES de acordo com ESTADO.

O problema que estou tendo, e que o AJAX só carrega a primeira vez, e depois não mais após selecionar o ESTADO pela segunda vez ou mais vezes.

 <script type="text/javascript">
        $(document).ready(function(){
            $('#estados').change(function(){
                alert ('carrega cidade');
                $('#cidades').load('cidades.php?estado='+$('#estados').val() );

            });
        });

    </script>
<select name="estados" id="estados">
    <option value="0">ESTADO</option>
    <?php
        mysql_connect('localhost','root','');
        mysql_selectdb('proxima-corrida');

       $result = mysql_query("select * from proxc_estado");

       while($row = mysql_fetch_array($result) ){
            echo "<option value='".$row['id_estado']."'>".$row['estado']."</option>";

       }

    ?>
</select>


<select name="cidades" id="cidades">
    <option value="0">Escolha um estado</option>
</select>
<?php

    $idestado = $_GET['estado'];

    mysql_connect('localhost','root','');
    mysql_selectdb('proxima-corrida');

   $result = mysql_query("SELECT * FROM proxc_cidade WHERE estado_cidade = ".$idestado);

   while($row = mysql_fetch_array($result) ){
        echo "<option value='".$row['id_cidade']."'>".$row['cidade']."</option>";

   }

?>
12
  • Podes colocar console.log('log: ', this.value); na primeira linha dentro de $('#estados').change(function(){ e verificar se isso é chamado quando mudas de estado de novo?
    – Sergio
    19/06/2015 às 20:27
  • 2
    Cuidado com injeção de SQL. Pois se eu utilizar o firebug ou ferramenta parecida para colocar um elemento <option value="5; DELETE FROM proxc_cidade; --">pwned</option> na combobox e selecioná-lo, sua aplicação já era. 19/06/2015 às 21:19
  • ok!! estou ainda em homologação.. não vou deixar assim o injeção de SQL @Victor Stafusa 19/06/2015 às 21:22
  • 1
    @AnaPaulaMoraes 2 perguntas: 1- o console aparece cada vez que o select muda? 2- no HTML o value dessas option está certo ou o value é undefined?
    – Sergio
    19/06/2015 às 21:26
  • 2
    @AnaPaulaMoraes estás a carregar o jQuery 1.10 e em seguida o 1.3. Podes tirar a versão 1.3, só vai causar problemas...
    – Sergio
    21/06/2015 às 20:03

2 Respostas 2

4

Fiz um exemplo para não depender da programação, apenas javascript. O arquivo com as cidades e estados estão em https://api.myjson.com/bins/enzld. Será feita uma consulta neste arquivo e depois populado os demais campos. O arquivo em javascript acredito que esteja bem simples, qualquer dúvida pergunte que posso lhe explicar os itens que não entender.

No seu caso, você pode gerar essa listagem como JSON via PHP ou até mesmo consumir um arquivo estático como este do exemplo.

var estados = [];

function loadEstados(element) {
  if (estados.length > 0) {
    putEstados(element);
    $(element).removeAttr('disabled');
  } else {
    $.ajax({
      url: 'https://api.myjson.com/bins/enzld',
      method: 'get',
      dataType: 'json',
      beforeSend: function() {
        $(element).html('<option>Carregando...</option>');
      }
    }).done(function(response) {
      estados = response.estados;
      putEstados(element);
      $(element).removeAttr('disabled');
    });
  }
}

function putEstados(element) {

  var label = $(element).data('label');
  label = label ? label : 'Estado';

  var options = '<option value="">' + label + '</option>';
  for (var i in estados) {
    var estado = estados[i];
    options += '<option value="' + estado.sigla + '">' + estado.nome + '</option>';
  }

  $(element).html(options);
}

function loadCidades(element, estado_sigla) {
  if (estados.length > 0) {
    putCidades(element, estado_sigla);
    $(element).removeAttr('disabled');
  } else {
    $.ajax({
      url: theme_url + '/assets/json/estados.json',
      method: 'get',
      dataType: 'json',
      beforeSend: function() {
        $(element).html('<option>Carregando...</option>');
      }
    }).done(function(response) {
      estados = response.estados;
      putCidades(element, estado_sigla);
      $(element).removeAttr('disabled');
    });
  }
}

function putCidades(element, estado_sigla) {
  var label = $(element).data('label');
  label = label ? label : 'Cidade';

  var options = '<option value="">' + label + '</option>';
  for (var i in estados) {
    var estado = estados[i];
    if (estado.sigla != estado_sigla)
      continue;
    for (var j in estado.cidades) {
      var cidade = estado.cidades[j];
      options += '<option value="' + cidade + '">' + cidade + '</option>';
    }
  }
  $(element).html(options);
}

document.addEventListener('DOMContentLoaded', function() {
  loadEstados('#uf');
  $(document).on('change', '#uf', function(e) {
    var target = $(this).data('target');
    if (target) {
      loadCidades(target, $(this).val());
    }
  });
}, false);
<div>
  <label for="uf" class="input-label">Estado</label>
  <select name="uf" id="uf" disabled data-target="#cidade">
        <option value="">Estado</option>
    </select>
</div>

<div>
  <label for="cidade" class="input-label">Cidade</label>
  <select name="cidade" id="cidade" disabled>
        <option value="">Cidade</option>
    </select>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

2
  • Fantásico, muito bom, obrigado pelo excelente código. 6/06/2018 às 20:45
  • Obrigado @adventistapr, ;) Esse é um exemplo de código com javascript puro, aconselho a apenas usar este exemplo para aprender e depois, utilize um framework tipo Vuejs que não consumiria 80% do que foi digitado ali. rsrsr 6/06/2018 às 20:55
0

Para que o ajax do jQuery seja carregado todas as vezes, você pode usar o método delegate do JQuery, exemplo:

$(function() {
  $(document).delegate('#estados', 'change', function() {
    var valor = $('#estados').val();
    $('#cidades').load('cidades.php?estado=' + valor );
   });
 });

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .