CODEWITHSUNDEEP
javascriptjqueryhtmlautocomplete
Chad Priddle
Chad Priddle

Reputation: 672

Javascript add row with increment id with autocomplete

I have a add new row script where it clones the entire "tr" increments the id + 1 and then clears the values. All works great but the goal is to have one of the text inputs be tied to jquery autocomplete function.

Javascript:

$("#add-row").click(function(){
    var lastRow = $('#findings-table tbody>tr:last');
    var cloned = lastRow.clone();
    cloned.find('input, select, textarea').each(function () {
        var id = $(this).attr('id');
        var regIdMatch = /^(.+)(\d+)$/; 
        var aIdParts = id.match(regIdMatch);
        var newId = aIdParts[1] + (parseInt(aIdParts[2], 10) + 1);

        $(this).attr('id', newId);
    });
    cloned.find("input[type='text']").val('');
    cloned.find("textarea").val('');
    cloned.insertAfter(lastRow);        
});


$(function() {
         $("#code1").autocomplete({
            source: "/search_ajax.php",
            minLength: 1,
            select: function(event, ui) {
                $('#code1').val(ui.item.id);
                //$('#descrip2').val(ui.item.notes);
            }
        });

        $("#code2").autocomplete({
            source: "/search_ajax.php",
            minLength: 1,
            select: function(event, ui) {
                $('#code2').val(ui.item.id);
            }
        });

        $("#code3").autocomplete({
            source: "/search_ajax.php",
            minLength: 1,
            select: function(event, ui) {
                $('#code3').val(ui.item.id);
            }
        });

    });

HTML:

<table id="findings-table" class="table table-striped table-hover">
    <tr>
         <th>Code</th>
         <th>Description</th>
    </tr>
    <tbody>
    <tr>
         <td><input style="width: 70px;" type="text" id="code1" name="code[]" class="form-control"></td>
         <td><textarea cols="30" rows="3" id="descrip1" name="descrip[]"></textarea></td>
    </tr>
    </tbody>
</table>

When I click add a row it duplicates correctly and then I get id="code2" then id="code3", ect.

My issue is the code2 id and code3 id should populate with autocomplete drop down info from search_ajax.php. The code1 id works correctly. I am assuming it has something to do with code1 id is already there on page load but the added rows aren't? Any ideas?

Upvotes: 1

Views: 1385

Answers (1)

ak_
ak_

Reputation: 2815

You can add the bindings dynamically at the end of your $("#add-row").click() function. Something like this should work:

$("#add-row").click(function(){
    var lastRow = $('#findings-table tbody>tr:last');
    var cloned = lastRow.clone();
    cloned.find('input, select, textarea').each(function () {
        var id = $(this).attr('id');
        var regIdMatch = /^(.+)(\d+)$/; 
        var aIdParts = id.match(regIdMatch);
        index = (parseInt(aIdParts[2], 10) + 1);
        var newId = aIdParts[1] + index;
        $(this).attr('id', newId);        
    });
    cloned.find("input[type='text']").val('');
    cloned.find("textarea").val('');
    cloned.insertAfter(lastRow);    

    addBinding(index);


});



function addBinding(index) {
    $("#code" + index).autocomplete({
        source: "/search_ajax.php",
        minLength: 1,
        select: function(event, ui) {
            $(this).val(ui.item.id);
        }
    });
}


addBinding(1); //for the element that already exsists

Here it is in a JS Fiddle example: https://jsfiddle.net/igor_9000/me8bqqx2/2/

Hope that helps!

Upvotes: 2

Related Questions