This video tutorial walks you through the process of using ajax in the WordPress admin within your own plugins. The end result of this tutorial is not a complete plugin, but it does show the entire process, step by step, of how ajax is utilized in the WordPress dashboard.
Unlike most of my tutorials, I do not use any pre-existing plugin or code as reference during the video; it is all coded live during the video, so mistakes and small bugs are common, but they really help to illustrate issues that developers often encounter while working with ajax.
The complete source code for this tutorial is free to download below if you are logged in.
You must be logged in to view the rest of this content. Register or login from the sidebar.
thanks Pippin, that was really helpful!
Have you tried Netbeans or PhpStorm IDE? Curious about why you are using Bluefish.
Also, do you use xdebug? I find it really helpful to live debug.
Yep, hated them both. I personally really like Bluefish, and other super light weight non-IDE editors. My favorite editor of all time is Notepad++, but it doesn’t run on Linux.
Excellent tut!
Eclipse + Aptana 3 is awesome for PHP dev, super fast and the code completion is super powerful. Saves me tons of time writing core PHP functions and any other function from WP or the framework I’m working with (when you include the wp-* in the build path of the project).
Also when setup correctly, and you may want to know what the function does exactly you just position the caret on the function and hit F3 and Eclipse opens the function declaration, whereever it may be located inside WP
I tried to use Eclipse/Aptana for a few days and couldn’t get comfortable with it. It just didn’t seem to work well for me.
Same here, I like notepad++. And you can use it with Linux as well. It will run perfectly with “wine” program.
+10 for Notepad++
You might try sublime text 2. It runs on linux.
I will give it a shot, though, as you can tell above, I’m very picky
+1 for Sublime Text 2.
EPIC editor, you can use also use most Textmate bundles with it.
Must have install – http://wbond.net/sublime_packages/package_control
Yeay! Could you do more stuff with this? like those checkboxes you’ve talked about at the end
would be great.
I will try
Sweet
I have been wanting to learn more about using AJAX with WordPress for a while now, and this tutorial has definitely given me a great foundation to work off of and to learn from. Thanks Pippin!
I think there may be an error in the code where your doing nonce verification. You mentioned in the video you forget the proper setup of the wp_verify_nonce and you look at the codex to make sure.
In your video you have the $nonce and $action backwards, I think?
Yep, it’s very possible I did them backwards. The action should be first and the nonce second.
Thank you for this introduction to using ajax with WordPress, one of the best I’ve seen on the subject. It was very helpful to me. I am running into an issue however. I successfully used this on a meta box that has an input for searching post titles. After submitting the search, results get placed in an empty div just like you showed in your tutorial. But I would like to add another ajax call after the first one has displayed the search results, which should fetch basic info from a post when you click a search result. The problem is when I click on one of the results, nothing happens, even though I verified that the ajax is working. It looks like the jquery is not responding to the click event I added to the post title. Actually I am doubtful jquery even sees the post title that was inserted into the DOM via ajax, preventing me from targeting the post title?
Am I doing this the wrong way? Is there a preferred way of handling multiple ajax calls in succession I should be aware of?
I fixed my problem: turns out using the .click jquery event was not responding on a handler that was generated with ajax. Solution is here: http://stackoverflow.com/questions/9344306/jquery-click-doesnt-work-on-ajax-generated-content
Yep, that’s the answer. Sorry for being a bit slow.
Pippin
Thank you for a great video article. I am embarking on the use of Ajax in my plugins for the first time and found this very helpful.
I do however hope you can help me with something that is probably very simple, but I have not yet been able to resolve.
I have managed to recreate your example for the use of Ajax on the admin side, but I am looking to replicate the idea on the frontend.
I have tried to look it up and found the information, but cant seem to get it to work.
I have reproduced the form and button your created within a shortcode function for display on a page, and also localized the admin-ajax.php script with the following code.
wp_localize_script('WP-Ajax', 'ttftajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );I have also added the required nopriv within the add_action code.
add_action ('wp_ajax_nopriv_TTET_Get_Front_Results', 'TTET_Process_Frontend_Ajax');The button works as expected, but the page refreshes. I have not been able to find out why. Looking up the problem I have found that the
return false;statement at the end of the java script should prevent this, but for some reason it does not.Can you help at all?
Thanks
Colin
Hi Colin,
Can you show me examples of your code?
Pippin
Thank for getting back to me.
This first section is the plugin file (excluding plugin headers)
and the following is the JS file
I hope you can help me find what is probably staring me in the face.
Thanks
Colin
locusuk, you have to prevent default right after the event is passed to
$(‘#TTET-Ajax-Form’).submit(function(){});
like this:
$(‘#TTET-Ajax-Form’).submit(function(e){e.preventDefault();
});
That will stop the browser from reloading the page but execute the ajax request on form submission.
What Jonathan said is correct.
@Jonthan Acosta and Pippin
Thank you for you help. That sorted my problem. I thought it would be something simple.
My one question is though, how come preventDefault(); was not required in the admin based version as per the video article?
Thanks
Colin
@locusuk I really don’t know, since your code seems pretty much the same as the tutorial’s. in my experience doing e.preventDefault(); first and doing all your logic afterwards is more reliable.
Also using $.ajax({url:”",data:{},success:function(){},error:function(){}}) is also easier to debug although it could potentially make you write more code, but more debuggable.
Nice Tutorial Really that will help everyone for doing ajax in wordpress. But i think if you provide sample demo of the code then it will be better.
This plugin tutorial is really nice, easily show how we implement AJAX in our custom Plguin.
Really Love this tutorial
Thanks Pippins.
An extra plus (+) for Notepad++, so it becomes Notepad+++, i like Notepad ++
Is there anything else that should be done to run this on a submenu of a plugin? I did the tutorial and it worked fine as a stand alone plugin that is accessed via the settings area. But when I tried to do this in my custom plugin on a submenu page using the same exact code (with updated paths) all I get is 0 when I click the button.
No, it shouldn’t be any different.
I’m trying to create a popup window (using highslide) that updates the data on the screen via ajax.. I know how to update the datatables and all that via ajax (with some help from your tutorial), but I was wondering if you know which file I need to include into the external php for the highslide window (I don’t need all of the admin area layout, just the database and wp function/connections)
thank you in advance
That shouldn’t be done in an external file. It’s generally a bad idea to manually include core WP files in order to gain access to WP functions.
that’s why I’m asking for advice on how to do it
I like the look/feel of the highslide window, but don’t know if in addition to the ajax stuff I can put into wp, if there is a “popup” definition that doesn’t display all of the template stuff (I want to keep the styling, but basically it will just be a form on a white background with no header or menu,etc…)
Thank you for the post it seems to have a long life.
I am looking at the codex for the difference in treatment of the AJAX script file in admin and elsewhere and struggling to find it. Any pointers?
While I am here why on earth does WordPress feel the need to append the version number to the script? Is this part of its own encoding? (ajax.js?ver=3.5.1[from rendered source code])
and thanks for dealing with the replies to everyone most helpful.
The version numbers are appended for caching reasons. See this post: http://pippinsplugins.com/uncached-script-and-style-updates/
Wonderful tutorial!
Thank you so much – I’m new-ish to plugin dev and this was thoroughly enlightening. Please keep up the good work!
R