我正尝试在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);
});
});
});
答案 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
]);