I'm creating a website that has an audio player. The idea is that the music doesn't stop while you're navigating the site, so I implemented a type of deep linking with jQuery and the load()
method, which works fine.
The problem is that if I enter directly to this url, the social buttons load correctly, but if I access it through a link within the website, the social buttons don't load. You can see this issue here and then entering the "Fortress Theme" post.
Is there any way to re-render those buttons and, in general, any type of content like this (like AdSense ads) after the AJAX call? I tried with FB.XFBML.parse();
for the Facebook button, but it didn't work.
Here is the code that loads the pages via AJAX:
$("body").on('click', 'a:not(.social-tooltip, .fancy, #play, #stop, #back-to-top)', function(e){
var url = $(this).attr('href').split("#");
if(!link_is_external(this) && url[1] == undefined) {
e.preventDefault();
if(url[1] != "comments") {
var href = $(this).attr('href'),
title = $(this).text();
loadContent(href,title);
history.pushState({path: href, titel: title}, $(this).attr('href'), $(this).attr('href'));
}
}
});
window.addEventListener('popstate', function(e){
console.log(e);
loadContent(e.state.path, e.state.titel);
}, false);
function loadContent(href,title){
var href = href,
container = $('section.content');
container.load( href +' section.content', function(){
// container.fadeIn(200);
$('title').replaceWith('<title>' + title + '</title>');
$("#back-to-top").trigger("click");
});
};
If you need more information, just tell me and I will edit this question. Thank you in advance!