none
Ajax com Jquery RRS feed

  • Pergunta

  • Galera preciso criar duas combos. Quando seleciono a primeira a segunda é carregada.

    Como posso fazer isso através do ajax + jquery ?

    Obrigado


    SirSmart

    sexta-feira, 25 de janeiro de 2013 12:43

Respostas

  • Certo.. você vai ter uma action no seu controller que retorna uma lista baseado no id da primeira drop:

    public ActionResult GetProducs(int idDoPrimeiroDrop){
         List<Product> products = _repository.GetProducts(idDoPrimeiroDrop);
    
         return Json(products);
    }

    e o seu js:

    $("#firstSelect").change(function(){ $.ajax({ url: "Product/GetProducts", type: "POST", data: {value: this.value}, success:function(products){

    var segundoDrop = $("#segundoDrop"); $.each(JSON.parse(products.responseText), function(){ var options = '<option value="' + this.Id + '">' + this.Name + '</option>';

    segundoDrop.appendTo(options); }); } }); });



    http://www.linkedin.com/pub/murilo-kunze/44/191/455

    • Sugerido como Resposta _Omnislash_ sexta-feira, 25 de janeiro de 2013 17:44
    • Marcado como Resposta welington jrModerator terça-feira, 6 de março de 2018 15:04
    sexta-feira, 25 de janeiro de 2013 16:15

Todas as Respostas

  • $("#firstSelect").change(function(){
         $.ajax({
              url: "",
              type: "POST",
              data: {value: this.value},
              success:function(data){
                   
              }
         });
    });


    http://www.linkedin.com/pub/murilo-kunze/44/191/455

    sexta-feira, 25 de janeiro de 2013 12:49
  • Murilo vc poderia me explicar cada parametro dessa função por favor ?

    Obrigado


    SirSmart

    sexta-feira, 25 de janeiro de 2013 13:25
  • - url: O caminho da action, exemplo:

    url: "Controller/Action"

    - type: tipo da requisição(get, post, put, head etc..)

    - data: O conteudo que será enviado, exemplo:

    data: {id: 1, nome: "SisMart"}

    -success: é o callback que será executado após o servidor responder com um http 200.


    http://www.linkedin.com/pub/murilo-kunze/44/191/455

    sexta-feira, 25 de janeiro de 2013 13:32
  • Murilo eu preciso colocar alguma coisa na function Sucess ? Desculpa não conheço essa forma de sintaxe e estou meio perdido...

    Obrigado


    SirSmart

    sexta-feira, 25 de janeiro de 2013 14:02
  • Sim, na sua action você deve retornar os dados que serão usados para preencher o segundo drop, então você retorna uma lista de dados.

    Dentro da function success, você coloca o código de preenchimento do segundo drop.


    http://www.linkedin.com/pub/murilo-kunze/44/191/455

    sexta-feira, 25 de janeiro de 2013 15:26
  • Murilo vc poderia me ajudar me mostrando um exemplo de como fazer ? Pois a primeira combo já está prenchida por uma coleção de objetos, mas a segunda combo preciso ir buscar na minha controller e retornar uma coleção para a segunda combo....

    Obrigado


    SirSmart

    sexta-feira, 25 de janeiro de 2013 15:55
  • Certo.. você vai ter uma action no seu controller que retorna uma lista baseado no id da primeira drop:

    public ActionResult GetProducs(int idDoPrimeiroDrop){
         List<Product> products = _repository.GetProducts(idDoPrimeiroDrop);
    
         return Json(products);
    }

    e o seu js:

    $("#firstSelect").change(function(){ $.ajax({ url: "Product/GetProducts", type: "POST", data: {value: this.value}, success:function(products){

    var segundoDrop = $("#segundoDrop"); $.each(JSON.parse(products.responseText), function(){ var options = '<option value="' + this.Id + '">' + this.Name + '</option>';

    segundoDrop.appendTo(options); }); } }); });



    http://www.linkedin.com/pub/murilo-kunze/44/191/455

    • Sugerido como Resposta _Omnislash_ sexta-feira, 25 de janeiro de 2013 17:44
    • Marcado como Resposta welington jrModerator terça-feira, 6 de março de 2018 15:04
    sexta-feira, 25 de janeiro de 2013 16:15