CODEWITHSUNDEEP
phpjavascript
user1749035
user1749035

Reputation: 21

Autocomplete is not working on Dynamically Created Rows

I want to add rows dynamically all rows must have unique id and auto suggest here my code. Unfortunately its not working.

i have following results

  1. Dynamically add rows.
  2. Autosuggest for all test box dynamically added.

  3. unique id for all dynamically added elements.

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

$('#itemCode_1').autocomplete({
source: 'data/item-data.php',
minLength: 1,
select: function(event, ui) {
    var $itemrow = $(this).closest('tr');

            $itemrow.find('#itemCode_1').val(ui.item.itemCode);
            $itemrow.find('#itemDesc_1').val(ui.item.itemDesc);
            $itemrow.find('#itemPrice_1').val(ui.item.itemPrice);


            $('#itemQty_1').focus();

    return false;
}

}).data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
    .data( "item.autocomplete", item )
    .append( "<a>" + item.itemCode + " - " + item.itemDesc + "</a>" )
    .appendTo( ul );
};



$('#addRow').click(function(){
    currentItem++;
    var strToAdd = '<tr class="item-row"><td></td><td><input name="itemCode[]" value="" class="tInput" id="itemCode_'+currentItem+'" tabindex="1"/> </td><td><input name="itemDesc[]" value="" class="tInput" id="itemDesc_'+currentItem+'"  readonly="readonly" /></td><td><input name="itemQty[]" value="" class="tInput" id="itemQty_'+currentItem+'" onChange="calc('+currentItem+')" tabindex="2"/></td><td><input name="itemPrice[]" value="" class="tInput" id="itemPrice_'+currentItem+'" onChange="calc('+currentItem+')"/> </td><td> <input type="text" name="sub_total" id="sub_total_'+currentItem+'"></td></tr>';

    $('#itemsTable').append(strToAdd);



});
var bindfield=$('itemCode_'+currentItem+'');
    var itemdes=$('#itemDesc_'+currentItem+'');
    var itempr=$('#itemPrice_'+currentItem+'');
    var itemqty=$('#itemQty_'+currentItem+'');
bindfield.each(function(){
    $(this).autocomplete({
    source: 'data/item-data.php',
    minLength: 1,
    select: function( event, ui ) {             
         var $itemrow = $(this).closest('tr');

            $itemrow.find(bindfield).val(ui.item.itemCode);
            $itemrow.find(itemdes).val(ui.item.itemDesc);
            $itemrow.find(itempr).val(ui.item.itemPrice);


            $(itemqty).focus();

    return false;
    }
});
    })
$('#itemCode').focus(function(){
window.onbeforeunload = function(){ return "You haven't saved your data.  Are you sure you want to leave this page without saving first?"; };
});

});

Upvotes: 2

Views: 1098

Answers (2)

Sivagopal Manpragada
Sivagopal Manpragada

Reputation: 1634

jQuery(document).ready(function($){
    var counter =2;
    var count=2;
    $("#addmember").click(function () {     
        $('#member').append('<input type="text" name="member' +counter+ '" id="member' + counter + '">');
        counter++;
        jQuery("#member" +count+ "").autocomplete('Your Url', {
            multiple: false,
            matchContains: true,
            width: 180,
            selectFirst: true,
        });
        jQuery("#member" +count+ "").result(function(event, data, formatted) {

            count++;
            }
        });
    });
});

this is in header part and in body

<input name="member1" id="member1" type="text" />
<div id="member"></div>

Upvotes: 0

Manimaran
Manimaran

Reputation: 76

You can give the class name instead of giving the ID, by giving so the autocomplete is applied for all the elements having the Specified Class name..In your code above you can give

$('.CLASSNAME).autocomplete({ });

instead of

$('#itemCode_1').autocomplete({ });

Give the below code for the dynamically created elements to work.

$('.CLASSNAME').live('keydown.autocomplete', function() {

       // Write your code to initiate the autocomplete

});

Make the same class name for the dynamically created elements... Hope this will work try this...

Upvotes: 1

Related Questions