模态中的Yii2加载视图无法正常工作

时间:2017-09-18 10:58:18

标签: twitter-bootstrap yii2

我正尝试在a代码点击上以模态形式加载我的观点。但是对于我的不幸,模态形式仍然是空的。我正在研究Yii2 MVC框架。是否有可能以我尝试的方式或我在聋街上进行?到目前为止我写的是: 控制器动作:

public function actionInquiry(){
        $model = new Inquiry();
        $id = (int)$_GET['id'];
        $product = Product::findOne($id);

        return $this->render('inquiry', [
            'model' => $model,
            'product' => $product
        ]);
    }

第一个视图的一部分,其中模态窗体的按钮是:

echo '<div class="col-sm-4">
                                                    <div class="lineheight32">
                                                        <a class="btn-bg modalButton" href="/'.$lang->url.'/'.$inquiryPage->url.'?id='.$product->id.'">'.Yii::t('app', 'app.Make inquiry').'</a>
                                                    </div>';
                                                    \yii\bootstrap\Modal::begin([
                                                            'id' => 'modal',
                                                            'size' => 'modal-lg'
                                                    ]);
                                                    echo '<div id="modalContent>"></div>';
                                                    \yii\bootstrap\Modal::end();
                                            echo '<div>

我的观点,假设要加载到模态窗口中:

<?php

use kartik\file\FileInput;
use kartik\helpers\Html;

?>
<div id="inquiry-page">
    <div class="height50"></div>
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <div class="col-sm-12">
                    <h2 class="text-center"><span class="inquiry-heading"><?= Yii::t('app', 'app.Inquiry') ?></span></h2>
                </div>
                <div class="col-sm-12 height50"></div>
                <div class="col-sm-12 text-right">
                    <img src="<?= $product->getProductImg() ?>" alt="<?= $product->title ?>">
                </div>
            </div>
            <div class="col-sm-8 grey-bg right-part-inquiry">
                <div class="col-sm-12">
                    <div class="x-mark">
                        <a href=""><img src="<?= Yii::$app->urlManagerFrontend->baseUrl ?>/images/delete-icon.png" alt="delete"></a>
                    </div>
                </div>
                <div class="col-sm-12 height50"></div>
                <?php $form = \kartik\form\ActiveForm::begin([
                        'method' => 'post',
                        'fieldConfig' => [
                        ]
                ]) ?>

                <div class="row">
                    <div class="col-sm-6">
                        <?= $form->field($model, 'product_name')->textInput(['value' => $product->title ]) ?>
                    </div>
                    <div class="col-sm-6">
                        <?= $form->field($model, 'country')->textInput() ?>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <?= $form->field($model, 'name')->textInput() ?>
                    </div>
                    <div class="col-sm-6">
                        <?= $form->field($model, 'city')->textInput() ?>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <?= $form->field($model, 'surname')->textInput() ?>
                    </div>
                    <div class="col-sm-6">
                        <?= $form->field($model, 'email')->textInput() ?>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <?= $form->field($model, 'company')->textInput() ?>
                    </div>
                    <div class="col-sm-6">
                        <?= $form->field($model, 'vat_number')->textInput() ?>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <?= $form->field($model, 'phone')->textInput() ?>
                    </div>
                    <div class="col-sm-6">
                        <div class="col-sm-6 padding0">
                            <?php
                            echo $form->field($model, 'imageFiles[]')->widget(FileInput::classname(), [
                                'options' => [
                                    'multiple' => false,
                                    'disabled' => (Yii::$app->params['numberPubPhotos'] == 0) ? true : false,
                                ],
                                'pluginOptions' => [
                                    'allowedFileExtensions'=> Yii::$app->params['allowedProductFileExtensions'],
                                    'maxFileCount' => Yii::$app->params['numberPubPhotos'],
                                ],
                            ]);
                            ?>
                        </div>
                        <div class="col-sm-6 padding0"></div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <?= $form->field($model, 'message')->textarea(['rows' => 5]) ?>
                    </div>
                </div>

                <?php \kartik\form\ActiveForm::end() ?>
            </div>
        </div>
    </div>
</div>

最后我的js:

$(function () {
        $('.modalButton').on('click', function () {
            $.get($(this).attr('href'), function (data) {
                $('#modal').modal('show').find('#modalContent').html(data);
            });        
        });
    });

2 个答案:

答案 0 :(得分:1)

你选择了正确的方法,但我骄傲你,根据yii2标准做一些重构来重构你的代码:

1)控制器中的som特定方法,出于您的目的:renderAjax(),因此您在控制器中的操作将是:

public function actionInquiry(){
    //set response is json
    Yii::$app->response->format = Response::FORMAT_JSON;
    $model = new Inquiry();
    //use POST and default yii2 method for secure to get id
    $id = Yii::$app->request->post('id');
    $product = Product::findOne($id);
    //use renderAjax for transfer to view your modal
    return $this->renderAjax('inquiry', [
        'model' => $model,
        'product' => $product
    ]);
}

2)第一个视图的一部分,其中模态形式的按钮将是:

echo '<div class="col-sm-4">';
       echo '<div class="lineheight32">'
//Heare use yii\helpers\Html for best code style
//And data attribute from HTML5 for save data 
echo Html::a(Yii::t('app', 'app.Make inquiry'), "javascript:void(0);",
[
    'class' => "btn-bg modalButton", 
    "data-url" => "/$lang->url/$inquiryPage->url", 
    "data-product_id" => $product->id]);
echo '</div>';
\yii\bootstrap\Modal::begin(['id' => 'modal','size' => 'modal-lg']);
echo '<div id="modalContent>"></div>';
\yii\bootstrap\Modal::end();
echo '</div>';

3)没有变化的模态视图。

4)你的js将是:

$(function () {
        $('.modalButton').on('click', function () {
            $.ajax({
                type: "POST",
                url: $(this).data('url'),
                data: {'id': $(this).data('product_id')},
                success: function (data) {  
 $('#modal').modal('show').find('#modalContent').html(data);
                }
            });
        });
    });

答案 1 :(得分:0)

只需替换

        return $this->render('inquiry', [
            'model' => $model,
            'product' => $product
        ]);

        return $this->renderAjax('inquiry', [
            'model' => $model,
            'product' => $product
        ]);