I have searched for this a lot but still didn't found any solution for this . I want to call an ajax action after submission of post comment . How can I do this with WordPress ?
Without code, I cannot give you the following steps with code myself:
Track the event that triggers comment submission and on which DOM element it happens.
In the event handler, send an XMLHTTPRequest to server using jQuery.ajax.
Make sure you create the ajax call in the Wordpress way, and so by sending requests to wp-admin/admin-ajax.php and puting logic under functions.php. Add the die() function.
I would filter the comment with a WordPress filter. You may not need an AJAX request at all. But I'm not exactly sure why you need AJAX. To learn more about this filter.
function preprocess_comment_handler( $commentdata ) {
//some code
return $commentdata;
}
add_filter( 'preprocess_comment' , 'preprocess_comment_handler' );
If you do need AJAX, here's how to make it run in WordPress. You'll need to use wp_localize_script() to get your AJAX to admin-ajax.php.
//add wp_localize_script to your functions.php
//make sure to enqueue the js file you are writing to and it's dependencies
function acarter_enqueue_scripts() {
wp_enqueue_script( 'jquery' );
wp_enqueue_script('your-script', get_template_directory_uri() . '/js/theme.js');
wp_localize_script('your-script', 'your_script_vars', array(
'ajaxurl' => admin_url( 'admin-ajax.php' )
)
);
}
add_action( 'wp_enqueue_scripts', 'acarter_enqueue_scripts' );
//do your AJAX call in the file you just enqueued
jQuery( document ).ready( function($) {
//Ajax Form Processing
var $form = $( '#button' )
$form.submit( function (e) {
e.preventDefault();
$.ajax({
type: '',
url: your_script_vars.ajaxurl,
data: {
action: 'function_name_of_the_callback',
//key : values of stuff you want in the php callback
},
dataType: 'json',
success: function (response) {
if ( true === response.success ) {
console.log( 'success!!' );
});
} else if ( false === response.success && response.data ) {
window.alert( 'doing it wrong' );
}
}
});
});
});
You maybe able to send the data to the aforementioned filter, thus using the filter as the callback, but, I've never tried this. At the least you'll know how to setup AJAX in WordPress.
Related
I'm currently developing a plugin. In the plugin's main.php file, I have the following code to do an ajax post request:
main.php
<?php
add_action( 'admin_footer', 'first_ajax' );
function first_ajax() { ?>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#mybutton').click(function(){
$.ajax({
url: '<?php echo admin_url('admin-ajax.php'); ?>',
type: 'POST',
data: {
action : 'second_ajax'
},
success: function(response) {
console.log("successful");
},
error: function(err) {
console.log(err);
}
});
});
});
</script>
<?php } ?>
But on the browser console, I see an error object.
Screenshot 1
Screenshot 2
I wrote this function taking as reference: https://codex.wordpress.org/AJAX_in_Plugins.
Any help is appreciated.
You're calling javascript from a php function tho your javascript is "raw" and not wrapped in a php variable. We're also missing a bunch of information in regard to the ajax action function (the php part which is supposed to answer to the request).
An ajax request need two things to be able to work properly.
The javascript call to action function and the backend php action function.
It a standard to use anonymous php functions as action functions.
Ajax action functions hooks are prepended with a wp_ajax_{$action} for public function (non-logged-in users) and wp_ajax_nopriv_{$action} for logged-in users. A logged-in user won't be able to use a public ajax function same goes for non-logged-in users.
The {$action} part is set in your javascript call to action function.
It is standard to pass a nonce as well as the ajax admin url through the localize_script() function. Localizing data only works if the script has already been registered.
An example of registering/enqueuing a script and localizing varaibles: functions.php
<?php
wp_enqueue_script( 'my-ajax-script', trailingslashit( get_template_directory_uri() ) . 'assets/js/my-ajax-script.js', array(), wp_get_theme()->version, true );
wp_localize_script( 'my-ajax-script', 'localize', array(
'_ajax_url' => admin_url( 'admin-ajax.php' ),
'_ajax_nonce' => wp_create_nonce( '_ajax_nonce' ),
) );
(The Object's name localize and variables _ajax_url and _ajax_nonce used in wp_localize_script() are just a personal preference).
A basic javascrip ajax call to action function looks like this: my-ajax-script.js
$( '#selector' ).click( function ( event ) {
$.ajax( {
type: 'POST',
url: localize._ajax_url,
context: this,
data: {
_ajax_nonce: localize._ajax_nonce,
action: '_wpso_73933867', //where this match {$action} from wp_ajax_{$action} in our php action function.
},
success: function ( response ) {
console.log( response );
//...
},
} );
} );
Where we use are localized variables: localize._ajax_url and localize._ajax_nonce (best practices).
A basic php ajax action function looks like this: functions.php
<?php
add_action( 'wp_ajax__wpso_73933867', function () {
if ( check_ajax_referer( '_ajax_nonce' ) ) {
//...
wp_send_json_success();
} else {
//...
wp_send_json_error();
};
wp_die();
} );
If the function is intended to be use by a non-logged-in user wp_ajax_nopriv should be prepended instead of wp_ajax_. Vice versa. If both case are supposed to be used, the function should be doubled.
I've been googling this for a while and have tried a number of things (for example nesting my formName and formData in the 'data:' attribute, but that resulted in parseerrors, so I'm guessing I'm pretty close to having this working! I've also removed those attributes and hard coded the items in my function, but the problem remains the same.
Everything appears to be OK and I get by success alert, but when I check my database the usermeta hasn't been updated. I don't know the best way to debug the PHP function either so any tips on that would be handy for the future!!
This is my ajax function which get's fired on blur:
function storeData(data) {
$.ajax({
type: 'POST',
formData: data,
formName: 'Testform',
action: 'storeApplicationData',
success:function( data ) {
console.log('stored form');
},
error: function(xml, error) {
console.log(error);
}
});
return false;
}
This is my PHP code in my functions file, I've hard-coded the values I'm passing in to update_user_meta for now, just to ensure that isn't the issue:
function storeApplicationData(){
update_user_meta('15', 'Testform', '12345678');
}
add_action('wp_ajax_storeApplicationData', 'storeApplicationData');
add_action('wp_ajax_nopriv_storeApplicationData', 'storeApplicationData');
I'm checking the database directly, the meta field doesn't get updated...
Any help would be appreciated!
I figured this out, I was missing the proper enqueing for my ajax url:
function theme_enqueue() {
$theme_url = get_template_directory_uri(); // Used to keep our Template Directory URL
$ajax_url = admin_url( 'admin-ajax.php' ); // Localized AJAX URL
// Register Our Script for Localization
wp_register_script( 'applications', "{$theme_url}/applicationform.js", array( 'jquery' ),'1.0', true);
// Localize Our Script so we can use `ajax_url`
wp_localize_script('applications','ajax_url',$ajax_url);
// Finally enqueue our script
wp_enqueue_script( 'applications' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue' );
I also added:
url: ajax_url,
to my ajax!
I'm trying to implement basic ajax. I've been following this tutorial. My JS fires when I click the button but I get a 400 from the ajax url: POST http://localhost:8080/wp-admin/admin-ajax.php 400 (Bad Request)
As far as I can tell, I haven't strayed far from the tutorial code. Her is my JS:
jQuery(document).ready(function($){
$('#baa_form').submit(function(){
var data = {
action: 'baa_response'
}
$.post(ajaxurl, data, function(response){
alert('Hello');
});
return false;
});
});
PHP:
<?php
function baa_add_menu() {
global $baa_settings_page;
$baa_settings_page = add_menu_page( 'Basic Admin Ajax', 'Basic Admin Ajax', 'edit_pages', 'basic-admin-ajax', 'baa_render_settings_page', false, 62.1 );
}
function baa_load_scripts( $hook ) {
global $baa_settings_page;
if ( $hook !== $baa_settings_page ) {
return;
}
$path = plugin_dir_url( __FILE__ ) . 'js/basic-admin-ajax.js';
wp_enqueue_script( 'basic-admin-ajax', $path, array( 'jquery' ) );
}
add_action( 'admin_menu', 'baa_add_menu' );
add_action( 'admin_enqueue_scripts', 'baa_load_scripts' );
function baa_render_settings_page() {
?>
<form id="baa_form" method="POST">
<div>
<input type="submit" name="baa_submit_button" id="baa_submit_button" class="button-primary" value="go ajax">
</div>
</form>
<?php
}
function baa_response() {
die( 'I got died' );
}
I've had a look inside admin-ajax.php and the only reason for returning a 400 that I can see is if I've failed to set an action. data['action'] is certainly set, unless I'm crazy.
Am I doing anything that's obviously wrong? What could be causing the 400 response?
update
To clarify, the JS fires but the request to admin-ajax.php receives a 400. You can see where the tutorial make has implemented similar JS here. (I haven't added a nonce yet but the video maker had already demonstrated it working without implementing a nonce.)
edit
I've updated the PHP to show the plugin's entire PHP file.
update 2
I've stripped the JS back to the essentials and followed the top example from Wordpress. The response is still 400. Which leads me to believe that it might be something I've overlooked in the php. At the moment, I don't understand why or what it might be.
jQuery(document).ready(function($) {
var data = {
'action': 'baa_response'
};
$.post(ajaxurl, data, function(response) {
alert('Got this from the server: ' + response);
});
});
You missed action, which will fired on your Ajax request. WordPress can't guess which function related to your Ajax call, and that's why just blocking it( 400 Bad Request ).
In the php file add this line:
add_action('wp_ajax_baa_response', 'baa_response');
You may also want to look at the Ajax in Wordpress documentation.
Please try like this,
Add this to your functions.php,
$path = plugin_dir_url( __FILE__ ) . 'js/basic-admin-ajax.js';
wp_enqueue_script( 'basic-admin-ajax', $path, array('jquery'), '1.0', true );
wp_localize_script( 'basic-admin-ajax', 'action_linklist', array(
'ajax_url' => admin_url( 'admin-ajax.php' )
));
function baa_response() {
echo "something.....";
die();
}
in your JS file,
jQuery(document).ready(function($){
$('#baa_form').submit(function(){
jQuery.ajax({
url: action_linklist.ajax_url,
type: 'post',
data:{'action': 'baa_response'},
success: function (response) {
alert(response);
}
});
return false;
});
});
Hope this will helps you,
For more information, please visit.
Using AJAX with wordpress
AJAX in Plugins
I need to set a WC()->set inside a php jquery .get function. What do I need to do inside of the php file to get access to the WC(). Right now it is telling me that WC is undefined.
This is inside my cart.php file that displays the cart and shows two radio buttons for a delivery options.
Here is the script that handles the RB change (I've simplified just to get the function to execute the reload upon return from the php query):
<script>
jQuery(document).ready(function($){
$("#myid").change(function(){
console.log("RB Changed!");
passed_variable = "1";
$.get('http://www.example.com/test.php',
{pass_var: passed_variable},
function(data, status) {
console.log("returned");
location.reload();
});
});
});
</script>
And here is the PHP query:
<?php
global $woocommerce;
echo "START<BR>";
$temp = $_GET["pass_var"];
WC()->session->set('_delivery_loading', $temp);
// or
$woocommerce->session->set('_delivery_loading', $temp);
echo "DONE[" . $temp . "]";
?>
Why do you need to call test.php? If you use a wp_ajax_$action callback you will be within the WP framework and WC() will be loaded. here's an example cobbled together from the codex and jQuery .ajax().
Enqueue the script you will be making the ajax calls from:
function so_34107959_enqueue_script(){
wp_enqueue_script( 'so_34107959_script', plugins_url( '/js/so_34107959.js' , __FILE__ ), '1.0b', array('wc-add-to-cart'), true );
}
add_action( 'wp_enqueue_scripts', 'so_34107959_enqueue_script' );
Note that the wc-add-to-cart script is a dependency. I'm only doing that so we can use WooCommerce's localized script variables. If you need to use this somewhere that the add to cart script isn't used then you will need to wp_localize_script() and pass in the admin ajax url yourself.
Your script file so_34107959.js:
jQuery(document).ready(function($){
$("#myid").change(function(){
var passed_var = "1";
$.ajax({
url: wc_add_to_cart_params.ajax_url, // here's the ajax url from WooCommerce
data: { action: "add_foobar", pass_var: passed_var } // the action must match up to wp_ajax_$action
})
.done(function( data ) {
if ( console && console.log ) {
// should return either success or fail
console.log( data );
}
});
});
});
And finally this code is the callback for your ajax "action":
function so_34107959_ajax_add_foobar() {
$temp = isset( $_REQUEST["pass_var"] ) ? $_REQUEST["pass_var"] : '';
if( $test ){
WC()->session->set('_delivery_loading', $temp);
echo 'success';
} else {
echo 'fail';
}
die();
}
add_action( 'wp_ajax_add_foobar', 'so_34107959_ajax_add_foobar' );
add_action( 'wp_ajax_nopriv_add_foobar', 'so_34107959_ajax_add_foobar' );
Untested, so watch out for typos.
Further explanations:
The PHP code assumes that you are writing a plugin. You could cheat and put it in your theme's functions.php but I think the theme should be kept for presentation and any functionality should be in plugins.
The codex has this explanation for the wp_ajax_$action hook:
This hook allows you to create custom handlers for your own custom AJAX requests. The wp_ajax_ hook follows the format "wp_ajax_$youraction", where $youraction is your AJAX request's 'action' property.
This means that if you pass an "action" to the "data" in your .ajax() that same action will wind up as the tail end of your wp_ajax_$youraction callback.
In my example therefore here's the data bit from the .ajax() script:
data: { action: "add_foobar", pass_var: passed_var }
The action is "add_foobar". It can be whatever.
Then you append that action "add_foobar" to the end of "wp_ajax_" so that add_action() looks like:
add_action( 'wp_ajax_add_foobar', 'so_34107959_ajax_add_foobar' );
This is for the admin/logged in users. The "nopriv" in:
add_action( 'wp_ajax_add_foobar', 'so_34107959_ajax_add_foobar' );
means that the ajax hook is available to non-logged in users.
Lastly, so_34107959_ajax_add_foobar() is the the server-side function that will handle your ajax request.
I'm writing a Wordpress MU plugin, it includes a link with each post and I want to use ajax to call one of the plugin functions when the user clicks on this link, and then dynamically update the link-text with output from that function.
I'm stuck with the ajax query. I've got this complicated, clearly hack-ish, way to do it, but it is not quite working. What is the 'correct' or 'wordpress' way to include ajax functionality in a plugin?
(My current hack code is below. When I click the generate link I don't get the same output I get in the wp page as when I go directly to sample-ajax.php in my browser.)
I've got my code[1] set up as follows:
mu-plugins/sample.php:
<?php
/*
Plugin Name: Sample Plugin
*/
if (!class_exists("SamplePlugin")) {
class SamplePlugin {
function SamplePlugin() {}
function addHeaderCode() {
echo '<link type="text/css" rel="stylesheet" href="'.get_bloginfo('wpurl').
'/wp-content/mu-plugins/sample/sample.css" />\n';
wp_enqueue_script('sample-ajax', get_bloginfo('wpurl') .
'/wp-content/mu-plugins/sample/sample-ajax.js.php',
array('jquery'), '1.0');
}
// adds the link to post content.
function addLink($content = '') {
$content .= "<span class='foobar clicked'><a href='#'>click</a></span>";
return $content;
}
function doAjax() { //
echo "<a href='#'>AJAX!</a>";
}
}
}
if (class_exists("SamplePlugin")) {
$sample_plugin = new SamplePlugin();
}
if (isset($sample_plugin)) {
add_action('wp_head',array(&$sample_plugin,'addHeaderCode'),1);
add_filter('the_content', array(&$sample_plugin, 'addLink'));
}
mu-plugins/sample/sample-ajax.js.php:
<?php
if (!function_exists('add_action')) {
require_once("../../../wp-config.php");
}
?>
jQuery(document).ready(function(){
jQuery(".foobar").bind("click", function() {
var aref = this;
jQuery(this).toggleClass('clicked');
jQuery.ajax({
url: "http://mysite/wp-content/mu-plugins/sample/sample-ajax.php",
success: function(value) {
jQuery(aref).html(value);
}
});
});
});
mu-plugins/sample/sample-ajax.php:
<?php
if (!function_exists('add_action')) {
require_once("../../../wp-config.php");
}
if (isset($sample_plugin)) {
$sample_plugin->doAjax();
} else {
echo "unset";
}
?>
[1] Note: The following tutorial got me this far, but I'm stumped at this point.
http://www.devlounge.net/articles/using-ajax-with-your-wordpress-plugin
TheDeadMedic is not quite right. WordPress has built in AJAX capabilities. Send your ajax request to /wp-admin/admin-ajax.php using POST with the argument 'action':
jQuery(document).ready(function(){
jQuery(".foobar").bind("click", function() {
jQuery(this).toggleClass('clicked');
jQuery.ajax({
type:'POST',
data:{action:'my_unique_action'},
url: "http://mysite/wp-admin/admin-ajax.php",
success: function(value) {
jQuery(this).html(value);
}
});
});
});
Then hook it in the plugin like this if you only want it to work for logged in users:
add_action('wp_ajax_my_unique_action',array($sample_plugin,'doAjax'));
or hook it like this to work only for non-logged in users:
add_action('wp_ajax_nopriv_my_unique_action',array($sample_plugin,'doAjax'));
Use both if you want it to work for everybody.
admin-ajax.php uses some action names already, so make sure you look through the file and don't use the same action names, or else you'll accidentally try to do things like delete comments, etc.
EDIT
Sorry, I didn't quite understand the question. I thought you were asking how to do an ajax request. Anyway, two things I'd try:
First, have your function echo just the word AJAX without the a tag. Next, try changing your ajax call so it has both a success and a complete callback:
jQuery(document).ready(function(){
jQuery(".foobar").bind("click", function() {
var val = '';
jQuery(this).toggleClass('clicked');
jQuery.ajax({
type:'POST',
data:{action:'my_unique_action'},
url: "http://mysite/wp-admin/admin-ajax.php",
success: function(value) {
val = value;
},
complete: function(){
jQuery(this).html(val);
}
});
});
});
WordPress environment
First of all, in order to achieve this task, it's recommended to register then enqueue a jQuery script that will push the request to the server. These operations will be hooked in wp_enqueue_scripts action hook. In the same hook you should put wp_localize_script that it's used to include arbitrary Javascript. By this way there will be a JS object available in front end. This object carries on the correct url to be used by the jQuery handle.
Please take a look to:
wp_register_script(); function
wp_enqueue_scripts hook
wp_enqueue_script(); function
wp_localize_script(); function
File: functions.php 1/2
add_action( 'wp_enqueue_scripts', 'so_enqueue_scripts' );
function so_enqueue_scripts(){
wp_register_script( 'ajaxHandle', get_template_directory() . 'PATH TO YOUR JS FILE', array(), false, true );
wp_enqueue_script( 'ajaxHandle' );
wp_localize_script( 'ajaxHandle', 'ajax_object', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}
File: jquery.ajax.js
This file makes the ajax call.
jQuery(document).ready( function($){
//Some event will trigger the ajax call, you can push whatever data to the server, simply passing it to the "data" object in ajax call
$.ajax({
url: ajax_object.ajaxurl, // this is the object instantiated in wp_localize_script function
type: 'POST',
data:{
action: 'myaction', // this is the function in your functions.php that will be triggered
name: 'John',
age: '38'
},
success: function( data ){
//Do something with the result from server
console.log( data );
}
});
});
File: functions.php 2/2
Finally on your functions.php file there should be the function triggered by your ajax call.
Remember the suffixes:
wp_ajax ( allow the function only for registered users or admin panel operations )
wp_ajax_nopriv ( allow the function for no privilege users )
These suffixes plus the action compose the name of your action:
wp_ajax_myaction or wp_ajax_nopriv_myaction
add_action( 'wp_ajax_myaction', 'so_wp_ajax_function' );
add_action( 'wp_ajax_nopriv_myaction', 'so_wp_ajax_function' );
function so_wp_ajax_function(){
//DO whatever you want with data posted
//To send back a response you have to echo the result!
echo $_POST['name'];
echo $_POST['age'];
wp_die(); // ajax call must die to avoid trailing 0 in your response
}
Hope it helps!
Let me know if something is not clear.
Just to add an information.
If you want to receive an object from a php class method function :
js file
jQuery(document).ready(function(){
jQuery(".foobar").bind("click", function() {
var data = {
'action': 'getAllOptionsByAjax',
'arg1': 'val1',
'arg2': $(this).val()
};
jQuery.post( ajaxurl, data, function(response) {
var jsonObj = JSON.parse( response );
});
});
php file
public static function getAllOptionsByAjax(){
global $wpdb;
// Start query string
$query_string = "SELECT * FROM wp_your_table WHERE col1='" . $_POST['arg1'] . "' AND col2 = '" . $_POST['arg2'] . "' ";
// Return results
$a_options = $wpdb->get_results( $query_string, ARRAY_A );
$f_options = array();
$f_options[null] = __( 'Please select an item', 'my_domain' );
foreach ($a_options as $option){
$f_options [$option['id']] = $option['name'];
}
$json = json_encode( $f_options );
echo $json;
wp_die();
}