thybag / PJAX-Standalone

A standalone implementation of Pushstate AJAX, for non-jquery webpages.
203 stars 42 forks source link

Options to know which page is being unloaded #27

Open aktau opened 10 years ago

aktau commented 10 years ago

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 commented 10 years ago

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