Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Creating a custom URL in WordPress
- Adding breadcrumb links to sites
- Creating a toggle button with jQuery
- Adding Twitter feeds to a site
- Adding PayPal buttons to pages
- Uploading photos to your web site
- Embedding videos for different browsers and devices
- Parsing and placing a YouTube video feed
Skill Level Intermediate
Using Ajax has been historically difficult, because of the way it has to be implemented. Different platforms require slightly different versions of the code, but jQuery makes it extremely easy to load things from one place to another. So let's take a look at how you can easily load, not just another page, but an element within a page and we'll throw in a little bit of animation for good measure. So let's go into our documents and you're going to need two pages to make this work. The first page is going to be the loader, the place where you are going to load things into, you could see that it's a very simple HTML document with a section right here for the place where we want to add content that has a link to where the content is going to load from, as well as the place where we are going to insert the content.
Then the other page is going to be this thumbnails page, this page is just a regular page that has a section that we want to load from. So right now, if I go to the start page and click on this, notice, look at the title here, it says Loader. If I click on this, it is going to take you to other page which is titled Slides. So you could see that right now this link is working normally, it's taking you to a separate document. We don't want that, we want the content from the other document to load up in here. And we've also created some styles for this. It's pretty straightforward styling, so I am not really going to talk about it.
It's just very simple styling to make this link look a little bit better. We will go back into our start file, and we'll go into our codesnippets and in our codesnippets we're going to grab the link to jQuery right here. Go back into start, and I will just put it right at the bottom of the page. We are going to add this link and this link takes us to the to the Google CDN version of jQuery. This is currently the latest version and using the Google CDN, which is the Content Delivery Network, makes your jQuery load faster, because if somebody has visited a page with this library when they come to your page, it will already be cached into your browser.
Just in case we are working offline, we also have a piece of code that will load a local version, which is right here, so that we can work when we are offline. So next we're going to need to add a little bit of code into this page to make this link not load the content, like it does normally. So we need to prevent the default behavior of this link. The default behavior is to just go to another page. So we are going to do that with a little bit of jQuery. Go back into codesnippets and we are going to grab this document.ready(function), and go back into start. We'll need to add a script tag, and inside the script tag we are going to paste that piece of code, and what this does is it waits until the document has finished loading.
That's what this document ready function means. Once the page has loaded, then we look for a link inside this addcontent id. So here is the addcontent id. We only want to target links within that section, you don't want to target all the links in your document, just the ones that are in the section that we want to load content into. And if somebody clicks on one of those, then it's going to execute this function called e, and e will store information about our click. Then jQuery will let us prevent the default behavior of that link, which means that when we do this, and I'll click on this link, the link no longer takes us to the other document.
So it's preventing its default behavior. Now that's not very interesting. So I am going to go back into codesnippets and grab the next version of our file. So this is where the magic happens. Here's where we're going to load content from the other page into our start page. So I am going to grab this code and replace it, and right here we've got the same thing going preventDefault behavior, but after that we are saying, okay, I want you to find the section in this page called inserthere, which is over here, and I want you to load something into that section.
So let's make it a little better. We are going to add a little bit of animation on to this, so we cold fade the content when it comes in from another page. Back into our codesnippets, we'll grab the next version of the function, copy it, and go back into start, replace this right here, and all we have done is if you remember the code before it ended right here, when we clicked on the function, if we look now, we'll see that after we load the thumbnails, then I'm going to first hide the thumbnails before I display them, and then I'm going to wait for 100 milliseconds, just a little bit of a wait, and then I'm going to fade the content in by 500 milliseconds.
So if we save this, and we click on this page, you will see that the content fades in. It's important to first hide the content and then show it, because whenever we're loading it we're automatically showing it. So if we didn't hide it, it would not show you the content fading. It would just show it and then fade it in, which will be the same as just showing it. So we want to first hide it, and if we want a little bit of suspense we can add a delay right there, and after that then we can add a fadeIn and we can control how long these things are by changing this value of milliseconds.
So we can make this twice as long by putting in 1000 here. Now when we click, it's a little bit slower. You can make it take however many seconds you want, and there, that one takes two seconds. I think that's a little bit too long. We'll just keep at 500 milliseconds. You don't really need this delay, but it just adds a little bit of suspense there. So we'll keep that. Now we will go to the next version of our codesnippets, and in this case, we want to remove this load thumbnails after the content has loaded. There is no reason for a link to load thumbnails when the thumbnails are already in here.
Clicking on it, it's just going to reload the content, so we need to get rid of this link. So I am going to grab a different version of this code and go back into a start document. I'll replace this right here. So when I load this content, I'm going to add an additional element to our loading function that does something when the loading is complete. So this is very, very typical of jQuery. You target something, then you do something to that target, and then you can string a series of commands together, like hiding something and fading something in, but you can almost always do something after something happens.
So here when we load this content, instead of just loading the content, we can execute something when this is complete. So when it's finished loading the page, we can add another function and the code of the function is essentially right here. It's a normal function, but we want to do something in here, and what we want to do is target the addcontent div right here, find any links inside that area, and remove them. So by adding this additional function we have told jQuery to do something after this loading is complete.
So what that will do is, we'll save this, refresh, and we'll load up our thumbnails. You see that as soon as I click on the thumbnails, the link to load the thumbnails is now gone. So once you get used to stringing different commands in jQuery, you'll see that doing something after something happens is one of the core concepts in jQuery. Now make sure you check lynda.com. We've got a lot of different excellent tutorials on jQuery and Ajax. So don't forget to check out the Online Training Library. And remember, when your favorite sport is playing with tags, then you'll probably love to View Source.