Introduction: Loading Content with jQuery and AJAX
Hey there, John Morris here with John Morris online.com and welcome to another episode of the John Morris show. Now in this episode, I'm going to be showing you how to load content into a page using jQuery and Ajax without any sort of refresh. So if you'd like to learn how to do that, if you'd like to learn a little bit about how to use jQuery and Ajax together, then be sure to stay tuned in this episode.
This episode is sponsored by The Complete Web Developers Course taught by Rob Percival on Udemy.com. Now, what I love about this course is first, how comprehensive it is. It's 235 lectures on HTML, CSS, JavaScript, jQuery, Bootstrap, WordPress, PHP, MySQL, APIs, and mobile apps. I mean, it's ridiculous. Second, I love how good of a teacher Rob is. As a former school teacher, Rob knows how to explain complex Concepts in ways anyone can understand. And of course, the cool thing is I talked Rob into giving my audience an 85% discount on the course. So check the description of this video for a special link that contains a coupon code good for 85% off of The Complete Web Developers Course by Rob Percival. Click that link and you'll be all set for the discount.
Project Demo: No-Refresh Content Loading
Now on to the episode. So let's take a quick look at what we're actually going to be building here. So you can see on the simple page I have here two links. When we load the page, I'll go ahead and refresh this. We see this home and this is the homepage text here. If I click about, then you'll see that this changes to about, and this is the about page. If I click back to home, it changes back to home. You'll notice I'm on index.php here. If I click about, I stay on index.php here. The page is not refreshing or reloading. So it's about loading content from different pages using jQuery to do it without any sort of refresh.
File Structure & Page Setup
All right, so how do we do this? Well, if we look over here on the left-hand side, we've got all of our code here. Actually, real quick, let me cover the home.php and about.php because they're really simple. So in these, we just have our text that actually shows up and displays here in each one of these. So this is the only thing that's really in these two files and that's what allows the different content to show up here when we click. All right, so that would just be whatever content you're putting in those actual pages. You wouldn't have to do all of the head and all that stuff because we're going to actually load those pages into our index.php page here.
All right, so we have our standard page set up. Doc type, HTML tag, head tag, uh body tag, close that all up. And then I have a simple title, Load a Page with Ajax and No Refresh. And then we have uh some simple styling here. This is uh just very very basic to make these links kind of look like a navigation bar. Just really, really simple. I didn't want to get too caught up in the CSS part here because that's not what this is really about. So I'm not even going to cover this. It's super, super basic. It's it's just about the structure to make these look like links.
HTML Markup for Navigation and Content
All right, so the first thing then that we need to do here is we include our jQuery uh source code here so that we can use jQuery for this particular page. Now, of course you could use some other framework, you could use JavaScript but jQuery is one of the more popular and so that's what I'm going to show you how to do it using jQuery.
All right, here we have then the bulk of what we're actually doing with our jQuery. We'll come back to that in a second. And then if we come down here we have our actual structure for our page. So it's very very simple. We have a nav element here with an ID of nav. Inside it we have an unordered list and we have our two links for home and about. Now a couple things to note here. We have our href tag set to pound sign. Um that way they're not linking to other pages or so forth. You could potentially do a setup where you link these to other pages in case someone didn't have JavaScript uh activated, um but that's becoming less and less necessary because JavaScript is becoming more and more a required part of the web. There's probably a debate there, um but for all practical purposes, uh most people are going to have JavaScript functioning and you're um... it's really kind of there's a lot of applications now that just require it.
All right, so we set those to uh our again our anchor text or our pound sign here. And then we set a data-target to home and a data-target to about. So we're using data attributes to tell jQuery essentially which page we should load. So for the homepage we're going to load the home and here we're going to do load the about. All right so now you can maybe technically do this a little bit differently. You can maybe make these home.php and about.php since those are the pages that we're actually loading. I'm doing the .php part in the actual uh jQuery code. Again, you you may have a different preference, you could probably do that either way and be just fine.
All right so then we close up our nav element here. Down here we have a content uh div here and inside that we're doing a PHP include for home.php. So by default when we land on this page, it's going to load the home.php page into our content div. So that's kind of our default. Again, that's something you could have it load via jQuery if you really wanted to. Um again my preference, I just prefer to load it via PHP here. All right so this is what our page looks out looks like to start.
jQuery Setup and Click Event Handler
All right, now if we come back up here to our jQuery then we are starting out by uh... we're invoking jQuery essentially. And so we're doing the jQuery dollar sign symbol here, document.ready function. So essentially that means that when the page is ready, when it's loaded and and ready to be manipulated via jQuery, then go ahead and run this code here. So that just ensures that you're not uh that jQuery or JavaScript isn't trying to run its function before the page is actually ready to handle it. So that's essentially... this is a best practice. You're going to be, you want to wrap all of your kind of jQuery code inside of uh this this type of setup here so that um it runs when it's supposed to.
All right, next then we're going to set our trigger and container variables. So our trigger is our links here. These are what is going to trigger the uh content here to change. So these are triggers, and you can see we're setting that to the nav element, so the element with the ID of nav, which is this nav element, the unordered list inside that, list element, and then the anchor tag. So we're setting it to these anchor tags right here as our trigger. So each one of these anchor tags is going to be the trigger.
We're setting our container then to our actual content tab. This is the container that we're going to be putting the content into, right? So we set those here so that we can use those uh throughout the rest of the the code here. And then we're going to actually then run our trigger here. So we're going to reference our trigger variable up here. So trigger.on and then click. So this is going to be on click. So when we click each one of these links, we're going to run this anonymous function. And so inside this anonymous function, you can see we have all of this is where the rest of our code that actually does what we need to do in order to change the content here.
Implementing the AJAX Logic
All right, so on click we're going to run this function. The first thing that we're going to do then is we're going to set the this variable here uh so that we can uh reuse it. And actually I need to um add that comma here, but we're going to set this, the this variable, so we can reuse it. Now this is a best practice. It's performance-based. Instead of referencing this uh this way, which causes it to re-essentially re-query the DOM every time you call this, we can set it to a variable and it doesn't have to do that, so it helps with performance. And this is going to be set to this. In this instance, is going to be set to whatever we clicked, okay? So if we click the home link, this is going to be set to that anchor tag here. If we set the about link, it's going to be set, it's going to be set to that anchor tag.
Now, that's important because we need to get this data-target, this data attribute from each one of these links so we know which page to page to load. Now technically because we're only using this once in this code, we technically necessarily don't need to set this as a variable here, because we're only referencing it once, not multiple times. However, as applications grow, it's entirely possible that you'll start to reference this more times throughout this code, and so it's just a good habit to get in to always set this just like this so that uh it will perform better if you reference this this uh variable here multiple times throughout the rest of your code.
All right so we've done that. Now we're going to set the target. So we want to set the uh page that we're targeting to load into our container. And so to do that we're going to reverence this.data and then in this case target. So that's going to find the data attribute named target and it's going to uh set this variable to whatever that value is. So if I were to come here and I were to log this and do console.log and do target here, this will actually log that for us. So if we come over here to the console, let's go ahead and refresh this and I hit home you see it's it's now we're logging what Target is set to. So in this case it's set to home. So because we've set Target to the data attribute of Target, which is when we click that link is home. If we click about, now you can see it's set to about. And so that's what we need. We need to know what link was clicked essentially so we know which page to load. All right so that's what this code here is doing and you can kind of see that now when we log that.
All right now that we have that and we know which page we need, we can simply load that page. So we're going to load it into our container, which is our variable up here, which is our content div. .load and we're going to do what we're going to load then is our target, so our target was home or about depending on what link we clicked, plus .php. So essentially that's going to load home.php or about.php. Now like I said, you could put the .php part down here and then get rid of this here if you wanted to. Um you know my preference again, I just I just like to have it set up like this. I could be entirely wrong with that, um but uh for me it just feels like preference so um you can kind of do that however you want. But this right here is what's actually going to then load that page. So when we clicked uh each one of these links, that's the part that is actually loading it there.
Preventing Default Link Behavior
Finally, we end it with this return false, and what that does is essentially stops the normal link behavior. So it'll keep when we click on these links it'll keep them from actually working how they normally would. Now in this case, they're linked to these pound signs, so they're not actually going to go anywhere. Uh however, if these were linked to actual pages, you were doing fallbacks for people who didn't have JavaScript uh enabled in their browser, then you would want to, this would definitely become uh a lot more important. Plus it's always good to just if you're going to manipulate the behavior of an element to kind of stop the normal behavior because you don't want it messing with what you're trying to do.
How to Access the Source Code
Now if you want to get access to this source code, then the way to do that is to head on over to JohnMorrisOnline.com/source. Or if you're on my website, you can simply click the resources tab right up here and that will take you to my web developer resources page. Now I have a whole all kinds of web developer resources on here from classes to the different tools that I use. But if you scroll down to the bottom here, then you'll see a section called Code Snippets. And you'll see PHP code Snippets, WordPress code Snippets, and Genesis Code Snippets. So you can go ahead and click on through to the code Snippets that apply for the video you're watching and you'll be able to get access to that code snippet.
Now if we click here for example on PHP code Snippets, then we will be taken to that page and you'll see all of the different code Snippets here. And you can click through and you'll get the video, you'll get the description and you'll get the code snippet as well. So again head on over to JohnMorrisOnline.com/resources, head on down to the code snippet section to get access to the snippet that you're after. Of course, while you're here you might as well look around and see some of the other developer tools and courses that I have available here that are going to help you down your path of becoming a web developer. And since I'm constantly adding to this page, then you might as well bookmark this page and check back often so you can see all of the things that I've added and get access to all of the tools and Snippets and courses and things that I'm using throughout my career. All right, that'll do it for this episode. Thanks for watching and I'll talk to you later.
