CODEWITHSUNDEEP
javascriptjqueryajax
Ben
Ben

Reputation: 293

Building an Ajax System for loading New Page Content via link classes

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, but with links like <a href="anotherpage.html" class="ajaxify">Go to Another Page with smooth animation</a></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;
});

I attempted to add a .getscript block when ajax is completed, but I found that it starts making the page loads really heavy and starts firing off errors.

$(document).on("ajaxComplete",function(){
    $.getScript( "http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" );
    $.getScript( "http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js" );
    $.getScript( "../js/libraries.js" );
    $.getScript( "../js/footer.js" );
});

What am I missing?

Upvotes: 0

Views: 399

Answers (2)

Ben
Ben

Reputation: 293

Big thanks to beercohol, he set me on the right direction. I didn't need to reload the whole javascript stack from the head each time; just the javascript in the footer. This solved so many issues at once.

EDIT: I also discovered that by changing it to "delegate" vs onclick, I dont' need to reload the initial ajax script again. Very handy and keeps the pages light.

Final Code example is this:

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

  $('body').delegate(".ajaxify", "click", function() {
  event.preventDefault();
  $("html, body").animate({ scrollTop: 0 }, 500);
  newHash = $(this).attr('href');
  history.pushState(null, null, newHash);
  $mainContent.delay(500).load(newHash + " #main-content > *");
  return false;
});
$(document).on("ajaxComplete",function(){
   jQuery.get('/js/footer.js', function(data) { eval(data); })
});

Upvotes: 1

beercohol
beercohol

Reputation: 2587

Assuming your scripts are loaded in your header, then you don't need to reload them with .getScript. That would just keep adding them into the page again for every link you click!

Your main function looks mostly correct - although it seems to be missing the first line - but the .load doesn't look quite right. Try something like this:

$(document).ready(function() {
    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;
});

Upvotes: 0

Related Questions