Search jQuery

jQuery Forum

autocomplete doesnt work in dynamic input field

in Using jQuery UI • 1 year ago

i have an ajax request to take source autocomplete in dynamic field with add button but not working, pls correct my code, i dont understand..

    var counter = 1;

    $("#addrow").on("click", function () {
        var newRow = $("<tr>");
        var cols = "";
        cols += '<td><input type="text" style="width: 200px;" id="item[' + counter + ']" name="item[' + counter + ']" placeholder="Item"></td>';
        cols += '<td><input type="text" style="width: 100px;" id="harga[' + counter + ']" name="harga[' + counter + ']" placeholder="Harga"> </td>';
        cols += '<td><input type="text" style="width: 50px;" id="qty[' + counter + ']" name="qty[' + counter + ']" placeholder="Qty" onkeyup="findTotal(); findJumlah()"> </td>';
        cols += '<td><input type="text" style="width: 100px;" id="diskon[' + counter + ']" name="diskon[' + counter + ']" placeholder="Diskon"> </td>';
        cols += '<td><input type="text" id="total[' + counter + ']" name="total[' + counter + ']" placeholder="Total"></td>';
        cols += '<td><input type="button" style="width: 50px;" class="ibtnDel btn btn-md btn-danger" value="-" onclick="findJumlah()"></td>';
        newRow.append(cols);
        newRow.insertBefore("tr.isi");
        $("#item[" +counter+ "]").autocomplete({
                source: function(request, response) {
                $.ajax({
                url: "<?php echo site_url('Produk/data'); ?>",
                data: { id_barang: $("#item[" +counter+ "]").val()},
                dataType: "json",
                type: "POST",
                success: function(data){
                console.log(data);
                response(data);
                }
            });
        },
    });
        counter++;
    });

thanks for advance

Replies(15)

jakecigar

Re: autocomplete doesnt work in dynamic input field

1 year ago

Don’t create ids with brackets "[" or "]" in them. They are special characters.

JΛ̊KE

NewbsWant..

Re: Re: autocomplete doesnt work in dynamic input field

1 year ago

oh this work jake thank you but this autocomplete just only work in dynamic but doest work in first field

this my full code : https://pastebin.com/WAPHj8bw

jakecigar

Re: autocomplete doesnt work in dynamic input field

1 year ago

That would be id="item" and you never set up an autocomplete for it.

JΛ̊KE

NewbsWant..

Re: Re: autocomplete doesnt work in dynamic input field

1 year ago

sorry forget to edit i already change to id="item0" in manual write but still cant autocomplete

jakecigar

Re: autocomplete doesnt work in dynamic input field

1 year ago

OK, they you have to set up an autocomplete for id="item0".

JΛ̊KE

NewbsWant..

Re: Re: autocomplete doesnt work in dynamic input field

1 year ago

ok fixed thank you jake but i have last question if i want add on change event like this

$("#item"+counter).change(function(){
        var nmbarang = $("#item"+counter).val();
        $.ajax({
          url: '<?php echo site_url('Produk/tampil_where'); ?>',
          type: 'POST',
          dataType: 'json',
          data: {
            'nmbarang': nmbarang
          },
          success: function (barang) {
            console.log(barang);
            $("#harga"+counter).val(barang[0]['harga_barang']);
          }
        });
      });

where the code position i must add after ? because if add after this comment it doesnt work

$("#addrow").on("click", function () {
        var newRow = $("<tr>");
        var cols = "";
        cols += '<td><input type="text" style="width: 200px;" id="item' + counter + '" name="item[' + counter + ']" autocomplete="off" placeholder="Item"></td>';
        cols += '<td><input type="text" style="width: 100px;" id="harga' + counter + '" name="harga[' + counter + ']" placeholder="Harga"> </td>';
        cols += '<td><input type="text" style="width: 50px;" id="qty' + counter + '" name="qty[' + counter + ']" placeholder="Qty" onkeyup="findTotal(); findJumlah()"> </td>';
        cols += '<td><input type="text" style="width: 100px;" id="diskon' + counter + '" name="diskon[' + counter + ']" placeholder="Diskon"> </td>';
        cols += '<td><input type="text" id="total' + counter + '" name="total[' + counter + ']" placeholder="Total"></td>';
        cols += '<td><input type="button" style="width: 50px;" class="ibtnDel btn btn-md btn-danger" value="-" onclick="findJumlah()"></td>';
        newRow.append(cols);
        newRow.insertBefore("tr.isi");
        $("#item"+counter).autocomplete({
                source: function(request, response) {
                $.ajax({
                url: "<?php echo site_url('Produk/data'); ?>",
                data: { id_barang: $("#item"+counter).val()},
                dataType: "json",
                type: "POST",
                success: function(data){
                console.log(data);
                response(data);
                }
            });
        },
    });
// this -------------------------------------------------------------
        counter++;
    });

jakecigar

Re: autocomplete doesnt work in dynamic input field

1 year ago

By the time your code reaches the success, counter may have changed. And, your code won’t work.

That’s just one of the problems with using "array-like" ids.

Consider changing to…

var newRow = $("<tr>").data("counter",counter);

Then whenever you need the right counter you can code

var counter = $(this).closest("tr").data("counter");

JΛ̊KE

NewbsWant..

Re: Re: autocomplete doesnt work in dynamic input field

1 year ago

i change to

$(document).ready(function () {
    var counter = 1;

    $("#addrow").on("click", function () {
        var newRow = $("<tr>").data("counter",counter);
        var cols = "";
        cols += '<td><input type="text" style="width: 200px;" id="item' + counter + '" name="item[' + counter + ']" autocomplete="off" placeholder="Item"></td>';
        cols += '<td><input type="text" style="width: 100px;" id="harga' + counter + '" name="harga[' + counter + ']" placeholder="Harga"> </td>';
        cols += '<td><input type="text" style="width: 50px;" id="qty' + counter + '" name="qty[' + counter + ']" placeholder="Qty" onkeyup="findTotal(); findJumlah()"> </td>';
        cols += '<td><input type="text" style="width: 100px;" id="diskon' + counter + '" name="diskon[' + counter + ']" placeholder="Diskon"> </td>';
        cols += '<td><input type="text" id="total' + counter + '" name="total[' + counter + ']" placeholder="Total"></td>';
        cols += '<td><input type="button" style="width: 50px;" class="ibtnDel btn btn-md btn-danger" value="-" onclick="findJumlah()"></td>';
        newRow.append(cols);
        newRow.insertBefore("tr.isi");
        $("#item"+counter).autocomplete({
                source: function(request, response) {
                $.ajax({
                url: "<?php echo site_url('Produk/data'); ?>",
                data: { id_barang: $("#item"+counter).val()},
                dataType: "json",
                type: "POST",
                success: function(data){
                console.log(data);
                response(data);
                }
            });
        },
    });
    $("#item"+counter).change(function(){
    var nmbarang = $(this).closest("tr").data("counter");
    $.ajax({
    url: '<?php echo site_url('Produk/tampil_where'); ?>',
    type: 'POST',
    dataType: 'json',
    data: {
            'nmbarang': nmbarang
          },
    success: function (barang) {
    console.log(barang);
    $("#harga"+counter).val(barang[0]['harga_barang']);
    }
    });
    });
        counter++;
    });

    $("table.order-list").on("click", ".ibtnDel", function (event) {
        $(this).closest("tr").remove();
        counter -= 1;
    });

and check the console like this

jakecigar

Re: autocomplete doesnt work in dynamic input field

1 year ago

And consider using the autocomplete change event instead of the regular one.

JΛ̊KE

jakecigar

Re: autocomplete doesnt work in dynamic input field

1 year ago

You can’t decrement counter. If the user creates several rows, then deletes the second row, you get a row with the same counter.

$("table.order-list").on("click", ".ibtnDel", function (event) {
$(this).closest("tr").remove();
// counter -= 1;
});

JΛ̊KE

jakecigar

Re: autocomplete doesnt work in dynamic input field

1 year ago

And don’t update older comments on your posts. Just add the new comment at the end.

JΛ̊KE

NewbsWant..

Re: Re: autocomplete doesnt work in dynamic input field

1 year ago

im really sorry for my mistake -A-, but the json still blank in the dynamic field, if i use the first field its work i dont know why :/

my full code : https://pastebin.com/7F3JFSfx

jakecigar

Re: autocomplete doesnt work in dynamic input field

1 year ago

I can’t debug over 200 lines of html mixed with php in my head. Sorry.

You had it working for the dynamic rows, now it works for the static row. Try to debug it.

JΛ̊KE

NewbsWant..

Re: Re: autocomplete doesnt work in dynamic input field

1 year ago

ok jack i trying to debug it, but if i have a question again may i ask you ?? hehehehe btw thanks for your help :D

NewbsWant..

Re: Re: autocomplete doesnt work in dynamic input field

1 year ago

fixed like this thank you so much :D

    var counter = 1;

    $("#addrow").on("click", function () {
        var newRow = $("<tr>").data("counter",counter);
        var cols = "";
        cols += '<td><input type="text" style="width: 200px;" id="item' + counter + '" name="item[' + counter + ']" autocomplete="off" placeholder="Item"></td>';
        cols += '<td><input type="text" style="width: 100px;" id="harga' + counter + '" name="harga[' + counter + ']" placeholder="Harga"> </td>';
        cols += '<td><input type="text" style="width: 50px;" id="qty' + counter + '" name="qty[' + counter + ']" placeholder="Qty" onkeyup="findTotal(); findJumlah()"> </td>';
        cols += '<td><input type="text" style="width: 100px;" id="diskon' + counter + '" name="diskon[' + counter + ']" placeholder="Diskon"> </td>';
        cols += '<td><input type="text" id="total' + counter + '" name="total[' + counter + ']" placeholder="Total"></td>';
        cols += '<td><input type="button" style="width: 50px;" class="ibtnDel btn btn-md btn-danger" value="-" onclick="findJumlah()"></td>';
        newRow.append(cols);
        newRow.insertBefore("tr.isi");
        $("#item"+counter).autocomplete({
                source: function(request, response) {
                $.ajax({
                url: "<?php echo site_url('Produk/data'); ?>",
                data: { id_barang: $("#item"+counter).val()},
                dataType: "json",
                type: "POST",
                success: function(data){
                console.log(data);
                response(data);
                }
            });
        },
    });
    $("#item"+counter).change(function(){
    var nmbarang = this.value;
    $.ajax({
    url: '<?php echo site_url('Produk/tampil_where'); ?>',
    type: 'POST',
    dataType: 'json',
    data: {
            'nmbarang': nmbarang
          },
    success: function (barang) {
    var cok = $("#harga"+parseFloat(counter-1)).val(barang[0]['harga_barang']);
    console.log(cok);
    }
    });
    });
        counter++;
    });

Top Reply

Response title

Attachments

jQuery Forum

autocomplete doesnt work in dynamic input field

Replies(15)

Re: autocomplete doesnt work in dynamic input field

Re: Re: autocomplete doesnt work in dynamic input field

Re: autocomplete doesnt work in dynamic input field

Re: Re: autocomplete doesnt work in dynamic input field

Re: autocomplete doesnt work in dynamic input field

Re: Re: autocomplete doesnt work in dynamic input field

Re: autocomplete doesnt work in dynamic input field

Re: Re: autocomplete doesnt work in dynamic input field

Re: autocomplete doesnt work in dynamic input field

Re: autocomplete doesnt work in dynamic input field

Re: autocomplete doesnt work in dynamic input field

Re: Re: autocomplete doesnt work in dynamic input field

Re: autocomplete doesnt work in dynamic input field

Re: Re: autocomplete doesnt work in dynamic input field

Re: Re: autocomplete doesnt work in dynamic input field

Statistics

Tags

Actions

Related Posts