上载小部件不适用于javascript-动态表单+ Yii2入门套件

时间:2019-04-14 09:52:07

标签: javascript yii2

我正在使用yii2-starter-kit的小部件(trntv \ filekit \ widget \ Upload),实现了动态表单(wbraganca \ dynamicform \ DynamicFormWidget)的使用,问题是upload窗口小部件仅在第一个元素上有效,添加其他项目时无法正确加载,请尝试使用javascript,但会发生以下错误。

_form

use wbraganca\dynamicform\DynamicFormWidget;
use trntv\filekit\widget\Upload;

<?php
    $form = ActiveForm::begin([
                'id' => 'dynamic-form',
                "enableAjaxValidation" => true,
            ]);
    ?>
    <div class="row">
        <div class="col-sm-6">
            <?=$form->field($model, 'title')->textInput(['maxlength' => true])->input('title', ['placeholder' => "Title Evaluation"]) ?>
            <div class="row">
                <div class="col-sm-6">
                    <?=
                    $form->field($model, 'date_start')->widget(DateTimePicker::className(), [
                        'options' => ['placeholder' => '-- Select Date --'],
                        'pluginOptions' => [
                            'language' => 'fr',
                            'autoclose' => true,
                            'calendarWeeks' => true,
                            'daysOfWeekDisabled' => [0, 5],
                            'todayHighlight' => true,
                            'todayBtn' => true,
                        ]
                    ]);
                    ?>
                </div>
                <div class="col-sm-6">
                    <?=
                    $form->field($model, 'date_end')->widget(DateTimePicker::className(), [
                        'options' => ['placeholder' => '-- Select Date --'],
                        'pluginOptions' => [
                            'language' => 'fr',
                            'autoclose' => true,
                        ]
                    ]);
                    ?>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <?=
                    $form->field($model, "type_evaluation_id")->dropDownList(
                            ArrayHelper::map(EvalTipo::find()->all(), 'id', 'description'), [
                        'prompt' => '-- Select Type --'
                    ]);
                    ?> 
                </div>
                <div class="col-sm-3">
                    <?=
                    $form->field($model, 'duration')->widget(TimePicker::className(), [
                        'pluginOptions' => [
                            'showSeconds' => true,
                            'showMeridian' => false,
                            'minuteStep' => 1,
                            'secondStep' => 5,
                        ]
                    ]);
                    ?>
                </div>
                <div class="col-sm-3">
                    <?=$form->field($model, 'qualification')->textInput(['placeholder' => 'Qualification']) ?>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <?=$form->field($model, 'description')->textarea(['rows' => 9, 'placeholder' => 'Enter evaluation description']) ?>
        </div>
    </div>
    <div class="content">
        <div class="box box-success box-solid">
            <div class="box-header with-border">
                <h3 class="box-title">Questions Evaluation</h3>
            </div>
            <div class="panel-body">
                <?php
                DynamicFormWidget::begin([
                    'widgetContainer' => 'dynamicform_wrapper', // required: only alphanumeric characters plus "_" [A-Za-z0-9_]
                    'widgetBody' => '.container-items', // required: css class selector
                    'widgetItem' => '.item', // required: css class
                    'limit' => 30, // the maximum times, an element can be cloned (default 999)
                    'min' => 1, // 0 or 1 (default 1)
                    'insertButton' => '.add-item', // css class
                    'deleteButton' => '.remove-item', // css class
                    'model' => $modelQuestion[0],
                    'formId' => 'dynamic-form',
                    'formFields' => [
                        'item',
                        'puntuacion',
                    ],
                ]);
                ?>
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>Question</th>
                            <th style="width: 500px;">Options</th>
                            <th class="text-center" style="width: 90px;">
                                <button type="button" class="add-item btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span></button>
                            </th>
                        </tr>
                    </thead>
                    <tbody class="container-items">
                        <?php foreach( $modelQuestion as $indexQuestion => $modelQuestions ): ?>
                            <tr class="item">
                                <td class="vcenter">
                                    <table class="table table-bordered table-striped">
                                        <td class="vcenter">1.</td>
                                        <td class="vcenter">
                                            <?php
                                            // necessary for update action.
                                            if( !$modelQuestions->isNewRecord ){
                                                echo Html::activeHiddenInput($modelQuestions, "[{$indexQuestion}]id");
                                            }
                                            ?>
                                            <?=
                                            $form->field($modelQuestion, "[{$indexQuestion}]question")->dropDownList(
                                                    ArrayHelper::map(QuestType::find()->all(), 'id', 'description'), [
                                                'prompt' => '-- Select Question --'
                                            ]);
                                            ?>
                                            <?=$form->field($modelQuestions, "[{$indexQuestion}]question")->label(false)->textInput(['maxlength' => true, 'placeholder' => 'Title question']) ?>                                           <?=
                                            $form->field($modelQuestions, "[{$indexQuestion}]score")->label(false)->widget(MaskedInput::className(), [
                                                'clientOptions' => [
                                                    'alias' => 'decimal',
                                                    'groupSeparator' => '.',
                                                    'digits' => 0,
                                                    'autoGroup' => true,
                                                    'removeMaskOnSubmit' => true,
                                                    'rightAlign' => false,
                                                ],
                                                'options' => [
                                                    'class' => 'form-control',
                                                    'maxlength' => true,
                                                ]
                                            ])
                                            ?><?=
                                            $form->field($modelQuestions, "[{$indexQuestion}]image")->label(false)->widget(Upload::className(), [
                                                'url' => [
                                                    '/file/storage/upload',
                                                ],
                                                'maxFileSize' => 
                                                    5000000,
                                            ])
                                            ?><?=$form->field($modelQuestions, "[{$indexQuestion}]justified ")->checkbox(array('label' => '', 'labelOptions' => array('style' => 'padding:5px;'),))->label('You want a response justified ?'); ?>
                                        </td>
                                    </table>
                                </td>
                                <td>
                                    <?=
                                    $this->render('_form-opc', [
                                        'form' => $form,
                                        'modelQuestion' => $indexQuestion,
                                        'modelsOpc' => $modelsOpc[$indexQuestion],
                                    ])
                                    ?>
                                </td>
                                <td class="text-center vcenter" style="width: 90px; verti">
                                    <button type="button" class="remove-item btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus"></span></button>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
                <?php DynamicFormWidget::end(); ?>
            </div>
        </div>
    </div>
    <div class="form-group">
        <?=Html::submitButton($model->isNewRecord ? '<span class="fa fa-plus"></span> Create' : '<span class="fa fa-edit"></span>  Update', ['class' => 'btn btn-primary']) ?>
    </div>
    <?php ActiveForm::end(); ?>

以动态形式使用afterinstert事件。

我尝试做

$js =<<< JS
    $(".dynamicform_wrapper").on("afterInsert", function(e, item) {

        $(item).find("input[name*='[image]']").yiiUploadKit([
            "url": ["/file/storage/upload"],
            "maxFileSize":5000000,
        ]);
    });
JS;
$this->registerJs($js, \yii\web\View::POS_LOAD);

错误:

problem loading image

及之后

$js =<<< JS
        $(".dynamicform_wrapper").on("afterInsert", function(e, item) {
           $(item).find("input[name*='[image]']").each(function(key, elem) {
             $(elem) .yiiUploadKit({
                "url": ["/file/storage/upload"],
                "maxFileSize":5000000,
            });
         });
 });
    JS;
    $this->registerJs($js, \yii\web\View::POS_LOAD);

但是我仍然有同样的问题。请,他们可以建议我如何解决此问题。谢谢。

0 个答案:

没有答案