I asked this over at the Wordpress side of Stackexchange, but ran out of answers that led me anywhere, so was hoping someone here could help. Sorry if this cross-post breaks a rule. The original was here. https://wordpress.stackexchange.com/questions/95075/jquery-ajax-call-not-executing-in-plugin
I've been working on a class for my free plugins that outputs a "Donate" form. The "No thanks" dismissal link hides the form and runs an AJAX call to update a WP Option keeping track of the dismissal.
I'm having issues getting the called PHP function to actually fire. I added the "success" function to output an echo that I added to the PHP function called by the AJAX (typically, the function has no output, only a WP Option update), but "data" is always 0 and nothing happens in the database.
I have several other AJAX calls in this plugin, all of which work, but this is the only one that is inside of a class. Earlier in development of the class, it worked, but I can't figure out what I could've done to break it. I've even tried stripping it down to just a declaration of the AJAX registration and a function that outputs a test message with no success.
I'm guessing that WP isn't actually able to use the function for some reason.
Here's the pertinent part of my jQuery AJAX call
// Create the AJAX data
ajax_call_data = {
'action': 'dismiss_ppd_dmgr',
'nonce': $nonce
};
// Call the AJAX function to update the options
jQuery.ajax({
url: ajaxurl,
type: 'post',
data: ajax_call_data,
success: function(data) { alert( data ) }
});
In the class, I have an attribute ajax_call, which is set at class instantiation and I'm adding my call to Wordpress like so. I've verified that $this->ajax_call is populated properly and also tried hardcoding it, instead of using the variable.
add_action( 'wp_ajax_' . $this->ajax_call , array( &$this , 'dismiss_form' ) );
$this->ajax_call outputs the "dismiss_ppd_dmgr". I've echoed wp_filter and found wp_ajax_dismiss_ppd_dmgr registered pointing to dismiss_form() in my class. But the result is always 0 and nothing is updated in the database.
Things I've tried:
with and without &
hard-coded instead of with $this->ajax_call
calling the add_action directly in the constructor as well as putting it inside of a function that's called by an admin_init action
creating the AJAX add_action outside of the class as
add_action( 'wp_ajax_dismiss_ppd_dmgr' , array( $ppd_dmgr , 'dismiss_form' ) );
Does anyone have any ideas as to why WP doesn't like my AJAX call?
Related
So, I'm trying to send a post request to a php script of mine.
On the web I'm in a page like: https://yyy.yyy/test-page
My ajax url is set as such:
url: "https://yyy.yyy/test.php"
But then it returns a 404 error with the following url:
https://yyy.yyy/test-page/test.php
And it definitely won't find in the php file in that path, since it is located at root. Moving the php to another folder is not an option.
This website is located in a WordPress server.
Here's the js code:
$.ajax({
url: "https://yyy.yyy/test.php",
method: "POST",
type: "Json",
data: data,
success: function (res) {...}
});
If you're wanting to make use of Ajax and are running WordPress, you should look into writing a plugin and making use of the hooks and functions available to make this easier as WordPress will do a lot of heavy lifting.
I see you mentioned it can't be moved, but if it's at all possible to at least try and replicate the PHP code into a plugin (or a theme although that's less ideal and might not work properly) then it'll make things easier.
Take a look at using Ajax in plugins.
The JavaScript (jQuery) bit:
$.ajax({
data: {
action: 'my_ajax_request'
},
type: 'post',
url: SOWP_AJAX.admin_ajax,
success: function(response) {
console.warn( response );
}
});
The PHP bit (Part 1):
This ensures that the URL that you post your Ajax function to is mapped to an actual URL. In this case, the WordPress Ajax handler at admin-ajax.php.
wp_localize_script(
'sowp_js', // this is the script name that should be used to enqueue the JavaScript code above
'SOWP_AJAX',
array(
'admin_ajax' => admin_url('admin-ajax.php')
)
);
The PHP bit (Part 2):
Put this inside a plugin or theme file that is activated. The hook my_ajax_request must match the request action in the Ajax request and the function name so it's called correctly.
add_action( 'wp_ajax_my_ajax_request', 'my_ajax_request' ); // the hook that is triggered when the request is made
function my_ajax_request() {
echo 'my ajax request works'; // print something out
wp_die(); // stop script execution
}
Once you've got all of the above in place, when the Ajax request is working and runs, you should see my ajax request works printed in your browsers console. If it returns 0 then it means the request failed somewhere. If it does fail, it usually means the action hook has been registered and called so something might be spelt wrong or missing.
I am trying to pass data from an ajax call to a specific page of Wordpress.
Below is the code I am using:
jQuery.ajax({type: "POST",
url: 'single-member-page.php',
data:{ size: 'item' },
success: function(){
//alert(data);
jQuery('#display-member-size').text(data);
}
});
The script does not work for WP. I also inspected the page using the console and I get an error:
single-member-page.php" NOT FOUND
I am new to WP and I do not know how to pass data from an ajax call to a specific page.
#Daniel
You asked a very good question, before proceeding to solution we need to understand thumb rules of wordpress ajax.
Thumb Rules:
According to wordpress standards all the ajax request should come to "ajaxurl" in javascript. It actually contains the "wp-admin/admin-ajax.php" file path.
Example:
$.ajax({
url: ajaxurl,
data: {'action':'generateCptApiKey'},
success:function(data) {
console.log(data);
},
error: function(errorThrown){
console.log(errorThrown);
}
});
If you are doing some sutff in wp-admin dashboard section or related to wp-admin section like creating an option page in wp-admin dashboard area, than "ajaxurl" global variable will be always available there in javascript.
If case of this ajax request is initialized from front end page/post than you have to specify admin-ajax.php files path using following method and better if you localize this for front-end javascript,So it will be available in javascript variable like it is available in wp-admin dashboard section.
In order to achieve this we need to add few more lines of code.
Method:
Updated Example code front-end ajax call :
// Register the script
wp_register_script( 'ajaxsettings', 'path/to/ajaxsettings.js' );
// Localize the script with new data
$ajaxsettings = array(
'ajaxurl' => admin_url('admin-ajax.php')
);
wp_localize_script( 'ajaxsettings', 'ajaxsettings', $ajaxsettings );
// Enqueued script with localized data.
wp_enqueue_script( 'ajaxsettings' );
$.ajax({
url: ajaxsettings.ajaxurl,
data: {'action':'generateCptApiKey'},
success:function(data) {
console.log(data);
},
error: function(errorThrown){
console.log(errorThrown);
}
});
After this we need to write method to handle this ajax request and send output back to the ajax call.
For detecting ajax request call in wordpress they have two standard hooks, hooks are just events like when i send a ajax request, wordpress ajax related hook will trigger and i can call any function on that trigger.
So basically for handling ajax request below are two hooks:
wp_ajax_(action) : It handles request from authenticated / logged in users. (Used for back-end wp-admin dashboard related tasks )
wp_ajax_nopriv_(action) : It handles front-end unauthenticated requests.
(Used for front-end page/post ajax call related tasks )
Here (action) is the name of the method that you have to code in your current theme function.php file, and this method will handle this ajax request.
Examples:
Object oriented style:
add_action( 'wp_ajax_cleanResponseFiles', array($this, 'cleanResponseFiles'));
add_action( 'wp_ajax_nopriv_cleanResponseFiles', array($this, 'cleanResponseFiles'));
Note: Here "cleanResponseFiles" is Method of class that will handle ajax request. and $this is pointing current class object.
Procedural style:
add_action( 'wp_ajax_cleanResponseFiles', 'cleanResponseFiles');
add_action( 'wp_ajax_nopriv_cleanResponseFiles','cleanResponseFiles');
Note: Here "cleanResponseFiles" is function added in current theme function.php file and it will handle ajax request.
In this we are considering that ajax request can be made either from wp-admin dashboard or from front-end page/post.
Example ajax request handler method:
function cleanResponseFiles(){
echo "<pre>";
print_r($_POST);
echo "</pre>";
//Always use exit() in ajax request handler function end
exit();
}
Thumb Rule :
Always use exit() method in ajax request handler method, it's essential.
The best practice of sending ajax request is use Wordpress_nonce.
It's just for avoding CRSF (Cross site request forgery ) by adding Honeypot , A hidden input field with generated random key and at in request handler method it should be validated.
These are the methods that we can use for creating Wordepress nonce and verifying Wordpress nonce and ajax request handler or simple http request handler.
Wordpress Nonce Methods:
wp_create_nonce : Used for creating random key for sending in forms as a hidden field.
wp_verify_nonce : Used for verifying random key in request handler method.
I will attach a working example of wordpress ajax call ASAP in this comment.
Just a brief: All ajax post should be sent to admin-ajax.php Each request needs to supply at least one piece of data called action. Based on this action, the code in admin-ajax.php creates two hooks.
if the value of action is cusom_action, wp_ajax_custom_action and wp_ajax_nopriv_custom_ction are auto created. Check WordPress coddex. https://codex.wordpress.org/AJAX_in_Plugins
Refer this https://codex.wordpress.org/Plugin_API/Action_Reference/wp_ajax_(action)
Basically you create an action like wp_ajax_myaction, this you can define in your functions.php or somewhere where you seem fit. And then call it as shown in the example(Usage section) on the page.
EDIT:
Adding some code to help you understand
In your functions.php
add_action( 'wp_ajax_my_ajax', 'my_ajax' );
add_action('wp_ajax_nopriv_my_ajax', 'my_ajax');
function my_ajax() {
die( "Hello World" );
}
In your JS:
$.ajax({
url: "http://yoursite.com/wp-admin/admin-ajax.php",
data : {action : 'my_ajax'},
success: function( data ) {
alert( 'The code says ' + data);
}
})
Few things about the code:
This is just a quick and dirty code, mostly ripped off from the example just to show you how it will work.
The no_priv action is used for allowing unauthorized access(i.e to non-admin users as well)
The url is usually not hardcoded in the way shown in the example, people usually pass it to the script using admin_url( 'admin-ajax.php' )
The action, sent in the data determines which function should be called. (my_ajax in our case)
Let know if you still have issues.
I'm using wpdiscuz plugin for comment-system.
But i have one trouble: if i add a comment, sure, that my <?php comments_number( $zero, $one, $more ); ?> is not updated.
I'm new to wordpress, and i need to know, what way is the best for adding dynamical comments count update?
For example checking comments count every 30sec, i can write it with jQuery: no problem.
But how can i access comments count via ajax, without huge amount of custom code? Is it real?
Using AJAX in WordPress is pretty easy, because WP has already built-in core functionality for handling AJAX requests. I had created tutorial on submitting form via AJAX in WP here. I believe that in your situation you would not submit form, but just want to repeatedly request to some action in server-side, where you will return comments count.
So create post ajax function with jQuery like this:
var data = {
// ... some data
'action' => 'get_comments_count', // This data 'action' is required
}
// I specified relative path to wordpress ajax handler file,
// but better way would be specify in your template via function admin_url('admin-ajax.php')
// and getting it in js file
$.post('/wp-admin/admin-ajax.php', data, function(data) {
alert('This is data returned from the server ' + data);
}, 'json');
Then in you functions.php, wrtie something like this:
add_action( 'wp_ajax_get_comments_count', 'get_comments_count' );
add_action( 'wp_ajax_nopriv_get_comments_count', 'get_comments_count' );
function get_comments_count() {
// A default response holder, which will have data for sending back to our js file
$response = array();
// ... Do fetching of comments count here, and store to $response
// Don't forget to exit at the end of processing
exit(json_encode($response));
}
And then repeatedly call ajax function in js file with setInterval or setTimeout.
This is a quick example, to understand more on how ajax in WordPress works, read the tutorial.
Hope it helps!
I am performing an jquery ajax request inside my wordpress. This calls an internal php script.
This php script needs to be able to access certain wordpress features like... functions.php
which is simple for me to include.
What i cant do is access info like the current wordpress user, the $wpdb object.
My question is... is there some wordpress file which i can include which gives me access to all that data (and functions.php).
I hope you understand what i am accessing as i am aware that was probably THE crappest explaination in the world
:D
THE BAD WAY (as pointed out by others)
When I created some custom PHP to use with wordpress I included the wp-load.php file. Which then loads everything required, including $wpdb.
require_once('wp-load.php'); // relative path from your PHP file
global $wpdb;
$wpdb->show_errors = TRUE; // useful for when you first start
I found it was a decent starting point for a quick fix. However you have to remember this will load in a lot more functionality than you may actually require. Thus resulting in slower performance times.
THE GOOD WAY
Once functionality became more complex the 'bad' implementation wasn't proving to be all that great. So I moved onto writing plugins instead. The WordPress codex contains good information on working with AJAX and plugins: http://codex.wordpress.org/AJAX_in_Plugins
In the most basic form you will need to register your AJAX hook:
// 'wp_ajax_foo' is the hook, 'foo' is the function that handles the request
add_action( 'wp_ajax_foo', 'foo');
You will also need the corresponding function (in this case foo):
function foo() {
// handle the AJAX request
$bar = $_POST['bar'];
}
Then in your JavaScript you identify which hook to use with the action attribute but leave out the wp_ajax part:
$.post(ajaxurl, { action: 'foo', bar: true }, function(response) {
// do something with response
});
I typically set up an action hook in functions.php to listen for AJAX requests based on a prefix, like 'wp_ajax_*'. You will need to have a reference to wp-load.php in your javascript as well, which can be added using wp_head. Once this is set up, just use a variable called "action" in your AJAX request to indicate which function you want to use.
// add javascript reference to wp-load.php as ajaxurl
function core_add_ajax_url(){
?>
<script type="text/javascript">var ajaxurl = "<?php echo site_url( 'wp-load.php' ); ?>";</script>
<?php
}
add_action('wp_head', 'core_add_ajax_url', 1 );
// process all wp_ajax_* calls
function core_add_ajax_hook() {
/* Theme only, we already have the wp_ajax_ hook firing in wp-admin */
if ( !defined( 'WP_ADMIN' ) && isset($_REQUEST['action']) ){
do_action( 'wp_ajax_' . $_REQUEST['action'] );
}
}
add_action( 'init', 'core_add_ajax_hook' );
// Hook your function to the 'wp_ajax_*' for processing
function my_function(){
// do some things and then return JSON
}
add_action( 'wp_ajax_my_function', 'my_function' );
Your Javascript request would look similar to the following:
jQuery.postJSON(
ajaxurl, // request url
{ action: 'my_function' }, // request parameters
function (response){ // callback
// handle the response
}
);
AJAX requests in WordPress are typically sent via special hooks in the admin-ajax.php file on the wp-admin directory. From there you'll have access to all of WP functions.
here is a good place to start
You shall never include neither wp-load.php, nor wp-config.php - this is a bad practice, and this article explains why: http://ottodestruct.com/blog/2010/dont-include-wp-load-please/. Also, Wordpress.org team does not recommend including any Wordpress core files directly.
Instead, you can utilise the functionality of admin-ajax.php - don't be deceived by 'admin' part - it is used in both front-end and back-end scripts. Here is an example: http://wp.smashingmagazine.com/2011/10/18/how-to-use-ajax-in-wordpress/
Before I begin, I'm using PHP and JS lib Prototype to handle Ajax in my code.
So my problem is the following:
I'm using the following function to load a php file into a target DIV
function ajaxUpdater(id, url)
{
new Ajax.Updater('targetDiv', 'data.php', {asynchronous: true});
}
using the onClick function within a button, I grab the contents of data.php and display it in a DIV with the id of 'targetDiv'.
the problem is this.
There are certain things within data.php that i want to have hidden and only shown when an event is triggered.
I've been trying loads of different solutions, but nothing seems to work.
(just to add to the confusion, functions work when data.php is opened individually, but not when data.php is loaded using my ajax function.
Any help or clues or anything will be much appreciated!
Hiroki,
I'd suggest passing some a parameter with your Ajax method and using some logic in data.php to pick and choose what data to send back. Here's an example of how I pass parameters with my prototype calls.
new Ajax.Updater('targetDiv', 'data.php', {
parameters: { myParam1: 'hello', myParam2: 'world'}
});
The go into your data.php file to create some logic. Note that by default, prototype's method to send params is POST, but you can always change that by declaring method: 'get' in the same Ajax.Updater call, like so:
new Ajax.Updater('targetDiv', 'data.php', {
method: 'get',
parameters: { myParam1: 'hello', myParam2: 'world'}
});
Check out the AJAX section of the Prototype API. In it, it talks about an option you can use called 'evalJS' that you can set to true. When you have this option set, any javascript returned by the updater will be evaluated and ran like normal.
function ajaxUpdater(id, url) {
new Ajax.Updater('targetDiv', 'data.php', {
asynchronous: true,
evalJS: true
});
}