I am testing ajax in wordpress, and it basically works but I do not want the url to be hardcoded, so I tried using wp_localize_script to get an object to use, but I get an error saying: "ReferenceError: WPURLS is not defined" when alerting the siteurl in ajax_script.js.
functions.php
function my_scripts_method() {
wp_enqueue_script(
'ajax_script',
get_stylesheet_directory_uri() . '/js/ajax_script.js',
array( 'jquery' )
);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
wp_localize_script('ajax_script', 'WPURLS', array( 'siteurl' => get_option('siteurl') ));
ajax_script.js
$(function () {
$('#vru-btn').click(function() {
// alert('code');
$.post( 'wp-content/themes/wpcleantheme/ajax/test.php', function(data) {
$('#vru-div').html(data);
});
});;
alert(WPURLS.siteurl);
});
wp_localize_script( 'ajax_script', 'WPURLS',array('siteurl' => get_option('siteurl')));
Then in script:
WPURLS.siteurl will contain the url.
When wp_localize_script is called, it takes your data and passes it through to the script in object form.
Also keep in mind, localize_script needs to be called AFTER a script is registered and enqueued.
Related
I can send the data to admin-ajax.php and see that the data exists via my dev tools, however, I cannot seem to be able to take that data and update an ACF field, or perhaps my function to do that is not running.
Here is my PHP:
// define the actions for the two hooks created, first for logged in users and the next for logged out users
add_action( 'wp_ajax_add_dog_to_favorites', 'add_dog_to_favorites' );
add_action( 'wp_ajax_nopriv_add_dog_to_favorites', 'login_to_add_to_favorites' );
// define the function to be fired for logged in users
function add_dog_to_favorites() {
// nonce check for an extra layer of security, the function will exit if it fails
if (!wp_verify_nonce( $_REQUEST['nonce'], 'add_dog_to_favorites_nonce' )) {
exit('Woof Woof Woof');
}
// Get the post_id and user_id value from the form and update the ACF form "test_field".
$post_id = $_REQUEST["post_id"];
$userID = $_REQUEST('user_id');
$current_field = get_field('test_field', $userID);
update_field('test_field', $post_id, $userID);
if ($current_field === false) {
$result['type'] = 'error';
} else {
$result['type'] = 'success';
}
// Check if action was fired via Ajax call. If yes, JS code will be triggered, else the user is redirected to the post page
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
$result = json_encode($result);
echo $result;
} else {
header("Location: " . $_SERVER['HTTP_REFERER']);
}
// don't forget to end your scripts with a die() function - very important
die();
}
// define the function to be fired for logged out users
function login_to_add_to_favorites() {
echo 'You must log in to like';
die();
}
// used here only for enabling syntax highlighting. Leave this out if it's already included in your plugin file.
// Fires after WordPress has finished loading, but before any headers are sent.
add_action( 'init', 'enqueue_add_dog_to_favorites_script' );
function enqueue_add_dog_to_favorites_script() {
// Register the JS file with a unique handle, file location, and an array of dependencies
wp_register_script( 'add_favorites_script', plugin_dir_url( __FILE__ ) . 'add_favorites_script.js', array('jquery') );
// localize the script to your domain name, so that you can reference the url to admin-ajax.php file easily
wp_localize_script( 'add_favorites_script', 'myAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
// enqueue jQuery library and the script you registered above
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'add_favorites_script' );
}
and my JS:
jQuery(document).ready( function() {
jQuery(".not-favorite").click( function(e) {
e.preventDefault();
post_id = jQuery(this).attr("data-post_id");
nonce = jQuery(this).attr("data-nonce");
user_id = jQuery(this).attr("data-user_id");
jQuery.ajax({
type : "post",
dataType : "json",
url : myAjax.ajaxurl,
data : {action: "add_dog_to_favorites", post_id : post_id, nonce: nonce, user_id : user_id},
success: function(response) {
if(response.type == "success") {
console.log('success!');
}
else {
alert("Your like could not be added");
}
}
});
});
});
I have a console.log('success!'); line that should trigger if successful, but it is not triggering. The failure alert is also not triggering, which leads me to believe the function is not running at all? I feel like it's pretty close to working, but just can't get there.
Any help would be greatly appreciated!
Update: Ok. I found that the function is actually exiting because of the nonce verification:
if (!wp_verify_nonce( $_REQUEST['nonce'], 'add_dog_to_favorites_nonce' )) {
exit('Woof Woof Woof');
}
I have tried commenting this block of code out to see what would happen and I get a critical error.
Update: Fixed an error in my code that allows it to work without the nonce check.
$userID = $_REQUEST('user_id'); needs to be $userID = $_REQUEST['user_id'];
I still will need to get the nonce check working, but progress is being made. If anyone knows why that is not working, that would wrap this up!
I have a WordPress store using the Woocommerce plugin. I am currently able to add fees dynamically at checkout using the $woocommerce->cart->add_fee() function, assigned to the woocommerce_cart_calculate_fees hook. However, I would also like to be able to remove fees at checkout as well, but I haven't managed to make it work. I am attempting to trigger a PHP function via AJAX that will then clear the fees using this method.
When I simply echo 'success' from the clearfees() function, the AJAX call completes successfully. However, when I try calling $WC()->cart->remove_all_fees() AJAX fails with a 500 error.
Remove fees AJAX call from Javascript
function clear_fees() {
$.ajax({
type: 'GET',
url: entrada_params.admin_ajax_url,
data: { action : 'clear_fees' }
}).done( function( data ) {
console.log(data);
} )
.fail( function( jqXHR, textStatus, errorThrown ) { // HTTP Error
console.error( errorThrown );
} );
}
The clearfees function in my theme's functions.php
function clearfees() {
$WC()->cart->remove_all_fees();
wp_die();
}
// creating Ajax call for WordPress
add_action('wp_ajax_clear_fees', 'clearfees');
add_action('wp_ajax_nopriv_clear_fees', 'clearfees');
In my searching I've found very little information on the remove_all_fees() function in practice but it seems like the logical solution if I can get it to work.
i am doing this as i am apply fees in function.php
add_action( 'woocommerce_cart_calculate_fees', 'custom_fee_based_on_cart_total', 10, 1 );
function custom_fee_based_on_cart_total( $cart_object ) {
if(isset($_GET['implementation'])){
$charges = (int)$_GET['charges'];
$cart_total = (int)$cart_object->cart_contents_total;
$fees = $cart_total + $charges;
$applyfee = $_SESSION['applyfee'] ? $_SESSION['applyfee'] : 'true';
if($applyfee == 'true'){
$cart_object->add_fee( __( "Implementation Charges", "woocommerce" ), $charges, false );
}else{
$charges = 0;
$cart_object->add_fee( __( "Implementation Charges", "woocommerce" ), $charges, false );
}
}
}
and if i select remove fees option
function clearfees() {
$_SESSION['applyfee'] = 'false';
}
// creating Ajax call for WordPress
add_action('wp_ajax_clear_fees', 'clearfees');
add_action('wp_ajax_nopriv_clear_fees', 'clearfees');
and at last refresh cart page as i get success responce.
I've read a ton of similar questions, but can't seem to figure out the problem I'm having. Here's my plugin file (simplified just to get a return value):
// add JS file
add_action( 'wp_enqueue_scripts', 'ajax_patient_login_enqueue_scripts' );
function ajax_patient_login_enqueue_scripts() {
wp_enqueue_script( 'patient-login-ajax-scripts', plugins_url( '/js/scripts.js', __FILE__ ), array('jquery'), '1.0', true );
// this sets up hooks that the javascript file can use to access ajax calls
wp_localize_script( 'patient-login-ajax-scripts', 'patientlogin', array(
'ajax_url' => admin_url( 'admin-ajax.php' )
));
}
// login user
add_action( 'wp_ajax_nopriv_client_login', 'client_login' );
add_action( 'wp_ajax_client_login', 'client_login' );
function client_login() {
return 123;
}
My JavaScript is loading correctly, because I'm able to step through it in the browser. The problem seems to come down to its ability to access the action "client_login". Here's the JS:
// handle login
function handleLogin() {
$.ajax({
url: patientlogin.ajax_url,
data: { action: 'client_login' },
success: function( result ) {
// other functions...
}
});
}
'result' is always 0, and I can't figure out why. The browser seems to find the ajax_url without any problem, but it can't seem to find the action. I've probably missed something obvious, but I can't see it, and any help would be greatly appreciated.
Your callback function is returning a value. A callback should output a value instead. You need to echo 123 instead of returning it. Finally, call wp_die().
Example:
function client_login() {
echo 123;
wp_die();
}
Documentation: https://codex.wordpress.org/AJAX_in_Plugins
I have followed Matt Van Andel's Custom List Table Example to create an admin table which displays enquiries to a website via an external MySql database.
Having implemented the displaying of my data correctly, I have added a select box column which will allow the admin to update the 'status' of the enquiry (Awaiting Response, Responded etc.) and I need this to update my database via AJAX.
I need a change in these select boxes to trigger an AJAX call which will update the database with the new value but I seem to be struggling to link my external AJAX file to my plugins .php file correctly.
I have reached a point where (in the Network tab) I can see I am loading the .js file like so:
Code in list-table.php:
function ajax_test_enqueue_scripts() {
wp_enqueue_script( 'list-table', plugins_url( 'js/list-table.js', __FILE__ ), array('jquery'));
}
add_action( 'admin_enqueue_scripts', 'ajax_test_enqueue_scripts' );
And my AJAX:
jQuery('.status-select').on( 'change', function ajaxSubmit() {
alert("IT WORKED!");
$.ajax({
url: ajaxurl,
type: "POST",
cache: false,
data: this.val()
})
});
At the moment the file is showing but the 'on change' part doesn't seem to be firing (hence the 'alert' in the .js).
Apologies if this question is worded or organised poorly, it is my first time posting!
Hope someone can explain what/ where I am going wrong.
This is quite a specific requirement but for anyone else using custom tables in WordPress and wanting to update an external myqsl database via AJAX - here's how I did it.
The AJAX side of things -
<script>
jQuery('select.status').on('change', function() {
var $statusSelect = jQuery( this );
var $statusSelectCell = $statusSelect.parent();
var enquiryStatusValue = $statusSelect.val();
var currentBackgroundColor = $statusSelectCell.parent().css("backgroundColor");
var ajaxData = {
'action': 'update_status_db',
'currentId': $statusSelect.attr('id'),
'data': enquiryStatusValue
}
jQuery.ajax({
type: "POST",
url: "/wp-admin/admin-ajax.php",
data: ajaxData,
success: function( response ) {
console.log("Data returned: " + response );
$statusSelectCell.parent().css({"background-color": "#b3e6b3"});
$statusSelectCell.parent().animate({backgroundColor: currentBackgroundColor}, 1200);
},
error: function() {
alert("FAILED TO POST DATA!!");
}
});
})
</script>
Note, the users success confirmation in this case is for the specific row to flash green. This is optional.
Next, the PHP to process the AJAX request. This is to be written outside the tables class.
wp_enqueue_script('jquery');
add_action( 'wp_ajax_update_status_db', 'update_status_db_callback' );
function update_status_db_callback(){
global $wpdb;
$newStatus = $_POST['data'];
$currentId = $_POST['currentId'];
$table = 'wp_enquiryinfo';
$result = $wpdb->update( $table, array( 'status' => $newStatus ), array( 'id' => $currentId ));
echo $_POST['data'];
if (!$result) {
echo "FAILED TO UPDATE";
} else {
$result;
echo "WILL UPDATE SUCCESSFULLY - CALL RESULT FUNCTION";
};
wp_die();
}
Here are a couple of the things I was getting wrong originally:
Firstly, the callback function HAS to end with _callback. Secondly, I didn't call the wp_die function at the end of this - this again is required.
Hopefully this may be of use to someone in the future.
I do some ajax calls for onChange event in Select2. But i need to do similar calls when Select2 is initialized/opened.
How to do it?
$this->widget('ext.select2.ESelect2', array(
'model'=> $model,
'attribute'=> 'PaymentType',//'open'=>'js:{alert("init");}',
'data' => CHtml::listData(PaymentMethod::model()->findall(), 'id','name'),
'htmlOptions'=>array(
//'onInit'=>'js:{alert("init");}', // this does not work!!
'onChange'=>CHtml::ajax(array('type'=>'GET',
'url'=>$this->createUrl('user/cashlessUser', array ('id'=>Yii::app()->user->id)),
'data'=>'js:{PaymentMethod: this.value }',
'success'=>"js:function(data){ alert(data); }",
)),
),
'options'=> array('allowClear'=>true,
'width' => '250',
'placeholder' => '',
),
));
Update
I've found the eSelect2 specification on events here
But it works for pure js, while i need to do it for Yii plugin, where events (except onChange) are not properly fired:
'htmlOptions'=>array(
'select2-opening'=> 'js: console.log("smth"); ',
'select2-opening'=> ' console.log("smth"); ',
'select2-opening'=> ' alert("smth"); ',
's2id_Events_PaymentType.open'=> 'js: console.log("open"); ',
'onFocus'=> 'js: console.log("smth"); ',
'onOpen'=> 'js: console.log("smth"); ',
s2id_Events_PaymentType is an id of this particular eSelect.
All these are not fired, though issue no errors.
Update 2
I've tried to bind logic thru script but with no avail:
Yii::app()->clientScript->registerScript('some-script', "
jQuery('#s2id_Events_PaymentType').on('select2-open', function(e) { console.log('open'); });
");
You should have a look at select2 events in the docs.
I would use these two events:
change - for the AJAX events needed to execute after change
$el.on("change", function (e) {
$.ajax({...});
});
id - Since there is no select2 create or init event we need to override some of the public properties available to us, for example "id" and place our AJAX requests in it.
$el.select2({
id: function (e) {
// execute AJAX calls on init
$.ajax({...});
return e == undefined ? null : e.id;
}
});
And here is an example fiddle: http://jsfiddle.net/dn43uv4c/