jQuery & AJAX

1. jQuery & AJAX

2. Take the folder you completed with the previous exercise and duplicate it. We are going to do the same thing but using jQuery. Add the jquery library to the folder and a link to the jquery library in the header of the index.html page. Be sure to put the link to the jquery library above the link to your script.js file.

3. Temporarily, for demonstration purposes, I am going to change the class on the link to the classification page to id="classification". Remove all the javascript we had on this page from the last project. Get your document.ready function in place and ready to go.

4. I am going to use my ID to select that link and attach a click event handler to it. When you click the link it runs an inline function. Since the function is running because of an event, we have to pass it a parameter of "evt". In that function, we are going select the #maincontent div and use this handy little load function to load the classification.html page. I add return false, so that the link is not followed. Now this works and we could just write little handlers for each of our links, but that would mean four times as much code. Lets generalize our function so it works with all the links.

5. Go back to the HTML and put the class back in for the classification page so it matches the rest of the links. We will replace our function with this. You can see now we are selecting all the links with the class of 'getpage'. Then for any link that is clicked, we are putting the href of that link into a variable called 'theLink' Then we load that link. This will work for all our pages and that is it!

6. Lets look at this example. Download the ajaxdice.zip file and extract it to your htdocs folder in MAMP or XAMPP. Here is the index.html page. There is a link to the jQuery library file, the script.js file and a stylesheet.

7. The stylesheet sets up a few basic styles. Nothing fancy.

8. The PHP file should look familiar. It is our old favorite dice game. Notice there is nothing on the page but PHP. No html tags, no body tags, nothing but PHP.

9. the script on the script.js page is pretty much the same thing as before too. When you click the link called #roll, the page loads the dicegame.php file. Except that now, because this is a php page, it loads its dynamic content into the window, without even refreshing the page. Notice that if we go back to our stylesheet and add a style that will affect the divs generated by the PHP, it will actually apply those styles.