I am creating search form in yii2 . I am able to get using form submit but i want to know how can i do this using ajax . I have to achieve search like this link www.rarepink.com/loose-diamonds.
By form submit i am able to get data but i want to achieve using ajax. I also want to display the result in default gridview. I know Pjax concept in yii2 but that is not how i wanted.
Thanks
Enclose content in
use yii\widgets\Pjax;
Pjax::begin();
echo GridView::widget([...]);
Pjax::end();
how suggested in documentation
Thanks Fabrizio Caldarelli For your reply
But i am not using default search I have created my custom search form similar to this link www.rarepink.com/loose-diamonds,and want to perform search using ajax.
Post your code
This is my js code
$('#changearange').on('slideStop', function(){
var range= $('#diamondsearch-gridle').val();
$.ajax({
url : '<?php echo Yii::$app->getUrlManager()->createUrl(["test/index"]); ?>',
type: 'post',
contentType: "application/json",
data: {
'range' : range,
},
beforeSend: function (jqXHR, settings) {
if (jqXHR && jqXHR.overrideMimeType) {
jqXHR.overrideMimeType("application/j-son;charset=UTF-8");
}
},
success: function(response) {
alert('Success is here');
alert(response);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
}
});
});In this way, you are reinventing the wheel.
Yii2 miss yiiGridView.update method, so you have to use Pjax.
http://www.yiiframework.com/wiki/772/pjax-on-activeform-and-gridview-yii2/
http://www.yiiframework.com/wiki/655/how-to-use-gridview-with-ajax/
It is not helping me much. my question is similar to this link
http://www.yiiframework.com/forum/index.php/topic/59916-custom-search-form-in-yii2-gridview/page__gopid__277309#entry277309. I have to achive like this http://www.rarepink.com/loose-diamonds
If you want to create a search form as http://www.rarepink.com/loose-diamonds, it is enough to use Pjax.
Follow this:
<div class="search-form">
<?php yii\widgets\Pjax::begin(['id' => 'search-form']) ?>
<?php $form = ActiveForm::begin(['options' => ['data-pjax' => true ]]); ?>
.... search fields or controls ....
<div class="form-group">
<?= Html::submitButton($model->isNewRecord ? Yii::t('app', 'Create') : Yii::t('app', 'Update'), ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
</div>
<?php ActiveForm::end(); ?>
<?php yii\widgets\Pjax::end() ?>
</div>
If you use custom component, you can attach an event handler when change value in this component and update an hidden input field, to be sent to controller when send POST request.
<?php Pjax::begin(['id' => 'gridData']) ?>
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
...fields...
['class' => 'yii\grid\ActionColumn'],
],
]); ?>
<?php Pjax::end() ?>
<?php
$this->registerJs(
'$("document").ready(function(){
$("#search-form").on("pjax:end", function() {
$.pjax.reload({container:"#gridData"}); //Reload GridView
});
});'
);
?>
Thanks Fabrizio Caldarelli but i want to do without submit button . I want to do on change event.How on echange event search result is displaying in http://www.rarepink.com/loose-diamonds.
i did as you told above . It is working fine with submit but how can i achieve by on change . Here is image of my form
If you attach an event handler to html controls and then launch
$.pjax.submit($('#search-form'));
For example:
$(function() {
$('input, select').on('change', function() {
$.pjax.submit($('#search-form'));
});
});
I’ve not tested it, but it should work.
[color="#006400"]/* NOTE moved to Yii2 section instead of Yii 1.1.x */[/color]