Select and view data with Ajax

Asked

Viewed 374 times

3

I got the following ajax:

var id = $('#idCliente').val();
$.ajax( 
{ 
    url:"/Administrar/chamadas/ajax/endereco/" + id, 
    dataType : 'json', 
    success:function(result) { 
        $('[name^="cham_endereco[]"]').val(result.endereco); 
        $('[name^="cham_numero[]"]').val(result.numero); 
        $('[name^="cham_cidade"]').val(result.cidade); 
        $('[name^="cham_bairro"]').val(result.bairro); 
    } 
});

In this case I recover the customer address data, to automatically fill in the fields, the return is this way:

{"address":"R MANDAGUARI","neighborhood":"25","city":"1","state":16,"cep":83324410,"numero":"1316","capital":true}

Until the return, all right. However, in the system I use a select to select first the city and then yes the neighborhood... In this case, selects the city automatically, however, the neighborhood is not selected (because it is not loaded by an ajax).

inserir a descrição da imagem aqui

How can I call the neighborhood in ajax, so that automatically click on the screen and select the neighborhood that is being requested?

  • From what I understand, you have the neighborhood in the return of Ajax but it does not load in html, this?

  • Exactly, I have this neighborhood comeback... But I need to elaborate some jquery that loads these neighborhoods... by the following, in the field below, when you select the city, the neighborhood comes. (works) but in the case of the city already selected, does not give the onchange to carry the neighborhoods... understood? :)

  • 1

    Take a look at this code, I used it here. It is not difficult to adapt to your: http://answall.com/questions/99107/listar-states-bairros-formulário-de-cadastro/99133#99133

2 answers

3

You can call the ajax when you change the city field, if you already bring the filled city field you can call the ajax when you finish loading the page.

To call when it changes...

$(function() {
  $('cidade').change(function(e) {
    //chama o ajax aqui
  }); 
});

If the field is already filled can do so...

$(function() {
  if ($('cidade').val() > 0) {
    //chama o ajax aqui
    //popule o campo estado
  } 
});

To popular the select field with the options take the result of the return ajax and do so...

$('bairro').append('<option value="0">Nome do Bairro</option>');

In your case it would look like this

<select id='cliente'>
  <option>Selecione o cliente</option>
  <option>Cliente 1</option>
  <option>Cliente 2</option>
</select>

<select  id='cidade'>
</select>

<select  id='bairro'>
</select>

And your script like this...

$(function(){
  $('#cliente').change(function(e) {
      $('#cidade').append('<option value="1">Cidade 1</option>');
      $('#cidade').append('<option value="2">Cidade 2</option>');
      $('#cidade').val(2);
      $('#cidade').change();
    }); 
  $('#cidade').change(function(e) {
    //chama o ajax que busca os bairros aqui
    $('#bairro').append('<option value="1">Bairro 1</option>');
    $('#bairro').append('<option value="2">Bairro 2</option>');
    $('#bairro').val(2);
  }); 
});

See example working here

  • I understood a little, I do not understand much of ajax... How I would make the adaptation in the code quoted?

  • At what point do you do this ajax you quoted? When do you load the page? You need to have another ajax that searches the neighborhoods, the same way you did the address. However in the return should be different. After that pays the neighborhood id and arrow to select the address neighborhood. I’ve put together an example.... https://jsfiddle.net/4zqzh0c1/

  • This ajax I mentioned, is when I select the client (<select>), then it fetches the address data and fills the first fields that are shown in the image

  • Andre, from the look that I edited the answer, I put an example working to make it clearer.

0

Fire the 'change' event in the city checkbox after selecting its value:

$('cidade').trigger('change');

Then after searching the neighborhoods select what comes from your Ajax.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.