Using yii2 \ jui widgets on dynamically created files

Question

I am writing a project for my research in yii2. I have a problem displaying widgets.

I have a tabbed form that describes an invoice. One of the inputs is connected to the DataPicker with yii2 \ jui, the other input is related to autocomplete with yii2 \ jui. Therefore, for this, the code is as follows:

$contractors = app\models\Contractor::find()
->select('contractorId as id, contractorShortName as label, contractorShortName as value')
->asArray()
->all();
/.../

<tr>
    <td>
        <?= DatePicker::widget([
            'name' => 'costBillDate[]',
            'language' => 'pl', 
            'dateFormat' => 'yyyy-MM-dd'
        ]) ?>
    </td>
    <td><?= AutoComplete::widget(
            'clientOptions' =>[
            'source' => $contractors,
            'autofill' => 'true',
            'select' => new JsExpression("function( event, ui ) {
                        $($(this).parent().find('input[name=\"contractorId[]\"]')).val(ui.item.id);
                        }")
        ],]) ?>
        <?= Html::hiddenInput('contractorId[]', "", []) ?>
    </td>
//other inputs
    <td class="text-center delete"><div class="glyphicon glyphicon-trash"></div></td>
</tr>

The above code is simple and basically works. Therefore, under the table, I added a button that replicates the row from the table to insert more information about the documents into the database. And for each line, I add a script to delete this line.

//Dynamically creation of a row
$this->registerJs('$("#add-bill").on("click",function(){'
    . '$("#costs-bills").append(\''
    . '<tr>'
    . Html::tag("td", DatePicker::widget([
        'name' => 'costBillDate[]',
        'language' => 'pl',
        'dateFormat' => 'yyyy-MM-dd'
     ]))
    . '<td>'
    . AutoComplete::widget([
        'clientOptions' =>[
            'source' => $contractors,
            'autofill' => 'true',
            'select' => new JsExpression("function( event, ui ) {
                $($(this).parent().find('input[name=\"contractorId[]\"]')).val(ui.item.id);
                }")
            ],])
            . Html::hiddenInput('contractorId[]', "", [])
            . '</td>'
            . '<td class="text-center delete"><div class="glyphicon glyphicon-trash"></div></td>'
            . '</tr>'
            . '\');'

             //binding function to created span
            . '$(".delete").on("click",function(){
            var $killrow = $(this).parent("tr");
            $killrow.addClass("danger");
            $killrow.fadeOut(2000, function(){
            $(this).remove();
            });})'
            . '})
');

//Binding delete function to span for static row
$this->registerJs('$(".delete").on("click",function(){
        var $killrow = $(this).parent("tr");
        $killrow.addClass("danger");
        $killrow.fadeOut(2000, function(){
        $(this).remove();
        });})
');

#add-bill is the id of the button.

#costs-bills is the identifier of the table in which I have a form.

The effect of the above code: - I can add rows to the table; - I can delete the selected rows from the table.

: DataPicker AutoComplete , ( ) . .

, .

Answer 1

. JS:

$this->registerJs('
    $("#add-bill").on("click", function(){
        $("#costs-bills").append(\'<tr>'
        . Html::tag("td", Html::textInput("costBillDate[]","", ['class' => 'dp']))
        . '<td>'
        . Html::textInput("", "", ['class' => 'ac'])
        . Html::hiddenInput("contractorId[]")
        . '</td>'
        . Html::tag("td", Html::tag("div", "", ['class' => 'glyphicon glyphicon-trash']) , ['class' => 'text-center delete'])
        . '</tr>\');
        $(".delete").on("click", function(){
            var $killrow = $(this).parent("tr");
            $killrow.addClass("danger");
            $killrow.fadeOut(2000, function(){
                $(this).remove();
            });
        });

        $("#costs-bills .dp").datepicker();
        $("#costs-bills .ac").autocomplete(
        {
            source:'
            . json_encode($contractors) . ',
            select: function(event, ui) {
                $($(this).parent().find(\'input[name="contractorId[]"]\')).val(ui.item.id);
            }
        });
    });

    $(".delete").on("click",function(){
        var $killrow = $(this).parent("tr");
        $killrow.addClass("danger");
        $killrow.fadeOut(2000, function(){
        $(this).remove();
        });
    })'
);

EDIT:
. , yii2\jui (document).ready(). , ILLEGAL pointer JS. yii2\jui - jQuery, .

, JS script #add-bill onClick event, ware, yii2\jui calsses ( dp DataPicker, ac ). DOM, datatpicker() autocomplete() jQuery.

, , , . ,