Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
And first what we are going to do is we are going to set a variable called e-mail, and what we can do is we are going to set it equal to either an e-mail that's been posted or null, depending on whether it has been posted or not. So we can do this little check, is set--it's a handy little function if you've never used it-- _post, which is where all of our post data comes to, and we'll say cccomm_cc_e-mail. So this actually matches the name of our field that we created for our settings.
So if it is set, then were going to set the variable equal to that. If you remember, we are using the shorthand 'if-else' statement. So, basically this is the check, and this is the 'if', and then we can do an 'else', and if it isn't found, then we will just set it to null. Then we are going to create the second variable called message, and in there we are going to default it to invalid-- in other words, guilty until proven innocent-- and then we can go ahead and do our check.
So will say if e-mail, and what that statement does is that will test whether it's null or not. So if it's null, then this will fail. If it's not null, then that means we have something set in there, so now we can validate it. And there's a special function built-in into WordPress called is_e-mail, which will perform the validation for us. If it is an e-mail, than we just simply set message equal to valid, and in the end, we are going to out put whatever in our message string and then die, and make sure you do this.
This might look a little weird at first. This is jQuery syntax. It takes a little getting used to, but once you used to, it make sense. We are basically going to say, when jQuery is ready, then we are going to call this function. Now because jQuery in WordPress runs in what's called no conflict mode, you usually can't use this special dollar sign prefix, but if you pass it to this function, then you'll be able to use it throughout. So let's go ahead and pass it to this function.
Now what we are going to do is, once it's ready, we're now going to set up an event handler to handle when the user tabs out or somehow loses focus once they've gone into the e-mail input. So what we do is we use our $ sign-- it's a signifier to jQuery--and we'll specify that we want to refer to an input in our document where the name=cccomm_cc_e-mail, which not coincidentally is what our option input is called.
So this should find that input in our document, and then we are going to add a blur event handler to that. And in the blur event handler, we are going to do our AJAX call. So there's an AJAX method, and the way it works is it takes a little object inside of which you set the type, and we are going to send it POST. You can set the data that you want to send.
In this case, I'm basically going to build like a little URL string, so I am going to say cccomm_cc_e-mail is equal to, and then I am going to concatenate on this. This in this case refers to the input, because that is essentially what this method is running on. And then we are going to get the value attribute, whatever is stored in there, which should be your e-mail, correct? And then we are going to add on what the action is, cccomm_e-mail_check, to URL.
Just type in ajaxurl just like that. It's an auto magic variable that exists in there, because the WordPress environment sets it up for us. Now we are going to set a special the beforeSend. The beforeSend is what's going to happen, essentially, before we make this AJAX call. And what we are going to do is we are going to say, e-mailInfo. We are going to prefix this with a pound, which just like css that means it is going to refer to something with the ID of e-mail info.html.
Then we'll say, "Checking e-mail," and that's going to refer to a div tag. I didn't add it earlier, but we'll go in and add it in the second. So that's beforeSend, now we can do the success. So success is when our data comes back, and the handler for success can take an argument of data, which is going to be the actual data that we get back. The data we get back is going to either be the string valid or the string invalid, depending whether or not it passed.
So we can do that test here. We can say if data=valid. Then we can say, #e-mailInfo.html, "Email OK" else e-mailInfo.html, "You have entered an invalid e-mail." So that's basically it. Let's go ahead and clean that up.
Let's make sure we've got everything in order here, and see we have our if-else, we got that brace. This brace refers to our AJAX call, this one do our beforeSend, this one to the function on the blur, and then this last one to the jQuery. And we can end each of these with a semicolon, just to keep a clean. Just go ahead and save the script. Let's go back into our PHP file. Right up here where the setting field is, you can see I have added a div file, with an id of e-mailInfo.
This is where I am going to output that information. If you haven't added that, make sure to add that now. The last step then in making this all work is to include all of these scripts. So to include our AJAX call, we use the action wp_ajax_--and this is a special one, it's dynamic. So wherever you want the action to be in that AJAXadmin or adminajaxphp, you want to put it here, so we called it cccomm_e-mail_check, and then the function you want to run, which is going to be cccomm_e-mail_check.
So note that whatever comes after wpajax_ here is going to match the action that you specified here. So that sets up the server side of things. Now, we are going to add an action for including scripts, so the action is called admin_print_scripts-options-general. php, and then we are going to specify a function that we haven't created yet but we will create right now, called cccomm_e-mail_check, and you can go ahead and copy that.
Then we will say base name, and then we will say directory name for the current file, and then right here we can append cc_comment.js, so that we will get our script. And then lastly, we can also go out and get additional libraries. So I am going to create an array, and I am going to specify in this array--actually, I'll use single quote--'jQuery'.
There are other ones available to access. If you go into The Function Reference/wp enqueue at the WordPress Codex, you can see it will not only tell you what all these mean exactly, and how to use them, but it will also tell you which specific ones are available. You can see we have these Scriptaculous ones, SWFObject for embedding SWFs, and we have a number of different jQuery libraries as well. In addition, we have all the built- in things that are used by WordPress; you can access any of these in your files.
So I have got this all set up. I think I spelled enqueue wrong, but it looks good. So let's go ahead and save it, and let's go back into the admin, and make sure our plugin is activated, cccomm, and it is, so in our settings file we should see our comment, and one really helpful thing is you see this little bug I have right here. This is the firebug plugin that you can get from Firefox. This can be really helpful if there's ever any issues, because it will tell you what requests and responses are being made.
I like to hold the shift key down with Firefox. It will make sure that it clears out anything that's in memory as well and loads a fresh version. So now I will go into My Comments. When I tab out, it tells me it goes to check it, and the e-mail comes back okay. And if you look in firebug, on the console, you'll see that I have a post. It will tell me what was posted, and then it will tell me what was returned, which is valid is, which is what I would expect. However, if I typed in an invalid e-mail, you can see it went out, and it returned invalid, and gave me the correct message. So, all in all, I did that without having to refresh the page, and that's the power of AJAX and jQuery.
So WordPress has integrated AJAX and jQuery into the admin, so that we can integrate this and ultimately create a smoother and better experience for our users.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 100064 Viewers
56 Video lessons · 113115 Viewers
71 Video lessons · 81972 Viewers
131 Video lessons · 39328 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.