Update city combo with jQuery when editing

Question

Update city combo with jQuery when editing

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I have a bug in updating the select cities, in the create works correctly, I select the state and the cities are updated. In the edit I can not get the cities updated according to the selected state. I've tried several alternatives but I could not, can someone tell me where I'm going wrong? The following is the code below:

(function($){
	$.fn.pega_cidades = function(estado){
			$.ajax({
				type: 'GET',
				url: 'cidades/'+estado,
				dataType: 'json',
        contentType: "application/json; charset=utf-8",
				success: function(data){
					if (data != null) {
					  var obj = data;
					  var selectbox = $('#cidade');
					  selectbox.find('option').remove();
					  $("#select2-chosen-2").text("SELECIONE");
					  $.each(obj, function (i, d) {
					    $('<option>').val(i).text(d).appendTo(selectbox);
					  });
					}
				}
			});
	}; 
})(jQuery);
$(document).ready(function() {
	$('.select2').select2();
	$("#cep").mask('99999-999',{placeholder: "_____-___"});
	$("#cpf").mask('999.999.999-99',{placeholder: "___.___.___-__"});
	$("#cnpj").mask('99.999.999/9999-99',{placeholder: "__.___.___/____-__"});
	$("#telefone").mask('(99) 9999-9999',{placeholder: "(__) ____-____"});
	$("#celular").mask('(99) 99999-9999',{placeholder: "(__) ____-____"});

	$("#estado").change(
		function(){
			var estado = $("#estado").val();
			
			$().pega_cidades(estado);
		}
	);
});

html dos campos

<!-- begin snippet: js hide: false console: true babel: false -->

<div class="form-group required">
  <label for="bairro" class="col-sm-2 control-label">Estado:</label>
  <div class="col-sm-10 {if isset($errors['estado'])}has-error has-feedback{/if}">
    <select class="form-control select2" name="estado" id="estado">
      <option value="">SELECIONE</option>
      {html_options options=$estados selected=$sindicato['estado_id']}
    </select>
  </div>
</div>
<div class="form-group required">
  <label for="cidade" class="col-sm-2 control-label">Cidade:</label>
  <div class="col-sm-10 {if isset($errors['cidade'])}has-error has-feedback{/if}">
    <select class="form-control select2" name="cidade" id="cidade">
      <option value="">SELECIONE</option>
      {html_options options=$cidades selected=$sindicato['cidade_id']}
    </select>
  </div>
</div>

javascript jquery jquery-select2

asked by anonymous 17.04.2017 / 19:13

2 answers

How to create dinamina category with input text How do I get a data from a class that was set in another class?

score 0 · Answer 1

I usually do it this way:

function AtualizarCidade(idUf) {
$.ajax({
    url: "/Cidades/_ListaPorUf",
    type: "POST",
    data: { idUf: parseInt(idUf) },
    beforeSend: function () { $("#Cidade").attr("disabled", "disabled"); var options = $("#Cidade"); options.empty(); options.append("<option value=''>Loading...</option>"); },
    success: function (returndata) {

        var options = $("#Cidade");
        options.empty();
        options.append("<option value=''>Selecione...</option>");
        $.each(returndata, function (i, item) {
            options.append("<option value='" + item.Id + "'>" + item.Nome + "</option>");
        });



}).done(function() {
    $("#Cidade").removeAttr("disabled");
});

$(document).ready(function () { $("#Uf").change(function (event) {
        AtualizarCidade($(this).val());
    });});

score 0 · Answer 2

I was able to find out why. Here's what I changed to work.

(function($){
	$.fn.pega_cidades = function(estado){
			var url_atual = window.location.href;
			var resultado = url_atual.split("/");
			var uri = '';
			
			if(resultado[4] == 'edit'){
				uri = '../cidades/';
			}else{
				uri = 'cidades/';
			}	
			
			$.ajax({
				type: 'GET',
				url:  uri+estado,
				dataType: 'json',
        contentType: "application/json; charset=utf-8",
				success: function(data){
					if (data != null) {
					  var obj = data;
					  var selectbox = $('#cidade');
					  selectbox.find('option').remove();
					  $("#select2-chosen-2").text("SELECIONE");
					  $.each(obj, function (i, d) {
					    $('<option>').val(i).text(d).appendTo(selectbox);
					  });
					}
				}
			});
	}; 
})(jQuery);