1

Olá! Estou fazendo um programa simples para o gerenciamento de minhas cervejas e vendas.

Na view de pedidos, eu consegui fazer a adição de uma nova linha para a inclusão de um novo item para o pedido.

Campos: id_item(select) | id_lote_item(select) | quantidade (text) | valor unitario(text) | subtotal(text)

Código jquery que faz a adição dos campos:

var campos_max = 10;   //max de 10 campos
var x = 1; // campos iniciais
$('#add_field').click(function (Event) {
    Event.preventDefault();     //prevenir novos clicks
    if (x < campos_max) {
        $('#listas').append('\
            <div id="linha">\n\
                <div class="col-sm-3">\n\
                    <div class="form-group">\n\
                        <label for="exampleInputEmail1">Cerveja</label>\n\
                        <select name="id_item_estoque_pedido[]" id="id_item" class="select2 form-control">\n\
                            <option>Selecione</option>\n\
                        </select>\n\
                    </div>\n\
                </div>\n\
                <div class="col-sm-3">\n\
                    <div class="form-group">\n\
                        <label for="exampleInputEmail1">Lote</label>\n\
                        <select name="id_lote_pedido[]" id="id_lote_item" class="select2 form-control">\n\
                            <option>Selecione o lote</option>\n\
                        </select>\n\
                    </div>\n\
                </div>\n\
                <div class="col-sm-2">\n\
                    <div class="form-group">\n\
                        <label for="exampleInputEmail1">Qtd. Pedido</label>\n\
                        <input type="text" name="quantidade_item_pedido[]" id="quantidade_item_pedido" class="form-control">\n\
                    </div>\n\
                </div>\n\
                <div class="col-sm-2">\n\
                    <div class="form-group">\n\
                        <label for="exampleInputEmail1">valor Unitario</label>\n\
                        <input type="text" name="valor_unitatio_item_pedido[]" id="valor_unitatio_item_pedido" class="form-control">\n\
                    </div>\n\
                </div>\n\
                <div class="col-sm-2"><div class="form-group">\n\
                    <label for="exampleInputEmail1">Subtotal</label>\n\
                    <input type="text" id="subtotal_item_pedido" class="form-control" readonly="true">\n\
                </div>\n\
            </div>'
        );
        x++;
    }
});

Até ai tudo bem... a minha duvida vem agora... O campo id_lote_item é alterado para exibir os lotes do item selecionado.

Codigo jquery:

$('#id_item').change(function (e) {
    var item = $('#id_item').val();
    var base_url = '<?php echo base_url(); ?>';
    $.getJSON(base_url + 'pedido/GetLoteByIdItem/' + item, function (dados) {

        if (dados.length > 0) {
            var option = '<option>Selecione o lote</option>';
            $.each(dados, function (i, obj) {
                option += '<option value="' + obj.id_lote + '">' + obj.nome_lote + ' - ' + 'Qtd: (' + obj.quantidade_garrafas_lote + ')</option>';
            })
        } else {
            option = '<option>Selecione o lote</option>';
        }
        $('#id_lote_item').html(option).show();
    });
});

Eu consegui fazer para somente uma linha. Agora com esse esquema de linhas dinamicas eu não consegui nem a pau.

Obrigado pela ajuda!

4
  • No HTML que estás a gerar há mais do que 1 #id_item? Ou seja, estás a adicionar várias vezes o HTML que tens na pergunta é isso? e funciona só para o primeiro certo?
    – Sergio
    Commented 14/06/2017 às 6:35
  • @Sergio, quando chamo a view pela primeira vez, os campos não são criados, somente quando clico em um botão (#add_field). Nesse caso teriam várias linhas com os mesmos campos, entendeu? Commented 14/06/2017 às 6:38
  • Ok, e $('#id_item').change(function (e) { funciona para 1 campo, mas não para os proximos certo?
    – Sergio
    Commented 14/06/2017 às 6:39
  • não.... eu consegui fazer a busca pelos lotes do item somente escrevendo a linha onde ela ficaria. Agora, quando adicionei a funçao para adicionar as linhas com o jquery não consegui fazer nem para a primaira Commented 14/06/2017 às 6:41

2 Respostas 2

2

Qual é o problema?

Há dois problemas no código:

Um deles é $('#id_item') não corre pois o '#id_item' ainda não existia quando esse código correu, é preciso usar delegação de eventos.

O outro é que juntar várias linhas com #id_item vai gerar IDs duplicados, e isso é sintaxe HTML inválida.

Como resolver:

Como não podes usar IDs duplicadas sugiro mudares tudo o que é ID (nesse código HTML de cada linha) para classes, ou retirando IDs e usando name (como fiz no exemplo).

Assim podes sempre trabalhar linha a linha com jQuery usando 3 ferramentas:

  • .closest() para encontrar o topo da linha
  • .find() para encontrar um elemento no DOM descendente
  • .on() para delegar os eventos.

Assim o teu código jQuery ficaria:

$('#listas').on('change', '[name="id_item_estoque_pedido[]"]', function(e) {
  var item = this;
  var base_url = '<?php echo base_url(); ?>';
  $.getJSON(base_url + 'pedido/GetLoteByIdItem/' + this.value, function(dados) {

    if (dados.length > 0) {
      var option = '<option>Selecione o lote</option>';
      $.each(dados, function(i, obj) {
        option += '<option value="' + obj.id_lote + '">' + obj.nome_lote + ' - ' + 'Qtd: (' + obj.quantidade_garrafas_lote + ')</option>';
      })
    } else {
      option = '<option>Selecione o lote</option>';
    }
    $(item).closest('.linha').find('[name="id_lote_pedido[]"]').html(option).show();
  });
});

Assim no HTML só tens de mudar

id="linha"

para

class="linha"
1
  • 1
    Mandou bem. Agora esta funcionando.. Muito Obrigado. Commented 14/06/2017 às 19:25
0

Você só vai conseguir user o evento em algo criado depois, se for iniciado assim:

$(document).on('change','.elemento_da_interação', function(e) {

Detalhe que ids não se duplicam, use className.

1

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 .