通过js动态添加gridview行中的CJuiAutocomplete

Question

Hi i am trying to create custom widget for my project. The widget includes program name and program type. For field type i have used CJuiAutoComplete. Here is my code!

$this->widget('zii.widgets.grid.CGridView', array(
    'dataProvider' => $this->productArray,
    'id' => 'gridview_add_product',
    'columns' => array(
            array(
                    'header' => 'URL',
                    'value' => 'CHtml::textField("program[$data->id][url]",$data->url,
                    array(
                    \'id\'=>\'program_url_\'.$data->id,
                    ))',
            ),
            array(
                    'header' => 'Type',
                    'value'=>'Yii::app()->controller->widget("zii.widgets.jui.CJuiAutoComplete",array(
                            "name"=>"type",
                            "attribute"=>"resolution",
                            "source"=>array("A","B","C","D","E"),
                            "value"=>$data->type,
                            ),true)',
                    'type' => 'raw',
                    'headerHtmlOptions'=>array('style'=>'width: 100px'),
            ),
            array(
                    'class' => 'CButtonColumn',
                    'headerHtmlOptions'=>array('style'=>'width: 100px'),
                    'buttons' => array(
                            'linkToModel' => array(
                                    'label' => 'Remove',
                                    'click' => "function(){
                                    removeStreamRow($(this));
                                    }",
                            ),
                    ),
            ),
    ),
 ));

Now there is add button which dynamically add new row (name field, type 'autocomplete' and remove button) in CGridView. My js script is as below.

var addProductRow = function(){
$('#gridview_product .empty').parent().remove();
$('#gridview_product tr:last').after('<tr class="odd"><td class="productData"><input id="product_url_'+ nextId + '" type="text" name="product['+ nextId +'][url]"></td><td><input name="type" id="product_'+ nextId + '_type" class = "ui-autocomplete-input" autocomplete = "off" type = "text" ><span class="ui-helper-hidden-accessible" role="status" aria-live="polite"></span></td><td class="button-column"><a class="linkToModel"title="Remove"href="#product_url_'+ nextId + '">Remove</a></td></tr>');nextId--;}

Now when i dynamically add new row through js, the field for "type" do not show AutoComplete functionality.

How could i add CJuiAutocomplete through js in the CGridview row. Please help me out.

Answer 1

After adding html block in gridview you need to bind input field for type with autocomplete event like.

$( ".ui-autocomplete-input" ).autocomplete({
    source: function(request, response){
     //you source
    }
});