Drupal 7 Ajax Framework Link Example

By shane
Mon, 2012-11-26 19:35
Daily Dose of Drupal Episode #54

Share with Others

Learn how to use the Drupal 7 Ajax Framework to create a simple Ajax driven link. This is a video version of a previous blog post called Drupal 7 Javascript Ajax Framework example from a link.

In this episode you will learn:

  • How to create a simple Ajax driven HTML link on a Drupal 7 website using the Drupal 7 Ajax framework
  • How to display the current server time after clicking an Ajax powered HTML link
  • How to trigger Ajax commands after the Ajax powered link is clicked
  • How to execute a custom written jQuery plugin after clicking the a Drupal 7 Ajax link
  • How to handle when a user does not have Javascript or when the user goes directly to the HTML link (opens in a new window or tab)

Hello there everyone and welcome to another exciting episode of the Daily Dose of Drupal. As always; I am Shane, you can follow me on Twitter @smthomas3 or you can go to codekarate.com and sign up for the newsletter which I encourage you to do if you have not already. I will be releasing another issue here the next few days.

So today we’re going to talk about the Ajax Framework in Drupal 7. The documentation is listed here from api.drupal.org and it talks about how you can use Ajax … the Ajax Framework to help you more easily make Ajax Calls to your Drupal website. And this is for Drupal 7 so it’s relatively new in Drupal 7 or it’s quite a bit different than Drupal 6. I found a lot of examples on how to use Ajax within a form, however there was not just a simple straight forward example for how to use it with other types of HTML.

So I wanted to create a simple example of how you use Ajax which is just a simple link, basically you click a link, it makes an Ajax Call out to the server, it does a little bit of processing and sends you back something to put on your HTML page or your Drupal page.

So a few days ago and this is episode 54, that will be coming out shortly but a few days ago I created a blog post called Drupal 7, Java Script, Ajax Framework example from a link and this is basically what I’m going to be going over today but I wanted to put in a video format so I could explain it a little bit better and show a demo. But all the code is there so you can definitely take a look in code if you don’t want to follow along with this video but this video is going to show you how it works and walk through how the code is actually doing what it’s doing.
So here’s my example; just a very simple page, all it does is that when you click this link it goes out to the server, it returns the current time as you can see after a little bit it goes away and it replaces the link back again so can notice that the time has changed, it’ll go away in a few seconds and basically; what that’s doing is just making a very simple Ajax Callout to the server, it’s returning a response and then it’s doing some processing. You can go ahead and take a look at the network tab here and you can see it’s making a call to ajax/myajaxtest or myajaxtest/ajax actually, if you hover over this link you’ll look down here and you’ll notice it’s making a call to my-ajax-test/nojs.

So what this does is when you click this link it actually replaces the nojs portion of this path, you can notice if I open this in a new window it actually gives me a formatted page, notice the title is different where it has nojs in the URL but if you use the Ajax format which when you click this link, the Java Script replaces this nojs with Ajax, it gives you a different result.

You’ll notice it’s Jason data and then that will get processed. So let’s go ahead and take a look at the code and see how it’s doing that and what is it doing and how it works. Go ahead and start … it’s a very simple module, it’s called Ajax Link, it has three files; the first one is ajaxlink.info which is just your simple Drupal 7 module info file.

You’ll notice it does include a scripts file for ajax_link.jas. Let’s go ahead and take a look at the ajaxlink.module file; so it’s only about 79 lines so it’s not too long.

The first is it implements Hook Menu and the first item in Hook Menu is just ajax-test and this is just our ajax-test page. All it has in this page is just an Ajax link. So it calls this Ajax Link Page Callback which this returns a renderable array which if you’re not sure what a renderable array is, look at some of my previous Daily Dose of Drupal videos, I talked about them briefly and it returns a … basically what happens is this gets rendered and created into a link.

So it’s a type of link, the title is Ajax Link which is the title right here, the H Ref is what you see when you hover over it is my-ajax-test/nojs as you can see down here, I also add a prefix and a suffix onto this and you’ll notice I wrap the link inside in ajax-linkdiv but I also put a div after this and it’s just set up to be empty.

So if I look at this you’ll notice … let me go ahead and refresh this page, there is a link right here; ajax-display. So I have my ajax-link div which wraps this link and I also have this ajax-display div which is empty right now. You’ll notice when I click on the link this ajax-display gets the data that’s pass back from the server and it gets put inside that div. So that’s all put into the prefix and suffix, I mean this is a renderable arrays or somewhat similar to Form Arrays if you’re familiar with Drupal 6 Form Arrays. The important part is this part right here; this Ajax property of this array.

All it’s telling you to do is use Ajax which is going to make sure it switches this nojs to Ajax when it makes the Ajax Call, I’m using an effect fade, you can look inside the Ajax Framework documentation for a whole bunch of other options for what you can do with this, a lot of these are use within Drupal forms like I said so they’re not all needed and this was basically what I can stripped it down to and still have it work.

Now let’s look at this other menu item; my-ajax-test, you’ll notice there’s a % sign here and this is so we can take argument or either it’s going to be nojs or it’s going to be /ajax. So it’s going to pass in that page argument to this Ajax link Callback function which if we go down here you’ll notice I have the function and I just pass the variable that get’s called in, this is either going to be set to like I said, nojs or Ajax and it’s going to be a string.

So the first thing I do and this is where you do any of your database queries, your processing, anything like that, I just go ahead and get the current time using the PHP date function then I do the IF statement, I basically say if it’s Ajax that was passed in here I’m going to run some Ajax commands otherwise I’m just going to return a renderable array with the mark-up of this time variable that we previously created. So let’s look at this Ajax piece and unpack it a little bit; I basically set up a commands array, I run one command that’s going to do a replace so it’s going to look for this ID of ajax/display, it’s going to replace that entire div with this HTML right here.

So this is going to be a div with the same ID but it’s going to have this time variable that I created up above. The second one we’re going to do is its Ajax command to change, that is going to just mark this ajax-display with a change indicator and I’ll show you what that does in a second.

So we’ll go ahead and take a look … you’ll notice when I come to the page originally and I go to Ajax link you’ll notice there’s just div ID, ajax –display. As soon as I click that you’ll notice that there’s a new class added; ajax-change and what that allows you to do is it allows you to react on items that have actually been changed.

Now what I also needed to do I needed to run some Java Script after this Ajax Call went through and the easiest way I could find to do that was to create a very simple J query plug-in.

So what this does is it calls Ajax command invoke and it calls my J query plug-in which we’ll show you in a second, that’s just called Ajax Link and it executes that code. And then what it does is it wraps it all into renderable array type format and returns t using this Ajax delivers function and that’s how it works. Let’s go ahead and look at the Java Script which is just a few simple lines of code.

Basically this right here creates a new J query plug-in called ajax_link, all this does is it hides this ajax-link div which is a wrap around this link so you can see it hides it that’s why it goes away.

The Java Script or the Ajax from here, these two lines or this line specifically is what adds this to the page and then in the Java Script I proceed to set a timeout of 5 seconds or 5,000 mili seconds which basically will fade out this ajax-display, set the HTML to nothing so we’ll get rid of the contents and then re-show it so it’s there for the next time then I’ll also fade in this Ajax link so it comes back. And that’s all there is to it to making this happen, see it disappears, this is going to fade out and then be removed and it’s going to fade this one back in.

Very simple, it took me a while to figure it out and get it working because like I said there wasn’t a lot of examples of Ajax … using the Ajax Framework for simple links and there are probably multiple ways to do this, this is just one way, you can always add just a use-ajax class to a link and it will start using Ajax, there’s a whole bunch of different things you can read up on on the Ajax Framework, I just wanted to show you one example and explain how it worked so you can start using Ajax in your own modules and on your own Drupal 7 websites.

That’s it for this time on the Daily Dose of Drupal, check back in again for another exciting episode and we’ll be back again soon. Thanks for watching.