Adding input dynamically, jquery become not working

Question

I've been searching all over, and actually have found some of similar problem, but still can't manage to solve my problem. I'm still struggling learning jquery and still new.

Anywa, I'm trying to add dynamically an input on a table. So far, I've been able to show the adding of row with the new input text. The input text suppose to have autocomplete function. But the new dynamically added input never succeed to show the autocomplete options.

(To make it clear, I put down the code into JSFiddle, here's the link:

http://jsfiddle.net/yodann/6t74T/637/ )

Here is my code:

<?php
                            echo '<tr class="row_odd"><td class="ui-widget">';
                            echo form_input(array('id' => 'aff[]', 'name' => 'aff', 'value' => '',
                                    'class' => 'form-control auto_form', 'placeholder' => 'Masukkan nama tempat',
                                    'style' => 'width:100%'));
                            echo '</td><td><img src="'.getfrontendlink('images/del_button.png').
                                 '" width="24px" height="auto"></td></tr>';
?>

function addRow() {
    var count = $('#aff_table tr').length;
    var tx = count % 2 == 0 ? 'row_even' : 'row_odd';
    $('#aff_table tr:last').after('<tr class="' + tx + '">' +
        '<td class="ui-widget">'+
        '</td><td><img src="<?=getfrontendlink('images/del_button.png')?>" width="24px" height="auto"></td></tr>');

    var dat = $('#aff_table tr:last').children('td.ui-widget');
    $("input.auto_form:last").clone(true).appendTo(dat);
    $("input.auto_form:last").val("");           
}

<?php 
        if ($datas != '') {
            $i = 0;
            $php_array = array();
            foreach ($datas->result_array() as $row):
                $php_array[$i++] = ($row['pp_id'].'>>'.$row['pp_name'].', '.
                    (strlen($row['address']) > 25 ? substr($row['address'],0,25) : $row['address']).', '.
                    $row['city_name'].', '.$row['province_name']);
            endforeach;

            $js_array = json_encode($php_array);
            echo "var availableTags = ". $js_array . ";\n";
        }
?>

$( ".auto_form" ).autocomplete({
    source: availableTags
});

Hi, it seems like you are mixing Javascript and PHP code together. If that's the case, then your code wouldn't work. If you are not doing willingly, then can you add a more precise code so I can help you debug it. — That Guy
– That Guy, Commented Apr 3, 2015 at 19:03
why so? because the initial input is working with fine. only the adding later on during runtime which never able to show the autocomplete option. — yodann
– yodann, Commented Apr 3, 2015 at 19:09
Hi Dubem, sorry to get u wrong. i've put up the code on jsfiddle. thank u. jsfiddle.net/yodann/6t74T/637 — yodann
– yodann, Commented Apr 3, 2015 at 19:38
I think your question is answered here stackoverflow.com/questions/24656589/… — tsuensiu
– tsuensiu, Commented Apr 3, 2015 at 20:06

TesiaMedia · Accepted Answer · 2015-04-03 19:51:01Z

1

If I properly understood the problem: At the end of function addRow() you should init .autocomplete property again. If you instantiate auto-complete once, then after adding dynamic input field jquery does not automatically add the needed property.

function addRow() {
    var count = $('#aff_table tr').length;
    var tx = count % 2 == 0 ? 'row_even' : 'row_odd';
    $('#aff_table tr:last').after('<tr class="' + tx + '">' +
        '<td class="ui-widget">'+
        '</td><td><img src="<?=getfrontendlink('images/del_button.png')?>" width="24px" height="auto"></td></tr>');

    var dat = $('#aff_table tr:last').children('td.ui-widget');
    $("input.auto_form:last").clone(true).appendTo(dat);
    $("input.auto_form:last").val("");  

    $(".auto_form").autocomplete({source: availableTags});      
}

tried changing clone to simple append: http://jsfiddle.net/rk27xbce/

edited Apr 3, 2015 at 19:51

answered Apr 3, 2015 at 19:03

TesiaMedia

413 bronze badges

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

3 Comments

yodann Over a year ago

no, it doesn't work. I did try this before, and no luck.

TesiaMedia Over a year ago

i tried playing with your jsfiddle, and main problem is with clone, because you get same atrributes (name and id), and jquery needs unique id to work properly.

yodann Over a year ago

TesiaMedia, thanks a lot for your help. I finnaly solved the issue. Two thing to note here, is to put inside document.ready(function) and like you said, the jquery needs a unique id. :)

Collectives™ on Stack Overflow

Adding input dynamically, jquery become not working

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