javascript - How to keep elements non-refreshed

Question

The main goal is to keep non-refreshed the logotext <div class="small-7 medium-4 columns logo"> and the menu <nav class="pagedMenu" role="navigation">,without clipping on page refresh or while the content is loading from a page to another. Also, the menu state should be preserved from a page to another.

I've found here a possible solution that could solve the problem (you could use ajax to fetch the updated content and use jQuery to put the new content on the page and avoid the refresh entirely. Doing it that way, the existing data in the page would remain untouched. said @jfriend00)

So, I have tried to use an Ajax plugin (called AWS). In the AWS option page, I (suppose) that I've done the right thing pointing wrapper as Ajax container ID and also pagedMenu as Menu container class, Transition Effect Enabled, No ajax container IDs blank, no loader selected, having already a pulse loader implemented in the theme.

At this point, all I got it's a menu / side-menu (shiftnav) / pulse dot loader / content loading malfunction, generated perhaps by the wrong defined Ajax container id and/or menu container class(?) OR by a conflict with an existing JS / jQuery code, not so sure.

Also in Chrome console there is an error:

Uncaught SyntaxError: Unexpected token ;
(anonymous function) @ ajaxify.js?ver=4.3.1:175
n.extend.each @ jquery-2.1.4.min.js?ver=2.1.4:2
n.fn.n.each @ jquery-2.1.4.min.js?ver=2.1.4:2
$.bind.$.ajax.success @ ajaxify.js?ver=4.3.1:169
n.Callbacks.j @ jquery-2.1.4.min.js?ver=2.1.4:2
n.Callbacks.k.fireWith @ jquery-2.1.4.min.js?ver=2.1.4:2
x @ jquery-2.1.4.min.js?ver=2.1.4:4
n.ajaxTransport.k.cors.a.crossDomain.send.b @ jquery-2.1.4.min.js?ver=2.1.4:4

Everything is getting back to normal on page refresh but doesn't help at all, being useless.

I also have to mention that for the menu I've tried to keep the state using jQuery-Storage-API and storage=jQuery.sessionStorage; as you can see in mynewmenu.js file but that will not solve the non-refreshing elements problem.

The menu jsfiddle only, if this helps to have the whole picture, here thanks to @Diego Betto.

You can use this live link as example; there is a similar situation with the above described - Ajax implementation right(?) - and regarding the appearance, menu is kept non-refreshed from one page to another; if you browse Books, Works etc, menu sections you'll see; if there is a model that could be implemented here, I'll be glad to find it.

LE: meanwhile, I've tried another ajaxify solution made by @arvgta - special thanks - without success yet but as far as I've found from the Author, the defined elements should be div's with id's not classes. So, I'll try to find a way to modify somehow the code in order to have id instead on classes.

Also, I'll try to transform and implement in ajaxify.min.js file, the page-container element; jQuery('#page-container').ajaxify(); I'll come back with news.

LE2: I've tried to implement the solution using id's instead of classes but still, the pages are not loading correctly.

At this point we have ajax.min.js file updated with these lines:

(function($){

  jQuery(document).ready(function(){
    jQuery('#page-container').ajaxify({requestDelay:400,forms:false});
  });

})(jQuery); 

Also, I've modified the theme file to have id=page-container instead if class=page-container.

In these conditions, on menu click, the links are changed (like it should), menu/ logotext elements seems to working almost fine (sometimes get skippy changing position), but the content is not loading correctly in all cases; Same here, everything is getting back to normal on manual page refresh (f5), but doesn't help.

LE3: It looks like the conflict is (at least) between Revolution Slider plugin and Ajaxify.

errormessage="Revolution Slider Error: You have some jquery.js library include that comes after the revolution files js include." ;="" +="
This includes make eliminates the revolution slider libraries, and make it not work." "<="" span="">"

Site live link here. Any thoughts / alternative in this area? (not interested in using other different platforms, different WordPress themes, etc. just a workaround in this existing situation)

LE4: As far as I can see, there are many users that voted up the Jake Bown answer that could be indeed a solution; but I can't find the reason that didn't work correctly implemented into my theme (without errors) live link here The elements logotext / menu are still fading on refresh, are not kept non-refreshed. Any thoughts @Jake Bown / anyone?

LE final. Buzinas delivered the closest answer for my needs, taking in consideration my site environment (plugins installed, etc).

Answer 1

From what you said I think I might have found the solution you're looking for - you want to load content dynamically whilst keeping the logo and navigation untouched? If so, this might be what you're looking for.

In the example, the pages are loaded in from a div within the page but could be used to load another URL or file:

$('.viewport ul li a').on('click', function(e) {
   e.preventDefault();
   var link = this.hash.substring(1, this.hash.length);
   if($('.'+link).length) {
     $('.viewport span.body').html($('.'+link).html());
   }
});