Wordpress plugin pass javascript variable to php - javascript

Can somebody help me? I'm feeling so stupid. I took example code from WordPress codex, made a example plugin in my webpage, but there no respond...
PHP code is here:
/**
* Plugin Name: Ada Ajax Test
* Description: WP Codex based ajax example
* Version: 1.0.0
* Author: M. A. Tomas
* Author URI: http://www.matomas.cz
* License: GPL2
*/
add_action( 'admin_enqueue_scripts', 'my_enqueue' );
function my_enqueue($hook) {
if( 'index.php' != $hook ) {
// Only applies to dashboard panel
return;
}
wp_enqueue_script( 'ajax-script', plugins_url( '/js/my_query.js', __FILE__ ), array('jquery') );
// in JavaScript, object properties are accessed as ajax_object.ajax_url, ajax_object.we_value
wp_localize_script( 'ajax-script', 'ajax_object',
array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'we_value' => 1234 ) );
}
// Same handler function...
add_action( 'wp_ajax_my_action', 'my_action_callback' );
function my_action_callback() {
global $wpdb;
$whatever = intval( $_POST['whatever'] );
$whatever += 10;
return $whatever;
wp_die();
}
// shortcode pro zobrazeni na strance
add_shortcode( 'ajax-zkouska', 'my_action_callback' );
and Javascript code in external file is here:
// JavaScript Document
jQuery(document).ready(function($) {
var data = {
'action': 'my_action',
'whatever': ajax_object.we_value // We pass php values differently!
};
// We can also pass the url value separately from ajaxurl for front end AJAX implementations
jQuery.post(ajax_object.ajax_url, data, function(response) {
alert('Got this from the server: ' + response);
});
});
Where I mistake?

You have a few things mixed up.
Front End
If you are targeting the frontend, then you need to use this hook:
add_action( 'wp_enqueue_scripts', 'my_enqueue' );
This allows you to add the needed scripts to the front end and not the admin side.
Ajax Calls
All ajax calls are executed within the admin context. So you will need to test for it and add the ajax hooks accordingly.
if ( is_admin() ) {
add_action( 'wp_ajax_my_frontend_action', 'my_frontend_action_callback' );
add_action( 'wp_ajax_nopriv_my_frontend_action', 'my_frontend_action_callback' );
add_action( 'wp_ajax_my_backend_action', 'my_backend_action_callback' );
// Add other back-end action hooks here
} else {
// Add non-Ajax front-end action hooks here
}
No Priv
The no_priv hook is meant for users that are not logged in. Add it if that's your intention.

Related

How can I call a php function from ajax in wordpress?

I am new to wordpress and I need to call a php function from ajax but my code is not working. I was reading about the ajax standard in wordpress, but I don't know what happens, I have followed several tutorials and answers in this blog and they all talk about the action to enqueue the javascript file, but the problem continues and I don't know what I'm doing wrong. To continue I share my code.
This is my function to enqueue my javascript file:
function enqueue_script() {
$ajax_script = 'popup';
$uri = get_stylesheet_directory_uri() . '/assets/front/js/popup.js';
wp_register_script($ajax_script, $uri);
wp_localize_script( $ajax_script, 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
wp_enqueue_script( $ajax_script, $uri, array('jquery'), rand(111,9999), 'all');
}
add_action( 'wp_enqueue_scripts', 'enqueue_script' );
My php function to call, this is in an update_request_status.php file:
function update_status(){
echo "<script>alert('I am update function!!!!');</script>";
}
This is my js action, :
$('.btn-confirm').click(function(){
var url_string = window.location.href;
var url = new URL(url_string);
var request_id = url.searchParams.get("request_id");
$.ajax({
url: ajax_object.ajaxurl,
type: 'POST',
cache: false,
data: { "request_id": request_id } + '&action=change_status',
success:function(data){
alert("YEs I doing");
},
error:function(){
alert("¡Error en el servidor, contancte al administrador!");
}
});
window.location.href = "http://localhost:8081/megafrescos/pendientes";
$('#msg-remove-request').css('display', 'none');
});
And finally, this is my modal with the button that triggers the action to call my php function:
<div class="warning-msg" id="msg-remove-request">
<button class="btn-close" id="btn-close">×</button>
<h5>¿Dar por concluida esta solicitud ? </h5><hr>
<?php echo fix_request()?>
<div class="confirm-btns">
<button class="btn-confirm">Aceptar</button>
<button class="btn-close">Cancelar</button>
</div>
<div class='update-status'></div>
</div>
Can somebody help me?
There are multiple ways to do it. First I'll show the one you were working on.
You'll need to define two actions with wp_ajax_{action} and wp_ajax_nopriv_{action}, where {action} is a placeholder for a keyword to identify the function that needs to be called. The former is only works when users are logged in. The latter is for request from unauthenticated users.
Both hooks should refer to the same function that you are trying to call.
The example below returns either the request_id that has been sent or a string with 'Nothing' as a response, just to test things out.
add_action( 'wp_ajax_nopriv_update_status', 'update_status' ) ;
add_action( 'wp_ajax_update_status', 'update_status' );
function update_status() {
$request_id = isset( $_POST[ 'request_id' ) ) ?
$_POST[ 'request_id' ) :
'Nothing';
echo $request_id;
}
The other, and more modern approach is using the REST API. This enables you to create an endpoint where you get more controls over de URL and sanitizing.
Your endpoint would look something like this
https://yourwebsite.com/wp-json/api/v1/update. You can get the static URL to the REST endpoint by using get_rest_url(), like you did with admin_url( 'admin-ajax.php' ) and should add that to your wp_localize_script function in the enqueue file.
The endpoint checks the methods allowed and calls the callback specified in the options array. From there you can access the $request object which contains info like the given arguments from your request.
Then return a response to read on the frontend.
add_action( 'rest_api_init', 'register_update_endpoint' );
function register_update_endpoint() {
// Register new route to get data from
register_rest_route( 'api/v1', // Mandatory prefix with version
'/update/', // Name of the route, can be anything.
array(
'methods' => array( 'POST' ), // Allowed methods.
'callback' => 'update_status' // Function to call when URL is called.
)
);
function update_status( WP_REST_Request $request ) {
$request_id = $request->has_param( 'request_id' ) ?
$request->get_param( 'request_id' ) :
'Nothing';
$response = new WP_REST_Response( $request_id; );
return $request_id;
}
}

PHP variables resetting after passing javascript variables through AJAX post

I'm trying to make some SQL queries using PHP in Wordpress, to auto populate and check values on a gravity form against the existing database.
To do that however, I'm going to need to pass some javascript variables to php, then use that to interact and pull that data back to the form. As someone with minimal web dev background, easier said then done.
My main issue is with an AJAX call that properly carries over a value, but only to the action function. All other calls will show null (I assume due to scoping, but globals don't seem to help).
The main relevant PHP is in a custom plugin as follows:
$address = 0;
function my_enqueue() {
wp_register_script( 'lead-scheduler', null);
wp_enqueue_script( 'lead-scheduler', plugins_url( '/lead_ajax.js', __FILE__ ), array('jquery') );
wp_localize_script( 'lead-scheduler', 'leadajax', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
wp_enqueue_script( 'jquery' );
wp_register_script( 'lead_ajax', null);
wp_enqueue_script( 'lead_ajax' );
}
add_action( 'init', 'my_enqueue' );
function handle_request(){
//Check post address, then apply to global variable
echo $_POST['address'] . "\n";
global $address;
$address = $_POST['address'];
echo $address . "\n";
wp_die("RIP");
}
add_action( 'wp_ajax_handle_request', 'handle_request' );
add_action( 'wp_ajax_nopriv_handle_request', 'handle_request' );
function functionCaller() {
if (is_page ('')) {
?>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$(function(){
var addressField = document.getElementById('input_22_2');
var temp;
//Set up event listener
addressField.onchange = addressCheck;
function addressCheck(){
//Get foreign script
$.getScript("/wp-content/plugins/lead-scheduler/lead_ajax.js", function(){
//Wait until done to execute console.log
$.when(adrCheck()).done(function(){
console.log("Logging: " + "<?php global $address; echo $address ?>");
});
});
}
});
});
</script>
<?php
}
}
add_action('wp_head', 'functionCaller'); ?>
The AJAX call comes from a JS file that I call to:
//AJAX
function adrCheck(){
jQuery(document).ready( function() {
console.log("called")
var addressField = document.getElementById('input_22_2').value;
jQuery.ajax({
type : "post",
url : leadajax.ajax_url,
data : {action: "handle_request", address: addressField},
success: function(response) {
console.log(response)
},error: function(response){
console.log(response);
}
})
})
}
The call seems to work, as the echo in handle_request() works fine. But calling that variable anywhere else returns null. $.when.done doesn't seem to do much, nor does anything synchronous.
I'm sure there's something super elementary that I'm missing, but I can't seem to find it.

Loading custom js file on the admin page through plugin

I'm new to the world of Wordpress and I just started developing my first plugin.
When it's activated it should load one javascript file to wp-admin/post-new.php (Add new post) page.
Here is how I tried to do this:
Plugin
class WP_Blog_Customizer{
function __construct() {
add_action( 'wp_enqueue_scripts', array($this, 'load_dependencies') );
register_activation_hook( __FILE__, array( $this, 'wpa_install' ) );
register_deactivation_hook( __FILE__, array( $this, 'wpa_uninstall' ) );
}
public function load_dependencies(){
wp_enqueue_script('blog-customizer', plugins_url('js/blog-customizer.js', __FILE__),array('jquery'),'1.0.0', true);
}
}
new WP_Blog_Customizer();
wp-admin/post-new.php
if(is_plugin_active( 'blog-customizer/blog-customizer.php' )){
$plugin = new WP_Blog_Customizer();
}
Shouldn't this add_action( 'wp_enqueue_scripts', array($this, 'load_dependencies') ); from the __construct of my plugin class include this js file?
Note
This js file is located under the js folder in my plugin's folder, so the path is correct.
Can anyone tell me why this is not working, and how to make it work?
For loading scripts in admin side we have to use admin_enqueue_scripts hook. So something like this should do the job:
class WP_Blog_Customizer{
function __construct() {
add_action( 'admin_enqueue_scripts', array($this, 'load_dependencies') );
//...other constructor things
}
public function load_dependencies( $hook ){
if ( $hook == 'post-new.php' ) { // for loading script also on post edit screen use ( $hook == 'post-new.php' || $hook == 'post.php' )
wp_enqueue_script('blog-customizer', plugins_url('js/blog-customizer.js', __FILE__),array('jquery'),'1.0.0', true);
}
}
}
new WP_Blog_Customizer();

Adding javascript to php (wordpress)? [duplicate]

This question already has answers here:
How to get JavaScript variable value in PHP
(10 answers)
Closed 5 years ago.
So I am helping my friend with his woocommerce WordPress site. He has some short javascript code that needs to be added to the thank you page for the site.
The javascript code takes three variables (totalCost, orderId and setProductId). I can not get to the HTML. So how do I add this code to the PHP and also, how do I access the variables from the PHP and write them into the javascript?
And where in the already existing code should I add it? Is it in the functions.php file for the theme?
I would be super thankful for help!
EDIT:
So would this work?
add_action( 'studentkortet_tracking', 'my_custom_tracking' );
function studentkortet_tracking($order_id){
?>
<script id="pap_x2s6df8d" src="http://URL_TO_PostAffiliatePro/scripts/trackjs.js" type="text/javascript">
</script>
<script type="text/javascript">
PostAffTracker.setAccountId(’xxxxxx’);
var sale = PostAffTracker.createSale();
sale.setTotalCost('<?php echo ($order->order_total - $order->order_shipping); ?>');
sale.setOrderID('<?php echo $order->id; ?>');
sale.setCurrency('<?php echo $order->get_order_currency(); ?>');
PostAffTracker.register();
</script>
<?php
}
Here is some working code, answered here
<script>
var p1 = "success";
</script>
<?php
echo "<script>document.writeln(p1);</script>";
?>
Here's the correct way of accessing PHP variables within a script. It utilises the function wp_localize_script() so that PHP variables are accessible in a script file. First include this file in your functions.php file
function example_enqueue_scripts() {
if( is_checkout() ) {
$args = array( 'total_cost' => 443, 'order_id' => 4567, 'set_product_id' => 123 );
wp_register_script( 'checkout-script', get_stylesheet_directory_uri() . '/checkout-script.js' );
wp_localize_script( 'checkout-script', 'checkout_script', $args );
wp_enqueue_script( 'checkout-script' );
}
}
add_action( 'wp_enqueue_scripts', 'example_enqueue_scripts' );
Then include this javascript in a file under your theme folder called checkout-script.js for example.
(function( $ ) {
'use strict';
$(function() {
var totalCost = checkout_script.total_cost;
var orderId = checkout_script.order_id;
var setProductId = checkout_script.set_product_id;
exampleFunction( totalCost, orderId, setProductId );
function exampleFunction( totalCost, orderId, setProductId ) {
//Do something in here
//alert(totalCost);
}
});
})( jQuery );
I don't know what setProductId is meant to be as a variable, but the hook you are looking for is woocommerce_thankyou. The $order_id is passed by default, which you can then use to grab the order object. Pretty much all the info related to the order can be accessed through the setter/getter methods on the order object.
/**
* Print Javascript on Thankyou page.
* #param int $order_id
*/
function so_47117329_thankyou( $order_id ){
$order = wc_get_order( $order_id ); ?>
<script id="pap_x2s6df8d" src="http://URL_TO_PostAffiliatePro/scripts/trackjs.js" type="text/javascript">
</script>
<script type="text/javascript">
PostAffTracker.setAccountId(’xxxxxx’);
var sale = PostAffTracker.createSale();
sale.setTotalCost('<?php echo $order->get_total() - $order->get_shipping_
(); ?>');
sale.setOrderID('<?php echo $order_id; ?>');
sale.setCurrency('<?php echo $order->get_order_currency(); ?>');
PostAffTracker.register();
</script>
<?php
}
add_action( 'woocommerce_thankyou', 'so_47117329_thankyou' );
Editing to add an alternative for enqueuing the scripts as suggested by #Andrew-Schultz. Using the woocommerce_thankyou hook gets you easy access to the $order_id, which would otherwise need to be retrieved from the URL. You will still access the javascript variables as he's shown in his answer.
/**
* Enqueue Javascript on Thankyou page.
* #param int $order_id
*/
function so_47117329_thankyou( $order_id ){
$order = wc_get_order( $order_id );
$args = array(
'total_cost' => $order->get_total(),
'order_id' => $order_id,
'set_product_id' => 123
);
wp_register_script( 'checkout-script', get_stylesheet_directory_uri() . '/checkout-script.js', array(), false, true ); // Last parameter loads script in footer
wp_localize_script( 'checkout-script', 'checkout_script', $args );
wp_enqueue_script( 'checkout-script' );
}
add_action( 'woocommerce_thankyou', 'so_47117329_thankyou' );

How to call a java script on deactivation of wordpress plugin

I want to call a js file which have a ready function to call my api. My Code is..
<?php
.
. // rest all code.................................
.
.
/* Runs on plugin deactivation*/
register_deactivation_hook( __FILE__, 'Pushbiz_remove' );
function Pushbiz_remove() {
/* Deletes the database field */
delete_option('PushBIZ_firstCreation');
delete_option('VarPushBIZapikey');
delete_option('PushBIZRegUrl');
wp_register_script( 'DeactivationJS', plugins_url( '/admin/js/deactivation.js', __FILE__ ));
wp_enqueue_script( 'DeactivationJS' );
}
?>
I am unable to call deactivation.js on on the deactivation of plugin. How can i call this java script on the event of deactivation.
Can you please check below code?
/* Runs on plugin deactivation*/
register_deactivation_hook( __FILE__, 'Pushbiz_remove' );
function Pushbiz_remove() {
/* Deletes the database field */
delete_option('PushBIZ_firstCreation');
delete_option('VarPushBIZapikey');
delete_option('PushBIZRegUrl');
add_action( 'wp_enqueue_scripts', 'DeactivationJS_scripts' );
}
function DeactivationJS_scripts(){
wp_enqueue_script( 'DeactivationJS', plugin_dir_url( __FILE__ ) .'/admin/js/deactivation.js');
}

Categories

Resources