ajaxurl not defined on front end

Question

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?

Answer 1

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);
        }
    });

Answer 2

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.

Answer 3

The 2021 way is a bit different ;-)

function my_enqueue() {

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

    wp_add_inline_script( 'ajax-script', 
        'const myVariables = ' . json_encode( 
                                    array(
                                        'ajaxUrl' => admin_url( 'admin-ajax.php' ),
                                        ) ),
        'before' );

}
add_action( 'wp_enqueue_scripts', 'my_enqueue' );

Source: https://developer.wordpress.org/reference/functions/wp_add_inline_script/#comment-4632

Answer 4

i have use below code in wordpress site.
we can use below code for setup ajaxurl like this.

<?php echo esc_url(admin_url('admin-ajax.php')); ?>  

i have also added ajax example were we can use above line.

 function setNotificationRead() {
        fetch('<?php echo esc_url(admin_url('admin-ajax.php')); ?>', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
            },
            body: `action=yourFunctionsAction`,
            credentials: 'same-origin'
        }).then(response => {
            return response.json();
        }).then(data => {
            if (data.status === 'true') {
                console.log('Do something...');
            }
        });
    }

Answer 5

I got this to work after many hours...and trials and errors. So, I do share how to make ajax work in wordpress with an example (started with https://www.tweaking4all.com/web-development/wordpress/wordpress-ajax-example/#comment-562814 and adapted the example)

--use chrome developer tools and take off cache from network tab --look to console if you get any errors, first goal is to get to console "ready!" when you click the button and if all works you get some nice output too!

--add to wordpress website as custom html block:

<div id="receiving_div_id">
   <p>Nothing loaded yet</p>
</div>
<button id="button_to_load_data">Get Ajax Content</button>

--add to theme/js/button.js (create js folder):

   jQuery("#button_to_load_data").click(function() {
        console.log( "ready!" );
      var data = {
         'action'   : 't4a_ajax_call', // the name of your PHP function!
         'function' : 'show_files',    // a random value we'd like to pass
         'fileid'   : '7'              // another random value we'd like to pass
         };
       
      jQuery.post(my_ajax_object.ajax_url, data, function(response) {
         jQuery("#receiving_div_id").html(response);
      });
   });

--add to theme functions.php:

 /* custom script in theme functions.php */

/* read button.js (->my-script) and localize admin-ajax.php for my-script */
function add_my_script() {

  wp_enqueue_script( 'my-script', 
         get_template_directory_uri() . '/js/button.js', 
         array ( 'jquery' ), 
         false,
         true
  );
  
      wp_localize_script( 'my-script', 'my_ajax_object',
            array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );

}
add_action( 'wp_enqueue_scripts', 'add_my_script' );



/*ajax result */

add_action('wp_ajax_t4a_ajax_call', 't4a_ajax_call');  // for logged in users only
add_action('wp_ajax_nopriv_t4a_ajax_call', 't4a_ajax_call'); // for ALL users

function t4a_ajax_call(){

   echo 'Ajax call output:';

   echo '<pre>';
   var_dump($_POST);
   echo '</pre>';

   wp_die();// this is required to terminate immediately and return a proper response
}