Multiple Pjax Containers

[DevCodex]

@mislav @defunkt Pjax is great, thanks for putting this together.

In our site, we have a left menu. When left menu options are clicked, we want the whole content region to pjax load the left menu option that has been clicked. Once you've loaded a left menu page, there may be regions of that page that we want to pjax load selectively. So, we need a whole content region pjax container and a subregion container.

Does Pjax support multiple containers on the same page? And is it possible to have subregions contain javascript in them? We are noticing that events are doubling up. Please advise.

[donaldboulton]

I do not know if this helps but it works for me. The main content of my page has a data-pjax-container and then I have nav tabs in my page which are also a data-pjax-container. My links in main navigation, recent posts and nav tabs have data-pjax included: <a data-original-title="prettyPhoto" href="/blogs/prettyphoto" title="prettyPhoto" data-pjax></a> The script below that I use might be the key. if ($.support.pjax) { $(document).on('click', 'a[data-pjax]', function(event) { var container = $(this).closest('[data-pjax-container]') $.pjax.click(event, {container: container}) }) }

[DevCodex]

@donaldboulton That works, but I am noticing that the pjax:start and pjax:end event is firing on both containers even though only one container is being engaged with. I am using those events to fadein/fadeout the relevant container. Are you finding the same thing?

$(document).ready(function () {
    $(document).pjax('a.pjax-container', '#pjax-container');
    $(document).pjax('a.pjax-subcontainer', '#pjax-subcontainer');
});

$('#pjax-container').on('pjax:start', function () {
    $('#pjax-container').fadeOut("fast");`
});

$('#pjax-container').on('pjax:end', function () {
    $('#pjax-container').fadeIn("fast");
});

$('#pjax-subcontainer').live('pjax:start', function () {
    $('#pjax-subcontainer').fadeOut('fast');
});

$('#pjax-subcontainer').live('pjax:end', function () {
    $('#pjax-subcontainer').fadeIn('fast');
});

[rettinohusker51]

Nice

Sent from my iPad

On Mar 6, 2016, at 1:13 PM, DevCodex notifications@github.com wrote:

@donaldboulton That works, but I am noticing that the pjax:start and pjax:end event is firing on both containers even though only one container is being engaged with. I am using those events to fadein/fadeout the relevant container. Are you finding the same thing?

` $('#pjax-container').on('pjax:start', function () { $('#pjax-container').fadeOut("fast"); });

    $('#pjax-container').on('pjax:end', function () {
        $('#pjax-container').fadeIn("fast");
    });

    $('#pjax-container-view').live('pjax:start', function () {
        $('#pjax-container-view').fadeOut('fast');
    });

    $('#pjax-container-view').live('pjax:end', function () {
        $('#pjax-container-view').fadeIn('fast');
    });

`

— Reply to this email directly or view it on GitHub.

[socalengineer]

Hi DevCodex,

Did you ever find out the answer to your question? I am thinking maybe you could in your main pjax-container pjax:start and pjax:end events check if the click came from a subcontainer or not. If it came from a subcontainer then don't show the main loader.

[mislav]

@DevCodex Pjax was only designed to replace content with a single container. For a more complex web application that updates multiple regions on the page, you'll have to write your own implementation, as pjax won't be able to help you with that, I fear. Good luck!