ckportfolio.com - AJAX-based Microsite: JQuery / AJAX

AJAX-based Microsite: JQuery / AJAX

jQuery / AJAX

Open script.js via Sublime Text, and place the following line:

$(document).ready(start);

In jsFiddle, that particular "trigger" is automatically placed in, but we need to explicitly state that the function placed in this trigger (between the parentheses) will run only when the document has completed loading (and is therefore ready).

We can now see that the function named "start" will run upon loading the page, but it looks like we never defined this function. Let us place a simple function named "start" right below:

function start(){
};

Between these two newly added lines of JavaScript code, let us place a simple click trigger:

function start(){
    $("a").click(function(e){

    });
};

We are creating a trigger that can detect a click on any anchor / hyperlink object that exists in the page (as indicated by the selector "a"). Note that there is a letter "e" placed between the parentheses that come after "function": this is an object offered by jQuery that allows you to see more details about each event that occurs within the page (refer to https://api.jquery.com/category/events/event-object/). Simply put, this object tells us when the click happened, where it happened, and what the user clicked on, etc.

Using this event object, we can also override the browser's default behaviour that kicks in upon clicking each hyperlinks ("go to the destination defined by 'href'"). We can do this by calling a function specific to this event object, named preventDefault (refer to https://api.jquery.com/event.preventdefault/):

function start(){
    $("a").click(function(e){
        e.preventDefault();
    });
};

True to its name, this function will stop the browser's default behaviour. Upon saving and checking your progress on the web browser, you should notice that the hyperlinks no longer redirect you to the href destination. Instead, we should direct the page to create a variable based on the original href value:

function start(){
    $("a").click(function(e){
        e.preventDefault();
        var destination = $(this).attr("href");
    });
};

This means that our variable "destination" will change based on each button click. Upon clicking "Home" button, destination will equal to "home.html." In case of "Contact," destination will then be defined as "contact.html."

We can now proceed with using the new jQuery function "load()." By specifying the location of the remote file and the element that will host the content of each remote file, we can successfully make a call to the four external files.

function start(){
    $("a").click(function(e){
        e.preventDefault();
        var destination = $(this).attr("href");
        $("#content").load(destination);
    });
};

Upon clicking each navigation item, the code will now call each relevant file, extract its content, and place it in the "content" div. As we do not have a "content" div in our index.html code, consider defining one in your code:

You can go ahead and populate the other HTML files with some editorial content. You will notice that the website now reflects the content of each external file.

Screencast Recording

https://drive.google.com/open?id=1xrFxLyVRlV0HES05JRZlVqpJ-mvgoCum

Fin