Index view (with filter) in Modal

Yii 2.0 General Discussions
1

I’m trying to load an index view (pjax and Gridview) within a bootstrap modal window and allow the user to perform searches/filters. The view loads properly, but when the user performs any type of filter the main page is reloaded to the search page instead of just refreshing the modal. Can anyone offer guidance on the matter or point me to an example to learn from?

Thank you.

2

Figured it out. It turns out that it is because of the pjax timeout. By explicitly setting the timeout value to a higher value resolved the issue (as shown below).

Pjax::begin(
        [
            'id'=>'pjaxContainer',
            'timeout'=>5000,
        ]
    );
3

New problem though! filtering the modal causes the address to change in the browser so when I close the main window it is getting redirected. Anyone know why this is happening?

4

‘enablePushState’ => false, was the solution to this latest issue, so now I have

    Pjax::begin(
            [
                'id'=>'pjaxContainer',
                'timeout'=>5000,
                'enablePushState' => false,
            ]
        );
5

So close, but still one problem that I can’t seem to understand.

So I have the modal working, filtering no longer redirects the main page (well sort of, see below), but.

The first time I open the modal and perform a filter, it works fine.
The second time, it works, but I can see that 2 filter requests are sent, the first fails, and the second returns correctly.
The third time, I see 3 requests, and then the page is redirected.

Why are the requests accumulating based on the number of times the modal is opened? How can I get around this?

Thank you for any insight you can provide.

6

Finally have it all sorted out. To resolve this last issue, you need to generate a unique id for pjax on each call. So I ended up using

$uniqid = uniqid();
Pjax::begin(
	[
		'id'=>'pjaxContainer'.$uniqid,
		'timeout'=>5000,
		'enablePushState' => false,
	]
);

and then in my script I did

$('#pjaxContainer$uniqid').on('pjax:send', function() {
    $('#loading').show()
})
$('#pjaxContainer$uniqid').on('pjax:complete', function() {
    $('#loading').hide()
})

Hopefully this will help someone else down the road.

1 Like