Building an Ajax system for a website, script issues

[BenComicGraphics]

The idea is each page has the same header and footer exactly, but each page has inner content that will change each page load

<header>blah blah blah</header>
<div id="main-content">Changes Each Page</div>
<footer>blah blah blah</footer>

I have written this script based off an earlier version I saw somewhere, however I am having an issue where no scripts are being fired. The site’s overall scripts are all loaded on the initial page load, and I just need the scripts to be re-run each time you click on a link, that way I can have the seamless effect of the site pages loading inside the page, and adding custom CSS animations when each custom page loads.

var newHash     = '',
   $mainContent = $('#main-content');

  $(".ajaxify").click(function(event) {
      event.preventDefault();
      newHash = $(this).attr('href');
      history.pushState(null, null, newHash);      
      $mainContent.load(newHash + " #main-content > *");
      return false;
});

What am I missing?

[Mottie]

It would help if you would provide the HTML from the links being used, specifically the contents of the href.

Also note that some browsers do not allow the loading of local content via ajax. Use a localhost or Firefox to test the script from your drive.

I think the easiest thing to do would be to start out with this tutorial code (“How to Load In and Animate Content with jQuery”) as a base and work from there.

[Author]

Posts