Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

016 Loading external pages dynamically with jQuery AJAX

From: View Source

Video: 016 Loading external pages dynamically with jQuery AJAX

Hello! This is Ray Villalobos and welcome to View Source! This week I am going to show you how to load external content with jQuery Ajax, so if you need to move something from A to B into C, then it's time to View Source. Ajax stands for Asynchronous JavaScript and XML. So it's a combination of technologies that lets you send and receive information from a server without a page reload. It drives the way apps like Facebook update their content without having to refresh the page, and reduces the amount of load on your server by letting you update specific elements in your document.

016 Loading external pages dynamically with jQuery AJAX

Hello! This is Ray Villalobos and welcome to View Source! This week I am going to show you how to load external content with jQuery Ajax, so if you need to move something from A to B into C, then it's time to View Source. Ajax stands for Asynchronous JavaScript and XML. So it's a combination of technologies that lets you send and receive information from a server without a page reload. It drives the way apps like Facebook update their content without having to refresh the page, and reduces the amount of load on your server by letting you update specific elements in your document.

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.

What I want you to load is from the link that we clicked on, but I don't want you to load the entire page, because otherwise this page would have two body tags and two head tags and all that stuff. So we want to load just a section called thumbnails. If you go to the thumbnails page, remember, we created this div with an id of thumbnails. So it's only going to load the content from that part. I'm going to save this, refresh over here, click on this, and boom! We've just loaded something from one page to another using jQuery Ajax. Super, super simple. I guarantee if you had to do that with normal JavaScript, it would take you a lot more code.

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.

Show transcript

This video is part of

Image for View Source
View Source

20 video lessons · 15829 viewers

Ray Villalobos
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed View Source.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.