Pjax breaks my javascript plugins

[Eschwinm]

Good afternoon,

I was implementing Pjax into my website but whenever I add it to a #pjax-container it will break my javascript.

I have come to the conclusion because I Have one main.js where every plugin will be initialized within a document.ready function. When a Pjax page will get loaded from the source the document will not reload so the document ready won't fire a second time.

When I make one large function from all the initializing plugins called Init(); and I will call this on pjax:success it will initialize every plugin again and again on every page visit. This will cause some errors with some of my plugins.

My plugins contain of custom plugins (I make a plugin for the smallest chunks of codes and I will initialize is after in main.js).

Well, now there is only content in #pjax-container containing html, ckeditor stuff, some datatables stuff etc.

Whenever Pjax gets content from a new page from the corresponding page's #pjax-container it will not initialize all the elements on the corresponding page's contents.

Also when I got back and forward in my website the website breaks and all plugins won't work anymore.

There are no errors generated but every element just does nothing because there is nothing binded to all those 'new' elements from the Pjax corresponding page.

Is there any info about this ? I couldn't find any info about this on the web.

If anyone has suggestions about how to tackle these problems please let me know.

My structure is:

[head]
-- head stuff including some css and font files
[/head]
[body]
[div id="pjax-container"]
-- random stuff from my plugins and ckeditor stuff
[/div]

-- all javascript files being included here
[/body]

[] are replaced with <>

[mislav]

Plugins that are designed to only initialize things once on DOM load will not work well with pjax. You need plugins that use event delegation to handle all elements, even those that are dynamically added to the page using ajax (including pjax). I described this pitfall in #526 (comment) and #499 (comment)

One workaround you might try is to re-initialize plugins on every DOM load and pjax:end event:

$(document).on("ready pjax:end", function() {
  // initialize plugins
})

This will ensure that plugin re-initialization will happen after every pjax transition. However, whether this works will depend on whether the plugin code is well designed and isn't susceptible to double initialization of the same widget.

---

P.S. You can include HTML code snippets in your comments on GitHub by enclosing them in triple ``` backticks. Example:

```html
<div>this is my html example</div>
```

This way you don't have to escape <> by transforming them into [].

[Eschwinm]

Thanks for leaving a reply!

I'm kinda new to github so thanks for the tip about code snippets!

This means I'll have to rewrite all my plugins to check if the plugin has been initialized or not, would be a lot of work but I honestly think this might going to work.

I'll keep you up to date! :)

[mislav]

Depending on what the plugins do, it might not be necessary to rewrite them. Start by reinitializing them on pjax:end per my comment above and see if that works. If that messes things up futher, then look into whether you can tweak the plugins so that initializing them multiple time for the same widgets on the page is safe.

I'm kinda new to github so thanks for the tip about code snippets!

No problem! It's all described here next to a couple of other formatting tips.

[Eschwinm]

Thank you for the tip.

Have tried that already and some plugins did mess up! Will try this again now and I will try to resolve those issues by tweaking my plugins.

They're all written by myself as I mentioned earlier so it won't be a big deal to find out how the plugin is written!

Will try this again soon and I'll keep you up to date. Thanks for the information! :)

[sea129]

a hack will be adding a function of all initialization of plugins inside the pjax container, wrap with script tag, so that every time pjax reloads, it also initializes plugins

[kobykorman]

Is it a hack really?

I imagine every app.js should look like:

$(document).ready(function () {

    function initilizePlugins() {

        $('.plugin1').plugin1({        
            ...
        });
        $('.plugin2').plugin2({
            ...
        });
        $('.plugin3').plugin3({
            ...
        });

    };

    $(document).on('pjax:end', function() {
        initializePlugins();
    });

});

This should concern anyone that integrates even one plugin in his app. Isn't it 99.99% of us? Any reason not to document this?

[mislav]

@legshooter This should definitely be pointed out in the README, I agree. I'll leave this open until we have some docs around this.