Hola
Soy nueva en Yii2 y estoy probando hacer una búsqueda personalizada. El tema es que no quiero mostrar los datos de la búsqueda en un gridview. Quiero que los datos se muestren en la maquetación que hice en html. Cuando se devuelvan los resultados de la búsqueda no quiero que se recargue toda la página, si no el fragmento que está vinculado a la búsqueda. Pjax sirve para esto pero no sé como hacerlo. Alguien pudiera ayudarme
Saludos
Hola Ley, el pjax funciona de manera automatica en formularios, cuando haces una busqueda en la gridview estas haciendo un pedido por un formulario interno, lo que puedes hacer, es
colocar un formulario dentro del Pjax, y despues de hacer alguna busqueda o al presionar algun boton envias el formulario,
Cualquier cosa, no dudes en preguntar
Gracias por su respuesta. El tema es que hice lo que me dijo y todo bien hasta el controller, pero por alguna razón no se me actualiza la vista con los datos del action controller. Este es lo que hice:
search.php - Esta es la vista donde muestro la búsqueda y el formulario asociado a esta.
<?php
use yii\helpers\Html;
use yii\widgets\LinkPager;
use yii\data\Pagination;
use app\models\SearchForm;
use yii\widgets\Pjax;
use yii\widgets\ActiveForm;
use app\models\Especialidades;
use app\models\TipoAct;
use kartik\select2\Select2;
use kartik\date\DatePicker;
?>
<?php
$modelSearch = new SearchForm();//cambiar el nombre de la variable
$listSearch = array();
$paginationSearch = new Pagination();
$result=’’;
?>
<div class=“fondo”>
<div class=“container”>
<?php Pjax::begin([‘id’ => ‘search’, “enablePushState” => FALSE,]) ?>
<?php $form = ActiveForm::begin([
‘action’ =>[‘search’],‘id’ => ‘search-form’,‘options’ => [‘data-pjax’ => true ],
]);?>
<div class="row ">
<div class=“col-xs-12 col-sm-3”>
<?php $data = \yii\helpers\ArrayHelper::map(Especialidades::find()->orderBy([‘descripcion’ => SORT_ASC])->all(),‘codigo’,‘descripcion’);?>
<?=$form->field($modelSearch, ‘id_especialidad’)->widget(Select2::className(),[ ‘data’ => $data, ‘name’ => ‘Especialidades[codigo]’, ‘options’ => [‘placeholder’ => ‘Especialidad’]])->label(’’)?>
</div>
<div class=“col-xs-12 col-sm-3”>
<?php $data = \yii\helpers\ArrayHelper::map(TipoAct::find()->orderBy([‘descripcion’ => SORT_ASC])->all(),‘id’,‘descripcion’);?>
<?=$form->field($modelSearch, ‘id_act’)->widget(Select2::className(),[ ‘data’ => $data, ‘name’ => ‘TipoAct[id]’, ‘options’ => [‘placeholder’ => ‘Actividad’]])->label(’’) ?>
</div>
<div class=“col-xs-12 col-sm-3”>
<?=$form->field($modelSearch,‘fecha’)->widget(DatePicker::className(),[
‘options’ => [
‘placeholder’ => ‘Fecha’,
// ‘value’=> date(‘m/d/Y’),
‘value’=>$modelSearch->fecha?date(‘m/d/Y’,strtotime($modelSearch->fecha)):’’
],
‘removeButton’ => false,
‘type’=>DatePicker::TYPE_INPUT,
‘pluginOptions’ => [
‘orientation’=>‘top right’,
‘todayHighlight’=> true,
‘autoclose’=>true,
‘format’=>‘mm/dd/yyyy’,
‘startDate’=> date(‘m/d/Y’),
// ‘startView’=>‘decade’
]
])->label(’’);?>
</div>
<div class=“col-xs-12 col-sm-3”>
<button type=“submit” class=“input-btn” id=“search-btn”>Buscar</button>
</div>
</div>
<?php ActiveForm::end(); ?>
<?php Pjax::end() ;?>
</div>
</div>
<?php Pjax::begin([‘id’=>‘buscar’,‘timeout’=>1000 ,‘formSelector’ => ‘#search-form’]);?>
<div class=“row” id=“result”>
<?php for($k = 0; $k < count($listSearch); $k++){
?>
<div class=“col-xs-12 col-sm-4”>
<div class=“act”>
<div class=“row”>
<div class=“col-xs-12”>
<?php $img = stream_get_contents($listSearch[$k][‘imagen’]);?>
<?=Html::img(‘data:image/png;base64,’. $img)?>
</div>
</div>
<div class=“row” style=“margin-top: 15px”>
<div class=“col-xs-9 col-sm-8 col-md-9 name”><?=$listSearch[$k][‘nombre’]?></div>
<div class=“col-xs-3 col-sm-4 col-md-3”><?=$listSearch[$k][‘descripcion’]?></div>
</div>
<div class=“row”>
<div class=“col-xs-9 col-sm-8 col-md-9”>
<?php
$inicioS= date(“m/d/Y”, strtotime($listSearch[$k][‘fecha_inicio’]));
$finS = date(“m/d/Y”, strtotime($listSearch[$k][‘fecha_fin’]));
?>
<?=$inicioS.’ - ‘.$finS?></div>
<div class=“col-xs-3 col-sm-4 col-md-3”><?/=’$’.$listSearch[$k][‘precio’]/?></div>
</div>
<div class=“row” style=“margin-top: 15px”>
<div class=“col-xs-12 center”><button type=“button” codigo = “<?=$listSearch[$k][‘codigo’]?>” onclick="openModalSearch(’<?=$listSearch[$k][‘codigo’]?>’)" data-toggle=“modal” data-target="#myModalSearch" class=“input-btn my_modal”>DETALLES</button></div>
</div>
</div>
</div>
<div class=“modal fade” id=“myModalSearch” tabindex="-1" role=“dialog” aria-labelledby=“myModalLabel” aria-hidden=“true”>
<div class=“modal-dialog”>
<div class=“modal-content”>
<div class=“modal-header”>
<button type=“button” class=“close” data-dismiss=“modal” aria-hidden=“true” >×</button>
<h4 class=“modal-title” id=“myModalLabel”>Información de la Actividad</h4>
</div>
<div class=“modal-body” >
<div id=“loading-search”>
<div class=“preloader pls-blue”>
<svg class=“pl-circular” viewBox=“25 25 50 50”>
<circle class=“plc-path” cx=“50” cy=“50” r=“20” />
</svg>
<p>Cargando…</p>
</div>
</div>
<div id=“content-modal-search”>
</div>
</div>
</div>
</div>
</div>
<?php }?>
</div>
<?= LinkPager::widget([‘pagination’=>$paginationSearch,]);?>
<?php Pjax::end();?>
index.js - Este es el codigo js para recargar el contenedor con los resultados de la búsqueda
$(document).ready( function (){
$("#search").on("pjax:end", function () {
$.pjax.reload({container:"#buscar"});
});
})
SiteController - Código del action controller
public function actionSearch(){
$modelSearch = new SearchForm();
if (Yii::$app->request->isAjax) {
if (isset($_POST['SearchForm'])) {
$modelSearch->attributes = $_POST['SearchForm'];
$query = new Query;
$query->select('codigo, nombre, fecha_inicio, fecha_fin, precio, recomendacion, imagen, tipo_act.descripcion')
->from('actividades')->innerJoin('tipo_act', 'actividades.id_act = tipo_act.id')
->andFilterWhere([
'id_especialidad' => $modelSearch->id_especialidad,
'id_act' => $modelSearch->id_act,
'fecha_inicio' => $modelSearch->fecha,
]);
$countQuery = clone $query;
$paginationSearch = new Pagination(['totalCount' => $countQuery->count()]);
$listSearch = $query->offset($paginationSearch->offset)->limit($paginationSearch->limit)->all();
$paginationSearch->pageSize = 3;
return $this->render('search', [
'listSearch' => $listSearch,
'paginationSearch' => $paginationSearch,
]);
}
}
}
Index.php - Es la vista del home page del sitio donde renderizo la vista search.php. La vista search la hice independiente porque en el home page tengo otras variables y datos que se renderizan en el actionIndex. Estos datos y variables se muestran siempre que se renderice el index, pero la búsqueda solo si el usuario quisiera buscar. Si el código asociado a la vista lo pusiera en el index del sitio entonces tendría que pasar todos esos datos y variables cada vez que buscara y me parece que es contraproducente.
index.php - home page del sitio
<?= $this->render('search', [ ]) ?>Por favor, indiqueme que estoy haciendo mal.
Te anexo lo que hice aqui
Hola Ley te hice , un ejemplo para ti , espero que sea util si necesitas cualquier cosa solo dime, disculpa la tardanza, te deje el codigo en ese web site para que tuvieras mejor visibilidad
Hola, no respondí antes porque estaba de viajes. Hice lo que me dijo, pero sigue sin funcionar. El action Search devuelve los valores bien, el problema es a la hora de hacer el render de la vista, qué no me actualiza la vista con los datos devueltos. En el frontend es como si no hiciera nada y sin embargo en el backend tiene los valores. No entiendo que pasa? Otra cosa, qué es PM?
Saludos
@Ley hola! estaba leyendo esto y me parece quieres hacer render de un Grid filtrando los resultados que agregas en unos campos externos me puedes mostrar lo que tienes visualmente?
Honestamente creo con un GridView se haría fácilmente indistintamente de la personalización que agregas, en cuyo caso sería más simple manejar también el update de dicho componente y en mi caso no he necesitado definir form para hacer este tipo de envío de datos al Grid ya que mediante JS cuando modificas los campos pasas los campos.
Hola Rafael
Gracias por tu comentario. Ya logré lo que quería hacer. Realmente no quería utilizar un grid para mostrar los resultados de la búsqueda, sino mostrar los resultados como están maquetados en la vista. Ahora tengo otro problema. El paginador se muestra correctamente pero los resultados todos son mostrados en la primera página. Cuando le doy click a la página siguiente no hace nada.
Saludos