使用yii2中的模态创建表单输入很奇怪

Question

我已尝试使用模态创建表单输入。当我在浏览器中实现成功。但是，当我在文本字段中测试验证时，使用模态重定向到其他页面的insted表单输入。有关详细信息，您可以在下面看到。

当我实施。

测试验证重定向到另一个页面。 qazxsw poi

控制器代码

代码create.php在视图中

 public function actionCreate()
    {
        $model = new Donatur();
        if ($model->load(Yii::$app->request->post()) && $model->save()) {
                Yii::$app->session->setFlash('success', 'Data berhasil disimpan!');
                return $this->redirect(['index']);
                return $this->refresh();
            } else {
                if (Yii::$app->request->isAjax) {
                    return $this->renderAjax('create', ['model' => $model]);
                }
                else{
                    return $this->render('create', ['model' => $model]);
                }
            }  
    }

代码index.php在视图中

<?php

use yii\helpers\Html;
use yii\bootstrap\ActiveForm;
use yii\widgets\Pjax;
use yii\bootstrap\Modal;
use yii\helpers\Url;
use yii\db\ActiveRecord;

/* @var $this yii\web\View */
/* @var $model app\models\Donatur */
?>

<h2 align="center">Form Donatur</h2>

<?php $form = ActiveForm::begin(['layout' => 'horizontal',
    'fieldConfig' => [
        'template' => "{label}\n{beginWrapper}\n{input}\n{hint}\n{error}\n{endWrapper}",
            'horizontalCssClasses' => [
            'label' => 'col-sm-4',
            'offset' => 'col-sm-offset-4',
            'wrapper' => 'col-sm-8',
            'error' => '',
            'hint' => '',
            'button' => 'col-sm-4'
        ],
    ],
    ]); ?>

<?= $form->field($model, 'kode_donatur')->textInput(['readonly' => true, 'style'=>'width:100px']) ?>
<?= $form->field($model, 'nama_donatur')->textInput(['style'=>'width:350px']) ?>
<?= $form->field($model, 'alamat')->textArea(['rows' => 3, 'style'=>'width:350px']) ?>
<?= $form->field($model, 'telepon')->textInput(['style'=>'width:300px']) ?>
<div class="form-group">
    <div class="col-sm-offset-4">
<?= Html::submitButton('Simpan', ['class'=> 'btn btn-primary']) ?>

<?php
echo "&nbsp";
echo "&nbsp"; 
echo Html::a('Keluar', ['index'],[
	'class'=>'btn btn-success',
	'onclick' =>'$("#donaturModal").modal("hide");
	return false;'
	]);
?>
    </div>
</div>
<?php ActiveForm::end();?>

代码AppAsset.php

<?php \yii\widgets\Pjax::begin(['timeout' => false, 'id' => 'pjax-gridview']); ?>

<?php
use yii\helpers\Html;
use yii\grid\GridView;
use yii\widgets\Pjax;
use yii\bootstrap\Modal;
use yii\helpers\Url;

/* @var $this yii\web\View */
/* @var $searchModel app\models\SearchDonatur */
/* @var $dataProvider yii\data\ActiveDataProvider */

$this->title = 'Data Donatur';
?>

<?php if (Yii::$app->session->hasFlash('success')): ?>
  <div class="alert alert-success alert-dismissable">
  <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
  <h4><i class="icon fa fa-check"></i>Informasi!</h4>
  <?= Yii::$app->session->getFlash('success') ?>
</div>
<?php endif; ?>


<?php if (Yii::$app->session->hasFlash('delete')): ?>
  <div class="alert alert-success alert-dismissable">
  <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
  <h4><i class="icon fa fa-check"></i>Informasi!</h4>
  <?= Yii::$app->session->getFlash('delete') ?>
  </div>
<?php endif; ?>


<div class="donatur-index">
    
    <?php Pjax::begin(['timeout'=>false,'id'=>'pjax-gridview']); ?>
        
    <h1><?= Html::encode($this->title) ?></h1>
    <?php // echo $this->render('_search', ['model' => $searchModel]); ?>

    <p>
       <?= Html::button('Tambah Donatur', ['value'=>Url::to('create'),'class' => 'btn btn-success','id'=>'modalButton']) ?>
    </p>

    
    <?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'emptyCell'=>'-',
        'summary'=>'',
        'columns' => [
            //['class' => 'yii\grid\SerialColumn'],
            [
             'attribute'=>'kode_donatur',
             'value'=>'kode_donatur',
             'contentOptions'=>['style'=>'width: 200px;']
            ],

            [
             'attribute'=>'nama_donatur',
             'value'=>'nama_donatur',
             'contentOptions'=>['style'=>'width: 250px;']
            ],
            [
             'attribute'=>'alamat',
             'value'=>'alamat',
             'contentOptions'=>['style'=>'width: 350px;']
            ],
            [
             'attribute'=>'telepon',
             'value'=>'telepon',
             'contentOptions'=>['style'=>'width: 290px;']
            ],



            [
            'class' => \yii\grid\ActionColumn::className(),
            'header' => 'Aksi',
            'template' => '{update} {delete}',
            'buttons' => [
                'update' => function($url, $model) {
                    $icon = '<span class="glyphicon glyphicon-pencil"></span>';
                    return Html::a($icon, $url,[
                        'data-toggle' => "modal",
                        'data-target' => "#donaturModal",
                        ]);  
                },

                'delete' => function($url, $model) {
                    $icon = '<span class="glyphicon glyphicon-trash"></span>';
                    return Html::a($icon, $url, 
                    [
                        'data-confirm' => "Apakah yakin dihapus ?",
                        'data-method' => 'post',    
                    ]);
                },
              ]
            ],
        ],
    ]); ?>

    <?php \yii\widgets\Pjax::end() ?>
    <?php Pjax::end(); ?>

</div>
<?php
Modal::begin(['id' => 'donaturModal',]);
    Pjax::begin(['id'=>'pjax-modal', 'timeout'=>false,
        'enablePushState'=>false,
        'enableReplaceState'=>false,]);

    Pjax::end();
Modal::end();  
?>

<?php
$this->registerJs('
    $("#donaturModal").on("shown.bs.modal", function (event) {
        var button = $(event.relatedTarget)
        var href = button.attr("href")
        $.pjax.reload("#pjax-modal", {
            "timeout":false,
            "url":href,
            "replace":false,  
        });  
    })
');    
?>

<?php
        Modal::begin([
        'header' => '<h1 align="center">Tambah Donatur</h1>',
        'id' => 'modal',
        'size' => 'modal-lg',
        ]); 

        echo "<div id='modalContent'><div>";
        Modal::end()
?>

在web / js文件夹中编码main.js

<?php
/**
 * @link http://www.yiiframework.com/
 * @copyright Copyright (c) 2008 Yii Software LLC
 * @license http://www.yiiframework.com/license/
 */

namespace app\assets;

use yii\web\AssetBundle;

/**
 * @author Qiang Xue <[email protected]>
 * @since 2.0
 */
class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/site.css',
    ];
    public $js = [
    'js/main.js',
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
    ];
}

Answer 1

$(function(){
 //ambil form untuk tambah data
 $("#modalButton").click(function(){
     $("#modal").modal('show')
             .find("#modalContent")
             .load($(this).attr('value'));
 });
});

的形式：

EnableAjaxValidation

调节器

<?php $form = ActiveForm::begin([
     'layout' => 'horizontal',
     'enableAjaxValidation' => true,
     'id' => 'create-form',
     ...
]);