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:
1 2 3 4 5 6 7 8 | 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:
1 2 3 4 5 6 7 8 9 10 | jQuery.ajax( { type: "post", dataType: "json", url: my_ajax_object.ajax_url, data: formData, success: function(msg){ console.log(msg); } }); |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
