Auto complete function is not working in dynamic data input table rows

Question

I have created a dynamic data input table. And I have added auto complete function to it which working fine.But the problem is if I added new row to my dynamic table auto complete function is not working on that row.How to solve this?

********HTML********

 <table class="table table-bordered" id="curd_table">
            <tr>
                <th width="15%">User ID</th>
                <th width="20%">Name</th>
                <th width="20%">NIC</th>
                <th width="20%">Amount</th>
                <th width="25%">Pay date (YYYY-MM-DD)</th>
                <th></th>
            </tr>
            <tr>
                <td contenteditable="true" class="uid " name="uid" id="uidr"></td>
                <td contenteditable="true" class="name " name="name" id="namer"></td>
                <td contenteditable="true" class="nic" name="nic" id="nicr"></td>
                <td contenteditable="true" class="amount"></td>
                <td contenteditable="true" class="paydate"></td>
                <td></td>
            </tr>
        </table>

**** JS functions****

$(document).ready(function(){
        var count=1;
        $('#add').click(function(){
             count=count+1;
             var html_code ="<tr id='row"+count+"'>";
             html_code +="<td contenteditable='true' class='uid' name='uid' id='uidr'></td>";
             html_code +="<td contenteditable='true' class='name' name='name' id='namer'></td>";
             html_code +="<td contenteditable='true' class='nic' name='nic' id='nicr'></td>";
             html_code +="<td contenteditable='true' class='amount'></td>";
             html_code +="<td contenteditable='true' class='paydate'></td>";
             html_code +="<td><button type='button' name='remove' data-row='row"+count+"' class='btn btn-danger btn-xs remove'>-</button></td>";
             html_code +="</tr>";
             $('#curd_table').append(html_code);

        });


$('#uidr').autocomplete({
            source: function( request, response ) {
                $.ajax({
                    url : '../control/autoComp.php',
                    dataType: "json",
                    method: 'POST',
                    data: {
                        id_startsWith: request.term,
                        type: 'pay_table',
                        row_num : 1
                    },
                    success: function( data ) {
                        response( $.map( data, function( item ) {
                        var code = item.split("|");
                        return {
                            label: code[0],
                            value: code[0],
                            data : item
                            }
                        }));
                    }
                });
            },
            autoFocus: true,
            minLength: 0,
            select: function(event, ui ) {
            var names = ui.item.data.split("|");
            $('#namer').text(names[1]);
            $('#nicr').text(names[2]);
            }
    });
});

auto complete not working on marked with red arrows.Those are dynamically added rows.

I tried using class.But problem is same.only working for 1st row.@Mate — Manusha
– Manusha, Commented Jun 22, 2017 at 1:34
click() function is for adding new row. Sir I added the picture please see it.@Mate — Manusha
– Manusha, Commented Jun 22, 2017 at 2:09
ok, Then you need check how to bind .autocomplete() with dynamically added elements. Check : stackoverflow.com/questions/33410824/… , stackoverflow.com/questions/2663573/… , stackoverflow.com/questions/6670918/… — Mate
– Mate, Commented Jun 22, 2017 at 2:13

dolgom · Accepted Answer · 2017-06-22 02:30:29Z

1

You should change your jquery selector to select class, not id(unique value).

and you missed '})' closing '$(document).ready(function(){'

EDIT: If you add the component dynamically, you should use on() function to bind the event to the newly added component.

$(document).on('autocomplete','.uid',function(){
        source: function( request, response ) {
            $.ajax({
                url : '../control/autoComp.php',
                dataType: "json",
                method: 'POST',
                data: {
                    id_startsWith: request.term,
                    type: 'pay_table',
                    row_num : 1
                },
                success: function( data ) {
                    response( $.map( data, function( item ) {
                    var code = item.split("|");
                    return {
                        label: code[0],
                        value: code[0],
                        data : item
                        }
                    }));
                }
            });
        },
        autoFocus: true,
        minLength: 0,
        select: function(event, ui ) {
            var names = ui.item.data.split("|");
            $(this).nextAll('.name').text(names[1]);//or just next()
            $(this).nextAll('.nic').text(names[2]);//or just next().next()
        }
});

edited Jun 22, 2017 at 2:30

answered Jun 22, 2017 at 1:36

dolgom

6412 gold badges12 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Manusha Over a year ago

Sorry missing closing function.I have missed it from pasting the code. I tried your solution.but not working. @dolgom

dolgom Over a year ago

I editted. The name of class was wrong.(uidr -> uid)

Manusha Over a year ago

No sir i noticed that .But not solving my problem.I think you didn't got the my problem.So I added picture please check it.@dolgom

Collectives™ on Stack Overflow

Auto complete function is not working in dynamic data input table rows

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related