I am trying to create a ajaxform on the front side. I am using the code

    jQuery.ajax(
        {
            type: "post",
            dataType: "json",
            url: ajaxurl,
            data: formData,
            success: function(msg){
                console.log(msg);
            }
        });

for which I am getting error

Uncaught ReferenceError: ajaxurl is not definedworklorAjaxBookForm @ 
?page_id=2:291onclick @ ?page_id=2:202

While using similar code on the admin backend works. What url must I use to process the ajax request?

up vote 39 down vote accepted

In backend there is global ajaxurl variable defined by WordPress itself.

This variable is not created by WP in frontend. It means that if you want to use AJAX calls in frontend, then you have to define such variable by yourself.

Good way to do this is to use wp_localize_script.

Let's assume your AJAX calls are in my-ajax-script.js file, then add wp_localize_script for this JS file like so:

function my_enqueue() {

    wp_enqueue_script( 'ajax-script', get_template_directory_uri() . '/js/my-ajax-script.js', array('jquery') );

    wp_localize_script( 'ajax-script', 'my_ajax_object',
            array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue' );

After localizing your JS file, you can use my_ajax_object object in your JS file:

jQuery.ajax(
    {
        type: "post",
        dataType: "json",
        url: my_ajax_object.ajax_url,
        data: formData,
        success: function(msg){
            console.log(msg);
        }
    });
  • 2
    can I use wp_localize_script without having to use wp_enqueue_scritp? – dread_cat_pirate Jun 3 '15 at 8:12
  • 1
    You use script handle in wp_localize_script, so you have to use wp_enqueue_script for at least one of your scripts. But... Not using wp_enqueue_script is not a good idea (you risk some conflicts and dependencies problems). – Krzysiek Dróżdż Jun 5 '15 at 6:04
  • i don't have any external script to load, i just want to use ajaxurl to make an ajax call. is that not possible? – R T Sep 23 '15 at 7:05
  • And where will you put this AJAX call? As inline script? It's a very bad idea... – Krzysiek Dróżdż Sep 23 '15 at 7:07
  • i've a separate form, in that i'm managing validation and on submit, an ajax call to submit form with of course wordpress way by adding hook. anyway I've figured out the way for using ajaxurl. – R T Sep 23 '15 at 7:25

to use ajaxurl directly, in your plugin file add this:

add_action('wp_head', 'myplugin_ajaxurl');

function myplugin_ajaxurl() {

   echo '<script type="text/javascript">
           var ajaxurl = "' . admin_url('admin-ajax.php') . '";
         </script>';
}

you can then use the ajaxurl for ajax request.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.