Pjax + busqueda + no gridview


(Ley) #1

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


(Heartnet) #2

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


(Ley) #3

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” >&times;</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.


(Heartnet) #4

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


(Ley) #5

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