Ajax Pai Filho + Zoom

Boa tarde.

Estou tentando fazer um evento no campo pai filho. Ao selecionar o um campo do formulário filho, eu gostaria de atualizar outro campo.

Possuo um WS Rest para consulta de produto que me retornam nome, id e tipo.

Ao selecionar o campo Produto (campo zoom), o campo tipoProduto deveria ser atualizado. Tentei de várias maneiras, deixo código abaixo, mas sem sucesso.

Poderiam me ajudar? Agradeço de antemão.


$("input[id^='campocodproduto___']").blur(function(){
  var codigo = $("input[id^='campocodproduto___']").val();

  //....consulta no WS... que me retorna o tipo na variável tipoProduto 

  $("input[id^='campoTipoProd___']").val(tipoProduto);

});

Consegui fazer isso com campos no formulário pai sem problemas. Mas quando passa pra o filho, eu não entendo como relativar os dados da linha para que cada linha faça uma consulta baseada no produto da mesma.

Boa tarde Janilson,

acho que você pode tentar pegar o indice da linha do paixfilho com substring ou replace:


$("input[id^='campocodproduto___']").blur(function(){
   var index = this.id.substring(this.id.indexOf('___') + 3);
   var codigo = this.value;    

   ...

   $("#campoTipoProd___" + index).val(tipoProduto);
});

Consegui fazer funcionar perfeitamente com um campo Input normal usando o código abaixo


$("input[id^='produto']").blur(function(){
   var index = this.id.substring(this.id.indexOf('___') + 3);
   var codigo = this.value; 
   var valor = this.value;
   $("#produto___"+index).val("Resultado index: "+index);
});

Mas quando uso com o campo Zoom não funciona

OBS: no HTML resultante no fluig o campo zoom é digo como select


<select name="codproduto___1" id="codproduto___1" type="zoom" class="form-control select2-hidden-accessible" filter-instance="codproduto___1" multiple="" tabindex="-1" aria-hidden="true"><option value="MCO000000000001 - CESTAS DE NATAL">MCO000000000001 - CESTAS DE NATAL</option></select>

Não consegui. Fiz o código abaixo pra testar com algo fixo


$("input[id^='codproduto___']").blur(function(){
   var index = this.id.substring(this.id.indexOf('___') + 3);
   var codigo = this.value; 

   //Tentei linha abaixo e não funcionou
   $("#um___" + index).val(codigo); //um___1 é o nome completo

   //Testei apenas modificando por uma constante e não funcionou também
   $("#um___" + index).val("001");

});

Ele chega a executar essa função? Coloca um console.log() pra ver se aparece. Outro detalhe é que você tem que adicionar esse blur toda vez que adicionar uma linha nova no pai x filho, senão não vai executar, ou seja, tens que executar toda vez que o botão ‘Adicionar’ do paxfilho for pressionado junto com addchild.

Consegui fazer funcionar sem ser com um campo Zoom, apenas com input normal


$("input[id^='produto']").blur(function(){
   var index = this.id.substring(this.id.indexOf('___') + 3);
   var codigo = this.value; 
   var valor = this.value;
   $("#produto___"+index).val("Resultado index: "+index);
});


No HTML resultante o campo zoom aparece como select, não sei se isso mudaria todo o código

Talvez se você colocar esse código num evento de onchange e não mais no blur

Estou pesquisando e tentando mas não achei nada que dispare o evento. O Zoom vira select mas gera também várias tags, e numa delas (ul.li) tem uma determinada classe, e um Title, e esse title é que guarda o valor do campo. Deixo o código do campo zoom, resultante no fluig

Você está usando a função setSelectedZoomItem() do seu zoom? Não dá de acessar o selectedItem.inputId ou inputName ?

Não estou usando essa função. Eu preciso? Ela pode ser usada no ajax/jQuery? Mas a questão é que não consigo perceber quando esse campo muda ou saem dele (blur). Obrigado pela ajuda

Não que seja obrigatório, mas acho que te ajudaria porque ela é feita pra essas coisas, pois é executada toda vez que for selecionado um item no zoom. Tem um exemplo aqui: Browse Samples / Projetos - fluig Stash

@Diogo Boegershausen, obrigado pela dica. Deixo abaixo como resolvi o problema.


function setSelectedZoomItem(selectedItem) {

    var FIELD = selectedItem.inputId; //Obtém nome do campo
    var index = FIELD.substring(FIELD.indexOf('___') + 3); //Obtém índice do campo

    $("#produto___" + index).val("valor"+index); //jQuery para setar valor no campo
}