[Support request] Continuous DIV state across page loading

[JANEK]

Good morning, I’ve been searching all over the web on how to keep a div’s state across page navigation, and from what I understand this can be achieved with AJAX page loading. My knowledge of PHP and Javascript is pretty limited but from what I read it would be quite difficult to convert the Generate Press theme into an AJAX theme.

So my question is, is there any other way to allow a DIV to remain loaded as the user navigates the site? The specific div I am looking to keep loaded in the Top Bar in the header, at the moment I have a MP3 jplayer assigned to it that supports continuous uninterrupted play as the user navigates through the site. However I would like the top bar to only be visible when a specific div/button (play button) within the site’s body is clicked. I’ve achieved this with a simple javascript however when the user navigates to another page the Top Bar goes back to its initial hidden state. I would like the Top Bar to remember that it was visible on the previous page if possible.

Any advice you could provide in how to achieve this would be appreciated. Sometimes what I believe to be a complicated task is quite easy, but I understand if this is not the case and that I might have to approach a developer on Codeable.

[Tom]

Hi Janek,

I’m not really sure how you would achieve this unfortunately.

Running every request on the site through AJAX likely wouldn’t work.

Maybe post this question over on stackoverflow.com? You might get a couple solutions over there to try out.

[JANEK]

Thanks Tom.

I did try a plugin called Ajaxify, it allows you to specify the site’s main container to display content and is supposed to keep the rest of the site loaded as you navigate.

Unfortunately it pretty much broke the site as content started piling up and displaying oddly as I navigated to different pages. 😛

Its amazing how much skill and understanding it takes to get functionality that we take for granted when viewing websites.

I might try Stackoverflow and see if someone has an idea over there. Theres things like history.js that I’ve read about but I have no idea how to integrate it my site.

[JANEK]

On a related note, do you know how to get a div to reload/refresh all its content when a button is clicked. At the moment I have a mp3 jplayer widget in my topbar that only seems to show the current playing jplayer when I navigate to another page.

For example I press play on a mp3 jplayer in the main body of my site, but the topbar jplayer doesnt update to show that its playing. However when I navigate to another page the topbar jplayer refreshes and all of a sudden its inherited the main body jplayers track and its playing. I’m assuming if I had a way to just refresh the topbar div upon clicking the play button in the main body player it would refresh the topbar jplayer to show correctly the playing track without needing to navigate to another page just to update it.

[JANEK]

I found this PJAX plugin for wordpress:
https://github.com/pelmered/wp-pjax

The instructions say I need to add code to the header, footer and sidebars. Would I do this in the hooks or should I use snippets? If snippets how would I make their code work correctly? My understanding is I put their PHP in those individual hooks it then assigns a fixed state that makes it so those divs/sections dont reload on page navigation.

The instructions seem pretty simple, but I’ll probably find a way to mess it up:
https://github.com/pelmered/wp-pjax#setting-up-the-plugin

[Tom]

It looks like you would need to copy the header.php, footer.php and sidebar.php files from the parent theme. Then add them to your child theme, and add the recommended code.

[Author]

Posts