Hello !
I’m not used to working with AJAX so I need to ask help for this… I’m currently working on a website that uses Kirby, for a webradio that uses Airtime.
In my header, I have a stream player in the header (/chapter: Stream-Player-For-Your-Website / Airtime 2.5 for Broadcasters) that uses jPlayer, and I’d like it to be persistent to allow a continuous music playing while navigating through the website.
I used the ajax code given by @texnixe that does page loading (from this thread Need help with Ajax requests with Kirby) but I couldn’t make the audio player persistent.
Here is the code again :
var loading;
$(document).ready(function(){
$('a.internal').click(function(e){
e.preventDefault();
loadLink($(this)[0].href, true);
});
window.history.replaceState({'data' : window.location.href}, '');
window.addEventListener('popstate', function(event) {
loadLink(event.state.data, false);
});
$('main').hide();
$('main').fadeIn(250);
var done = true;
});
function loadLink(urlload, newS){
loading = true;
console.log(urlload);
NProgress.start();
$("html, body").animate({ scrollTop: 0 }, 250);
$('main').fadeOut(250);
$.ajax({
url : urlload,
dataType : 'html'
}).done(function(data){
loading = false;
NProgress.done();
if(newS) window.history.pushState({'data': urlload}, $(data).title, urlload);
setTimeout(function(){
var newDoc = document.open("text/html", "replace");
newDoc.write(data);
newDoc.close();
}, 250);
});
}
The header is still reloading, and I also have a css animation that restarts each time I click on a link.
My question is : how to make the header persistent to have a continuous music player ?
Thank in advance.
Have a lovely day 
Hey, welcome to the forum. I think a little library like barba.js would make your life easier:
Hello texnixe,
Thank you so much! This is exactly what I need! 
It’s working perfectly.
Just a quick another question…
Between my pages, I have a blog that doesn’t have the same class for the body and the header to change the design.
So when I navigate through the website, that classes for body and header stay the same and the design of the specific page design doesn’t totally update.
Do you have any recommandation to correct this ?
Thank you !
I don’t really understand your question. Could you please elaborate a bit more, maybe with concrete example of what your problem is?
Sorry for being unclear !
Here is the website : Station Station • Home
When you arrive on the homepage, header doesn’t have any particular class.
On this page: Station Station • Blog, header is supposed to have a class called ‘blog’ that reverse background-color to #FFF and color to #000 by using this on the template:
<header id="header" <?php if($page->template() == 'blog' or $page->template() == 'article') { echo 'class="blog"' ;} ; ?>>
However, now that I only reload content inside main, header's class isn’t not reload…
It means that if I click on ‘Blog’ from the navigation while I arrived from the homepage, header will stay with black background while it should turn to white.
Do you know if there’s a way to only push the state of header’s class ?
I hope I’m clear.
Thank you so much for your help!
Thanks for clarifying. If you add the class on the body element instead, then address the header like
.blog header {
/* styles */
}
You could work around this issue.
I tried it also this way, but the body element isn’t reload either with barbara because of markup’s use : barba.js …
everything inside of this wrapper and outside of the container will not be updated by Barba : you can put your <header> , <footer> or <nav> safely here. It is mainly defined on the <body> tag, but you can add it on a div or section for example.
The container defines a section in which content is updated automatically when you navigate between your pages. Beware, everything inside of this container will be updated by Barba
… maybe I just should move my audio player outside the header and put the header inside barba’s container to reload the header and update the class…?
You are right, I didn’t think straight.
Then how about adding an attribute on the container that changes, then add a JS listener an that attribute and inject the style or class on the header based on that.
Yes!
So I found that we can use the namespace of barba’s container.
<main data-barba="container" data-barba-namespace="home">
So this is what I did :
barba.init({
views: [{
namespace: 'Blog',
beforeEnter() {
// update header's class
header.classList.add('blog')
},
afterEnter() {
}
}]
});
Thank you ! 
UPDATE :
Finally this is what I needed :
var mainContainer = document.getElementById('main');
barba.init({
});
barba.hooks.enter((data) => {
if(data.next.namespace == 'Blog' || data.next.namespace == 'Article'){
header.classList.add('blog')
} else {
header.classList.remove('blog')
}
});