Currently trying at add ajax to a site, after much reading I discovered that history.js covers all the areas i require.
However try as I might I cannot seem to get the jquery files loading when the pages are called via ajax.
I have downloaded the history.js & ajaxify-html5.js files, moved the ‘s to inside the #content div on each page where the content is loaded, but still not getting the js working on the dynamically called pages.
All the HTML is valid, here is a brief overview of the code (stripped down):
<header>
<title>Site Name</title>
</header>
<body>
<section id="container">
<div id="ajax-page">
*Content here*
<script type="text/javascript" src="js/myscript.js"></script>
</div>
</section>
</body>
Standard ajaxify-html5.js with minor changes:
// Wait for Document
$(function(){
// Prepare Variables
var
/* Application Specific Variables */
contentSelector = '#ajax-page,article:first,.article:first,.post:first',
$content = $(contentSelector).filter(':first'),
contentNode = $content.get(0),
$menu = $('#menu,#nav,nav:first,.nav:first').filter(':first'),
activeClass = 'active selected current youarehere',
activeSelector = '.active,.selected,.current,.youarehere',
menuChildrenSelector = '> li,> ul > li',
/* Application Generic Variables */
$body = $(document.body),
rootUrl = History.getRootUrl();
Any idea’s on what I’m doing wrong?
Would be very grateful for some help.
This was an issue caused by reloading the main nav with the ajax, recoded the page so the nav stays intact and this fixes the issue.