CODEWITHSUNDEEP
phpyiiyii2pjax
hamed
hamed

Reputation: 8033

Yii2 gridview - unwanted page reload after ajax request

I'm using GridView widget with jquery Pjax for displaying data in my Yii2 application. I need to have ajax sort and filter in my grid, so I have put my grid configuration between these lines of codes:

 Pjax::begin([
    'timeout' => 10000,
    'id' => 'products-container',
    'clientOptions' => [
        'type' => "POST",
    ],
]);
?>  

<?=
GridView::widget([
   //grid configuration
])
?>
<?php Pjax::end(); ?>

When I want to sort the grid with a column or use grid filter, I see the browser sends an ajax request to server, but after finishing ajax, the entire page reload!

Or, even when I execute this code in the browser console, after sending ajax request, the page reloads.

$.pjax.reload("#products-container", {
    "type": "POST"
});

What is the problem?

Update:

I found that the problem is upgrading server's php version to 7! I downgrade version to 5.6 and problem fixed. But the main server must have latest version, so I must use php 7. What is the problem with pjax and php 7? My yii version is 2.0.8

Upvotes: 1

Views: 3985

Answers (1)

Gynteniuxas
Gynteniuxas

Reputation: 7103

If Pjax reloads your entire page, then it means one of two reasons:

  • Your Pjax contains an error (most likely this one and it could be some sort of Exception usually). To check whether you got one, in your JS file (or somewhere, where PJax ending event is taking place) write an additional event listener.

For example, if you have this event trigger:

$(document).on('pjax:end', function(e) {
    alert('Pjax has ended!');
});

Then you can also have something like this:

$(document).on('pjax:error', function(event, xhr) {
    alert('Pjax failed!');
    console.log(xhr.responseText);
    event.preventDefault();
});

Now you can check if you Pjax contains an error. If you see first alert but not the second one, you don't have Pjax errors. If you get both alerts, your response contains an error and you can now check what do you get in console.

  • Your Pjax's response contains core HTML tags (<head>, <body>).

This is not an error but browser does not understand if you're expecting to get a response without page refresh, therefore, attempts to reload completely. This might be harder to solve since I'm not quite sure how to prevent from getting core HTML tags. For an error you at least can see what's wrong. But, as I have said, it's most likely the first option here.

It is unlikely that you face another type of results. I strongly recommend to make sure you pass these two.

Upvotes: 3

Related Questions