PJAX-Standalone icon indicating copy to clipboard operation
PJAX-Standalone copied to clipboard

Options to know which page is being unloaded

Open aktau opened this issue 10 years ago • 1 comments

I'm working on a new website and the speedup from using PJAX is tremendous (mostly because the page template is unbelievably heavy). Now, most of the pages need some javascript setup: binding to event handlers, connecting to websockets, authorizing, ...

Of course, just enabling parseJs doesn't cut it, it causes all kinds of trouble. So I was thinking for a way to make my application more PJAX-aware. I think one of the few ways to do it is to have page-specific load() and unload() code. Kind of like this:

        pjax.connect({
            "container": "pjax-content",
            "parseJS": true,
            "beforeSend": function(e) {
                $(document).trigger('_page_unload');
            },
            "complete": function(e) {
                $(document).trigger('_page_load');
            }
        });

// in each file

// users.js (included in /users)
$(document).on('_page_load', /* ... */);
$(document).on('_page_unload', /* ... */);

// groups.js (included in /groups)
$(document).on('_page_load', /* ... */);
$(document).on('_page_unload', /* ... */);

But this is not satisfactory of course because after a few pages everything will be firing at the same time. If I use one instead of on to make sure they only fire once, then after a few page loads everything will stop to work because no new files are being loaded because of the loaded_scripts cache. So I'm trying to think of some alternate solutions.

How about this: a data-pjax-reload attribute on some scripts tags that means they have to be reloaded? Then we could use the .one() binding and everything would work.

Another solution (which I thought of first when logging this issue) is to pass the current page (e.g.: /users) and the to-be-requested page (e.g.: /groups) to beforeSend, complete et al. That way there could be special events for every page: $(document).on('_page_load_users', /* ... */);

There's possibly a way more elegant solution out there.

aktau avatar May 04 '14 15:05 aktau

For now, the data-pjax-reload attribute is working very well for me right now :).

aktau avatar May 04 '14 16:05 aktau