AJAX methods can be way over used but at the same time can provide a great way to consolidate related content into a confined space. JQuery provides an easy way to use their AJAX functionality with some simple code and, of course, the JQuery library. Here’s a simple example.First we have to understand the way JQuery works. Once we’ve done that then modifying this code becomes much simpler.JQuery is a library of functions that you can call upon to perform various tasks. The ones we will be working with today are the ‘load’ and ‘onClick’ functions. Our goal is to summon an external file ( .txt, .html, etc.) into an element in our page, preferably a div element. The functions will be called when someone clicks on a hyperlink (or, an image could be used or even a button). Here’s the basic code:

$(document).ready(function(){
  $("#link1").click(function() {
  $('#text').load('latin.txt');
});
  $("#link2").click(function() {
  $('#text').load('latin2.txt');
});
  $("link3").click(function() {
  $('text').load('latin3.txt');
  });
});

Ok, what we’ve created here is a series of functions that specify the id’s of 3 hyperlinks (shown below) that, when clicked, will ‘load’ the external pages referenced (latin.txt, latin2.txt and latin3.txt) into the same div element with the id of ‘text’. Here’s the HTML:

This text will be replaced when you click the hyperlinks below

Link One
Link Two
Link Three

Explaining The Code

JQuery is pretty easy to learn once you get the hang of how the functions flow. Here’s some tidbits about this simple AJAX call:

$(document).ready(function(){

JQuery uses the $(document).ready(function() { to ensure that the document is fully loaded and ready to provide you with the ability to execute your code

$(“#link1”).click(function(){

We are stating here that the hyperlink with the #id of link1 should perform a function when it is clicked. So, basically, if you read it like a sentence it states “when someone clicks on the #link1 do the following”.

$(‘#text’).load(‘latin.txt’);

The function we want to perform is to insert content into a specific div element in our page. The first part, $(‘#text’) identifies the element by using it’s id tag #text, the id of our target div. The second part, .load(‘latin.txt’);, tells what content to load into that location. So, reading it like a sentence it says: “find the div with the id of ‘text’ and load this file into that location”.

I’ve repeated the process three times in order to identify the 3 different links. The hyperlinks can be placed anywhere on your page and point to your target div. The content you summon can be a wide variety of formats including txt, html, images, etc..

For our external files they reside in my public folder and contain the standard Lorem Ipsum text for this demo. Here is the ‘live’ example of how this would look when arriving at your page.

Link One | Link Two | Link Three

Clicking on the links will summon the different content without having to refresh the page. This saves on load time and at the same time allows you to designate a specific area for as much content as you’d like to cycle through instead of having a new page for each one.

Live Demo

To see this work Click Here