Yii2 Pjax 不工作
Yii2 Pjax not working
我想使用 Pjax 刷新 gridview,但不知何故它不起作用。这是代码:
_search.php
<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
use yii\widgets\Pjax;
$this->registerJs("
$('#btnAjaxSearch').click(function(){
$.ajax({
type: 'get',
data: $('.bank-search form').serializeArray(),
success: function (data) {
$.pjax.reload({container:\"#bank\"});
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert('error');
}
});
return false;
});
", \yii\web\View::POS_END, 'bank-search');
?>
<div class="bank-search">
<?php Pjax::begin(['id' => 'bank-form']); ?>
<?php $form = ActiveForm::begin([
'action' => ['index'],
'method' => 'get',
]); ?>
<?= $form->field($model, 'bank_name') ?>
<?= $form->field($model, 'state') ?>
<?= $form->field($model, 'district') ?>
<?= $form->field($model, 'city') ?>
<div class="form-group">
<?= Html::Button('Search', ['class' => 'btn btn-primary','id' => 'btnAjaxSearch']) ?>
</div>
<?php ActiveForm::end(); ?>
<?php Pjax::end(); ?>
</div>
index.php
<?php
use yii\helpers\Html;
use yii\grid\GridView;
use yii\widgets\Pjax;
$this->title = 'Banks';
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="bank-index">
<h1><?= Html::encode($this->title) ?></h1>
<?php echo $this->render('_search', ['model' => $searchModel]); ?>
<p>
<?= Html::a('Create Bank', ['create'], ['class' => 'btn btn-success']) ?>
</p>
<?php Pjax::begin(['id' => 'bank']); ?>
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
'id',
'bank_name',
'state',
'district',
'city',
// 'branch',
['class' => 'yii\grid\ActionColumn'],
],
]); ?>
<?php Pjax::end(); ?>
</div>
控制器
/**
* Lists all Bank models.
* @return mixed
*/
public function actionIndex()
{
$searchModel = new BankSearch();
$dataProvider = $searchModel->search(Yii::$app->request->queryParams);
return $this->render('index', [
'searchModel' => $searchModel,
'dataProvider' => $dataProvider,
]);
}
简单搜索有效,但 Pjax 无效。我是 Yii2 的新手,所以我们将不胜感激。谢谢。
Pjax 的工作方式是发送另一个带有特殊 headers 的请求。当检测到 pjax 请求时,仅从服务器返回更新容器所需的 html。行
$.pjax.reload({container:\"#bank\"});
将发送另一个请求,并且 actionIndex queryParams 中将为空。
您可以通过将搜索参数存储到 session 或通过在查询字符串中指定带有参数的 pjax url 来解决此问题。
尝试以下操作:
var url = urlWithFilters();
$.pjax({url: url, container: '#bank'});
在这种情况下,您不需要创建自己的 ajax 调用,只需使用过滤器创建 url。
谢谢艾丁。它帮助我解决了这个问题。这是我所做的。它可能会帮助面临同样问题的人。
正如 Edin 提到的,您需要将 url 连同搜索参数一起传递给 Pjax 以刷新 gridview。
这是我编辑的代码:
$js = <<<JS
// get the form id and set the event
$('#bank-form-id').on('beforeSubmit', function(e) {
var form = $(this);
if(form.find('.has-error').length) {
return false;
}
$.ajax({
url: form.attr('action'),
type: 'post',
data: form.serialize(),
success: function(response) {
var csrf = yii.getCsrfToken();
var bank_name = $('#banksearch-bank_name').val();
var state = $('#banksearch-state').val();
var district = $('#banksearch-district').val();
var city = $('#banksearch-city').val();
var url = form.attr('action')+ '&_csrf='+csrf+'&BankSearch[bank_name]='+bank_name+'&BankSearch[state]='+state+'&BankSearch[district]='+district+'&BankSearch[city]='+city;
$.pjax.reload({url: url, container:'#bank'});
}
});
}).on('submit', function(e){
e.preventDefault();
});
JS;
$this->registerJs($js);
我想使用 Pjax 刷新 gridview,但不知何故它不起作用。这是代码:
_search.php
<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
use yii\widgets\Pjax;
$this->registerJs("
$('#btnAjaxSearch').click(function(){
$.ajax({
type: 'get',
data: $('.bank-search form').serializeArray(),
success: function (data) {
$.pjax.reload({container:\"#bank\"});
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert('error');
}
});
return false;
});
", \yii\web\View::POS_END, 'bank-search');
?>
<div class="bank-search">
<?php Pjax::begin(['id' => 'bank-form']); ?>
<?php $form = ActiveForm::begin([
'action' => ['index'],
'method' => 'get',
]); ?>
<?= $form->field($model, 'bank_name') ?>
<?= $form->field($model, 'state') ?>
<?= $form->field($model, 'district') ?>
<?= $form->field($model, 'city') ?>
<div class="form-group">
<?= Html::Button('Search', ['class' => 'btn btn-primary','id' => 'btnAjaxSearch']) ?>
</div>
<?php ActiveForm::end(); ?>
<?php Pjax::end(); ?>
</div>
index.php
<?php
use yii\helpers\Html;
use yii\grid\GridView;
use yii\widgets\Pjax;
$this->title = 'Banks';
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="bank-index">
<h1><?= Html::encode($this->title) ?></h1>
<?php echo $this->render('_search', ['model' => $searchModel]); ?>
<p>
<?= Html::a('Create Bank', ['create'], ['class' => 'btn btn-success']) ?>
</p>
<?php Pjax::begin(['id' => 'bank']); ?>
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
'id',
'bank_name',
'state',
'district',
'city',
// 'branch',
['class' => 'yii\grid\ActionColumn'],
],
]); ?>
<?php Pjax::end(); ?>
</div>
控制器
/**
* Lists all Bank models.
* @return mixed
*/
public function actionIndex()
{
$searchModel = new BankSearch();
$dataProvider = $searchModel->search(Yii::$app->request->queryParams);
return $this->render('index', [
'searchModel' => $searchModel,
'dataProvider' => $dataProvider,
]);
}
简单搜索有效,但 Pjax 无效。我是 Yii2 的新手,所以我们将不胜感激。谢谢。
Pjax 的工作方式是发送另一个带有特殊 headers 的请求。当检测到 pjax 请求时,仅从服务器返回更新容器所需的 html。行
$.pjax.reload({container:\"#bank\"});
将发送另一个请求,并且 actionIndex queryParams 中将为空。
您可以通过将搜索参数存储到 session 或通过在查询字符串中指定带有参数的 pjax url 来解决此问题。
尝试以下操作:
var url = urlWithFilters();
$.pjax({url: url, container: '#bank'});
在这种情况下,您不需要创建自己的 ajax 调用,只需使用过滤器创建 url。
谢谢艾丁。它帮助我解决了这个问题。这是我所做的。它可能会帮助面临同样问题的人。
正如 Edin 提到的,您需要将 url 连同搜索参数一起传递给 Pjax 以刷新 gridview。
这是我编辑的代码:
$js = <<<JS
// get the form id and set the event
$('#bank-form-id').on('beforeSubmit', function(e) {
var form = $(this);
if(form.find('.has-error').length) {
return false;
}
$.ajax({
url: form.attr('action'),
type: 'post',
data: form.serialize(),
success: function(response) {
var csrf = yii.getCsrfToken();
var bank_name = $('#banksearch-bank_name').val();
var state = $('#banksearch-state').val();
var district = $('#banksearch-district').val();
var city = $('#banksearch-city').val();
var url = form.attr('action')+ '&_csrf='+csrf+'&BankSearch[bank_name]='+bank_name+'&BankSearch[state]='+state+'&BankSearch[district]='+district+'&BankSearch[city]='+city;
$.pjax.reload({url: url, container:'#bank'});
}
});
}).on('submit', function(e){
e.preventDefault();
});
JS;
$this->registerJs($js);