2

To usando uma requisição ajax, para enviar um numero para o servidor e retornar informações referentes a esse numero! No caso eu retorno dois valores, eles são nome & funcao.

Até ai tudo bem! Está funcionado como deveria! Ele envia a informação e retorna seus respectivos valores!

Nessa mesma página uso um append para acrescentar um novo conjunto de input's, eles possuem as mesmas classes, sendo elas matricula / nome / funcao.

Eis então que surge meu problema! Ao inserir o numero no primeiro input de classe matricula, ele retorna os valores, porém ao usar o append e inserir outro numero no proximo input de classe matricula, ele não retorna as informações que deveria retornar, ele simplesmente reutiliza o resultado do matricula anterior e reinsere nos input's nome & funcao.

Tenho 90% de certeza que esse problema está sendo causado pelo jquery, porque não manjo muito, e estou embolando as coisas! Então poderiam me ajudar?

Em resumo eu gostaria que o código fizesse o seguinte

Que á cada input class="matricula", auto preenche-se seus respectivos input's, ou seja, o input class="funcao" && input class="nome".

Vale lembrar que no código faço com que á cada append, os input's sejam inseridos dentro de uma div class="trabalhador".

O exemplo funcionando está aqui :: http://www.vullsper.com/consultaajax/

Os codigos estão aqui:: http://jsfiddle.net/n7vbg3g2/

1 Resposta 1

1

Uma das soluções para resolver seu problema pode ser implementada da seguinte forma, adicione um data-val="0" no seu input tipo matricula para ser novo valor inicial conforme e um 0_ antes das class de seus campos conforme abaixo:

<form method="post" enctype="multipart/form-data" >
    <h1>Digite um numero de 1 á 6</h1>

    <div class="participantes">
        <div class="trabalhador" id="tra_0">
            <input type="text" name="0_matricula" placeholder="Matrícula" data-val="0" class="matricula" />
            <input type="text" name="0_nome" placeholder="Nome" class="0_nome" />
            <input type="text" name="0_funcao" placeholder="Funçao" class="0_funcao" />
        </div>
    </div>

    <br>

   <div class="novo">Acrescentar append</div> 

</form>

Agora altere a lógica do seu javascript conforme abaixo:

 //Aqui metodo para setar o evento na class matricula
 function eventoDeMatricula() {

    $(".matricula").change(function (json){

    $.ajax({
    type: 'get', 
    url: "//vullsper.com/consultaajax/retorno.php",
    data: 'nome='+ $('.matricula').val(), 
    dataType: "json", //Tipo de Retorno
    cache: false,
    success: function(json) {

      //aqui eu pego o index setado no data-val do seu input
      var idx = $(this).data('val');

      //Aqui eu seto o valor baseado nele
      $(('.' + idx + '_nome')).val("teste");
      $(('.' + idx + '_funcao')).val("opaa");

    }
   });
}

$(document).ready(function () {

   /*aqui chamo evento no seu matricula pela promeira vez*/
   eventoDeMatricula();

   $(".novo").click(function(){

    var n = $("div.trabalhador").length;

    if( n <= 2) {    

      /*aqui eu alterei para setar o data-val e adicionei o seu count n na frente das class*/
      $(".participantes").append(
        '<div class="trabalhador" id="tra_'+n+'"><input type="text" name="'+n+'_matricula"' +
        'placeholder="Matrícula" data-val="'+ n +'" class="matricula" /><input type="text" name="'+n+'_nome"' + 
        'placeholder="Nome" class="'+ n +'_nome" /><input type="text" name="'+n+'_funcao"'+
        'placeholder="Funçao" class="'+ n +'_funcao" /></div>');

      $(".adicionados").val(""+ n + "");

      /*como acabamos de criar um novo elemento eu chamo 
      novamenteo o metodo abaixo para setar o evento em todos 
      os campos maticula inclusive no novo*/
      eventoDeMatricula();

      if(n == 2) {
        $(".participantes").append('<div class="aviso">Limite de sites atingido</div>'); 
        $(".novo").css({display:"none"})
      }

    }
   });

});

espero ter ajudado.

1
  • No começo não funcionou, mas o código que você fez ajudou e muito para a construção de um novo código! 16/08/2015 às 20:26

Você deve fazer log-in para responder a esta pergunta.

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