Well, i am new to Ajax and JQuery, I struggled to compile this. I'm trying to load URL with ajax navigation and with popstate retrieving back and front navigations. The below code works well but my problem is integrating the Progress Indicator of the page i'm trying to load when the link is clicked using Pace Page Progress Bar Plugin.
<html>
<head>
<meta charset="utf-8" />
<div id="render-me">
<title>jQuery Ajax Test</title>
<script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.gossipper.com/content/css/inspired-mob/styles/pace-theme-center-atom.css" />
<script>
paceOptions = {
ajax: true, // disabled
document: true, // disabled
eventLag: true, // disabled
elements: {
selectors: ['#render-me']
}
};
</script>
<script src="https://www.gossipper.com/content/css/inspired-mob/js/pace.js"></script>
<script type="text/javascript"><!--
$(document).ready(function(e){
$.ajaxSetup ({
cache: false
});
var page;
$('a.lnk').click(function(){
page = $(this).attr('href');
$('#render-me').load(page + ' #render-me');
if(page != location.href){
window.history.pushState({path:page},'',page);
$(window).bind("popstate", function() {
link = location.pathname.replace(/^.*[\\/]/, ""); // get filename only
$('#render-me').load(link + ' #render-me');
});
}
return false;
});
document.addEventListener('gg', function(){
document.querySelector('.pace').classList.remove('pace-inactive');
document.querySelector('.pace').classList.add('pace-active');
document.querySelector('.pace-progress').setAttribute('data-progress-text', percentComplete.value + '%');
document.querySelector('.pace-progress').setAttribute('style', '-webkit-transform: translate3d(' + percentComplete.value + '%, 0px, 0px)');
});
$(window).on({
popstate:function(e){
page = location.href;
$('#render-me').load(page + ' #render-me');
}
});
});
</script>
</head>
<body>
<h1>Web page test.html</h1>
<a href="https://www.gossipper.com/forum/general/news/22853-dino-melaye-injured-rushed-to-hospital-after-jumping-off-a-police-vehicle" title="Get extern" class="lnk">Get extern</a>
<div id="content">Initial content in test.html</div>
</body>
</div>
</html>
As i stated above, am a newbie to Ajax, JQuery and Javascript. I struggled to compile this, i need help getting this to work.
The problem in your code is your script source for pace, css source for pace and the proper placing of html elements.
I tried to go in the sources of your script and css for pace but it is not found. You don't need to encapsulate all of your element in the <div id="render-me">.
Based from https://www.w3schools.com/html/html_head.asp
The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag. HTML metadata is data about the HTML document. Metadata is not displayed. Metadata typically define the document title, character set, styles, links, scripts, and other meta information. The following tags describe metadata: <title>, <style>, <meta>, <link>, <script>, and <base>
So you must remove the div in the head, fix the sources and put the <div id="render-me"> inside body.
Here is your code that I fixed: https://jsfiddle.net/uqbysq1a/1/
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments