CODEWITHSUNDEEP
jqueryajaxwordpresspjax
Christina Alexander Cernoch
Christina Alexander Cernoch

Reputation: 21

Retain scripts on pjax container load

I have wordpress site that I am using pjax on for the first time. I would like to be able to update the #main container, as well as a div that is outside of the main container, which I am using for a stretched background slider.

The background slider writes the html, plus a script tag that assigns the settings for the slider. I was able to move the html for the slider into it's appropriate place outside of the #main container by using innerHTML (which I chose instead of jquery's html() to retain scripts). That's when I noticed that the script tag does not seem to be returned in the pjax request at all.

Is there any work around that may be available to either keep the script tag, or retrieve it in the call somehow? Do I need a separate ajax call after the pjax loads to get my script tag information?

Thanks!

Upvotes: 2

Views: 878

Answers (1)

Juniper Jones
Juniper Jones

Reputation: 799

This is a good question and one that caused me headaches for a while too.

Unfortunately PJAX does not cause the page to reparse or recompile the JavaScript, though it will walk the new DOM and register new event handlers.

That means that if you have JavaScript calls in the content you are loading with PJAX, you need the functions they call to be loaded in the original document.

So you could load an image with an onClick to pop a larger version up in a lightbox, for example, but only if you load the lightbox JavaScript functions when you load the original page.

Very simple example:

In the original HTML page:

<script type="text/javascript" src="lightbox.js" />

In the PJAX-loaded content:

<img src="small-image.jpg" onClick="javascript:show_lightbox('big0image.jpg');" />

But if you don't have the script element in the original page and try to load it with PJAX it won't work.

Upvotes: 1

Related Questions