Simple Ajax Example

By Devin

This is a basic example of how to use AJAX in WordPress in the admin area. It shows how to take a variable from javascript, pass it to a PHP function (altering it slightly), and then pass it back to the javascript.

This assumes you already know how to enqueue javascript, etc.

Javascript Piece

[gist id=”69a305053e35a10584f94d6011bba2d6″ file=”simple-ajax-example.js”]

PHP Piece

[gist id=”69a305053e35a10584f94d6011bba2d6″ file=”simple-ajax-example.php” lines=”1-27″]

Using with a Theme

There’s two differences when using this with a theme or frontend.

PHP Update

In the PHP piece, you need to add also add this line:

[gist id=”69a305053e35a10584f94d6011bba2d6″ file=”simple-ajax-example.php” lines=”28-30″]

This allows visitors that aren’t logged in to run the ajax request.

Javascript Update

In the javascript piece on the frontend, you’ll likely see this error in the console:

wordpress ajaxurl is not defined

This is because WordPress does not define ajaxurl as a global variable on the frontend. Instead, we’ll need to define it ourselves. An easy way to do this if we’re already enqueuing our script is to use wp_localize_script to output the URL:

[gist id=”69a305053e35a10584f94d6011bba2d6″ file=”example-ajax-enqueue.php”]

If you view the source on the frontend, you should now see a global variable defined on the frontend called “example_ajax_obj”. To get the original javascript working on the frontend, update the ajaxurl variable to use this new variable:

url: example_ajax_obj.ajaxurl

About Devin

I am a developer based in Austin, Texas. I run a little theme shop called DevPress and help manage a WooCommerce shop with Universal Yums. Find me on twitter @devinsays.

46 Responses

  2. Luis

    Hi Devin,
    Simple and effective, i have seen others ajax tutorials with wordpress (complex ones), but until now, i do really understand how it works, the only question i still have is this:
    In this hook:

    add_action( 'wp_ajax_example_ajax_request', 'example_ajax_request' );

    the hook name must start with “wp_ajax_xxxxxxx” because wp define it to be in that way, right?

    1. Siva

      Since WP 2.8 version, ajaxurl works only for administration dashboard purpose.
      try to use
      wp_localize_script( 'ajax-script', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );

      1. Paul

        Hi,

        This doesn’t seem to work for me. I added the wp_localize_script bit to my functions.php but still get the ajaxurl is not defined error. I’m using your tutorial on a wp frontend page.

        Thanks

      2. Jos Faber

        Paul, use ajax_object.ajaxurl, because “ajax_object” is the name that WordPress will give the javascript object which will contain all the supplied variables.

  6. Henry

    Is it possible to use the PHP function for logged-out users only? i.e. Can I omit the following?

    add_action( 'wp_ajax_example_ajax_request', 'example_ajax_request' );

      1. Henry

        Thanks for your reply.

        That’ll be fine. My use case is a registration form so the end user will never be logged-in at the point at which this fires.

    1. Devin

      That works if you’re purely pulling from the front end. I’d also look at the “Load More” code in JetPack if you’re looking to pull entire posts (and want scripts, shortcodes, etc execute correctly).

  9. tarun

    Hi, great tutorial, simple and to the point. I see that the jquery code logs the data echoed by the php function. Is there anyway to use the variables defined in the php function inside the jquery success output?

    Thanks

  10. Jeroen

    hey dude,

    Thanks. This helped me a lot. Was building a plugin and got response 0 all the time.

    I forgot to require_once() the actual php file that was used for processing.

  11. Darren Ladner

    Devin, great simple tutorial but I would try to update the tutorial with using a nonce or either tell beginner AJAX developers that using nonce should be done for security reasons.

    Again Nice Simple Tutorial for Beginners.

    DL

  13. Jerome Gaynor

    I solved the “ajaxurl is not defined” issue in this way:

    (1) Added this to my php:

    echo(‘\n’);

    (2) Added this to the top of my javascript:

    var ajaxurl = $(“input#ajaxurl”).val();

    Worked like a charm after that. Thanks Devin!

  14. Jerome Gaynor

    Sorry, the comment removed my code… I’ll try again. The bit I added in step 1 is:
    <input type="hidden" id="ajaxurl" value="” />

    1. Devin

      Yeah, sorry, code gets stripped out of comments. You can post a it in pastebin to share. But I would suggest the wp_localize_script method over something like that.

  16. Garrett

    Hello, I’m having a very strange issue.

    The AJAX is only working on one page. It won’t work with any other pages on the site. In the console, it says “Can’t find variable: ajaxurl”. I’m loading the JS globally as well. I could see that happened if I loaded it conditionally such as is_page() or something like that but its global. Am I missing something simple?

  18. Cezar

    finnaly i understood how ajax in wp should work (after a whole day of searches) but is not working for me because the ajaxurl is not defined.

    tried the:

    wp_localize_script( ‘ajax-script’, ‘ajax_object’, array( ‘ajax_url’ => admin_url( ‘admin-ajax.php’ ) ) );

    also:

    wp_localize_script( ‘ajax-script’, ‘ajax_object.ajaxurl’, array( ‘ajax_url’ => admin_url( ‘admin-ajax.php’ ) ) );

    but still it can’t recognize the ajaxurl…

    i’m new to wp so i would be glad if u can update the post with how to register the ajaxurl variable.

    also i can see that im not the only one having this question.

    thanks

  19. Zack

    @Cezar @Garret

    Make sure in your js you are calling the function name of your script

    Example if the following

    wp_localize_script( ‘ajax-script’, ‘ajax_object’, array( ‘ajaxurl’ => admin_url(‘admin-ajax.php’ ) ) );

    Then your js url would be ajax_object.ajaxurl

  26. Greg

    I have spent a full day on this. All I get returning to the script is the html of the page itself. It does’t make any sense. I don’t know if using the Genesis framework is causing issues.

  28. Leonardo Cortes

    Thank you very much but i tried the example on my wordpress website and i still getting nothing, only empty response, it seems the function isn’t executing, how can i call the url to activate the ajax function inside php page? can you give me an example?
    I readed the other comments but nothing to do
    Thank you in advance.

    1. Devin

      Hi Leonardo. I can see how this tutorial may have been confusing if you were trying to use it on the frontend. I’ve updated the post with additional snippets that explain in more detail how to use it with a theme.

  31. Zisis

    I have a question: I want to use an external custom.php file (located inside my child theme) for receiving the ajax request and processing and not using a simple function insite WP’s functions.php file. Is that possible?

Leave a Reply