Why my wordpress ajax isn't calling in frontend javascript file? - javascript

I am using ajax in js file. but now getting error in that "mydomain.com/my_ajax.ajax_url not found 404" in console logs.
here is my js file (demo.js) code. tried all methods but no solution--
jQuery.ajax({
type: "post",
url: "my_ajax.ajax_url",
data: { action: "data_fetch", keyword: input }
});
my functions.php -------
add_action( 'wp_enqueue_scripts', 'hindrise_script');
function my_enqueue() {
wp_register_script('plugin-ajaxJs', CHILD_URL . '/js/demo.js', __FILE__);
wp_enqueue_script('plugin-ajaxJs');
wp_localize_script('plugin-ajaxJs', 'my_ajax', array('ajax_url' => admin_url('admin-ajax.php')));
}

The function name is different than what you have defined in add_action. Use the same name in the add_action and the function name:
add_action( 'wp_enqueue_scripts', 'hindrise_script');
function hindrise_script() {
wp_register_script('plugin-ajaxJs', CHILD_URL . '/js/demo.js', __FILE__);
wp_enqueue_script('plugin-ajaxJs');
wp_localize_script('plugin-ajaxJs', 'my_ajax', array('ajax_url' => admin_url('admin-ajax.php')));
}
Also in the JS file remove the quotes for the passing variable:
jQuery.ajax({
type: "post",
url: my_ajax.ajax_url,
data: { action: "data_fetch", keyword: input }
});

Related

Problem when sending an ajax post request in WordPress

I've read several articles on how to do this and all of them mention the same thing that I am using. I have two files for this:
In the receiver.php file:
<?php
add_action( 'wp_enqueue_scripts', 'my_enqueue' );
add_action( 'wp_ajax_my_action', 'theActionFunction' );
function my_enqueue() {
wp_register_script( 'ajax-script', plugins_url( '/src/WyrRoute.js' , __FILE__ ), array('jquery') );
wp_enqueue_script('ajax-script');
wp_localize_script( 'ajax-script', 'my_ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
function theActionFunction(){
$theQuestion = $_POST['question_id'];
echo $theQuestion; //doesn't show anything in the frontend
wp_die();
}
echo "hello" //works if outside the function
The issue is that nothing inside this theActionFunction prints in the frontend. Anything I type outside shows in the frontend, there must be something basic that I'm missing here.
WyrRoute.js
clickHandler(e) {
var ajax_url = my_ajax_object.ajax_url
var data ={
'action': 'my_action',
'question_id': '10183'
}
$.ajax({
type: 'POST',
url: ajax_url,
data: data,
dataType: 'json',
success: function (xhr, x, checkStatus) {
console.log(xhr);
console.log(checkStatus.status)
console.log("success")
},
error: function(e) {
console.log(e.statusText);
console.log("failure")
}
});
}
Ajax returns with 200 success, so no issue there, but for some reason, I can't get the $_POST['value'] to print in the frontend using php.
Welcome.
Well, from what I'm seeing in the code, it looks ok. At first glance, the thing I noticed is that you are declaring the function called "theActionFunction", but you arent calling it anywhere. Again it may just be me, but, if the method isn't printing anything, right underneath it, put this:
theActionFunction();
And you should be good to go. In total, it should look like this:
function theActionFunction(){
$theQuestion = $_POST['question_id'];
echo $theQuestion; //This should now work
wp_die();
}
theActionFunction();
Happy coding.

Wordpress Plugin Class setup Ajax

Im making a plugin using Class , I need to run some Ajax on the Front end. All scripts are queue up correctly. when i trigger the call, i get 400 error.
class CCYTFeatured {
public function __construct(){
add_action( 'wp_enqueue_scripts', array($this, 'cc_yt_scripts' ));
add_action( 'wp_ajax_cc_get_featured_yt', array( $this, 'cc_get_featured_yt' ) );
add_action( 'wp_ajax_nopriv_cc_get_featured_yt', array( $this, 'cc_get_featured_yt' ) );
}
public function cc_yt_scripts() {
// JAVASCRIPT
wp_register_script( 'cc_yt_script',
plugins_url( '/js/cc_yt.js', __FILE__ ),
array('jquery'),
cc_yt_version(),
true
);
wp_localize_script(
'cc_yt_script',
'cc_yt_ajax',
array(
'ajax_url' => admin_url( 'admin-ajax.php' )
)
);
wp_enqueue_script('cc_yt_script');
}
public function cc_get_featured_yt(){
echo 'SUCCESS!';
die();
}
My ajax call is:
function start_yt(){
jQuery('#cc_yt_light_wrap').show();
// REGISTER NEW ENTRY USING AJAX
jQuery.ajax({
url: cc_yt_ajax.ajax_url,
type: 'POST',
data: {
action : 'cc_get_featured_yt',
},
async: true,
success: function(response) {
console.log(response);
}
});
}
Thanks for your help! X)
Try this:
Change the method name from cc_get_featured_yt to get_featured, and change the method name everywhere in your class.
and then in the ajaxcall you put this code:
data: {
action : 'featured_yt',
}
I think the get in the methodname is a keyword. This worked for me.
The code is ok,
The way i was calling the class was wrong.
I was calling this inside a theme. Instead, i created a new method and moved everything from __construct().
Started my class and called the method inside the plugin file. After i started the class again and only called the needed method inside my theme. Worked perfectly.

Wordpress wp_ajax not called

I try to get my first AJAX Function working in Wordpress 4.3.
I have build an plugin named "calipso".
In the plugin there are the two files
calipso.php :
<?php
/**
* #package calipso
* #version 1.0
*/
/*
Plugin Name: calipso
Plugin URI: http://www.calipso.de
Description: Dieses Plugin for Calipso-Projekt.
Author: Calipso
Version: 1.0
Author URI: http://www.calipso.de
*/
function llv_integrates() {
$plugin_url = plugins_url( '/', __FILE__ );
wp_enqueue_script('MyAjax',$plugin_url . 'MYajax.js', array( 'jquery' ),'1.0.0',false);
$ajaxObjekt = array( 'ajaxURL' => admin_url( 'admin-ajax.php' ) );
wp_localize_script('MyAjax', 'ajaxObjekt', $ajaxObjekt);
}
add_action( 'wp_enqueue_scripts', 'llv_integrates' );
function TEST_callback(){
$anzahl= $_POST['anzahl'];
//$anzahl = isset($_POST['anzahl']) ? $_POST['anzahl'] : '';
$datei_handle=fopen("logmeInWPAnzahl.txt","a");
fwrite($datei_handle, "Anzahl: ".$anzahl."\n");
fclose($datei_handle);
wp_die();
}
add_action('wp_ajax_TEST_callback','TEST_callback');
add_action('wp_ajax_nopriv_TEST_callback','TEST_callback');
and MYajax.js :
function JStoPHP(){
console.log("JStoPHP is called");
console.log(ajaxObjekt.ajaxURL);
jQuery.ajax({
url:ajaxObjekt.ajaxURL,
data: {action:'TEST_callback' , anzahl: "12315"},
datatype: "json",
type: "POST",
success: function(respose) {
console.log(respose);
},
error: function (xhr, ajaxOptions, thrownError) {
console.log(xhr.status);
console.log(thrownError);
}
});
}
JStoPHP();
Expected operation: transfer of the variable 'Number' from the JavaScript function JStoPHP to via ajax called PHP function TEST_callback.
Currently the TEST_callback function seems to be not invoked. Where is my mistake?
The Code must be at the first place in the plugin to get working.

WordPress admin-ajax returns "0" on the Viewer-Facing Side

I'm pretty new in Wordpress plugins, so I have a question for you guys. I have a problem with admin-ajax call on the viewer-facing side of site. I'm using shortcodes in wordpress posts, to make a link, which must call ajax action. Unfortunately admin-ajax.php returns 0 every single time. Take a look on my code and maybe you can help me to discover what i'm doing wrong.
PHP side:
class myClass {
public function __construct() {
if (defined('DOING_AJAX')) {
add_action( 'wp_ajax_myAction', array($this, 'myCallback') );
add_action( 'wp_ajax_nopriv_myAction', array($this, 'myCallback') );
}
}
public function myCallback() {
echo "test";
die();
}
}
and there is Ajax call in Javascript:
jQuery(document).ready(function($) {
var link = $('a.myLink');
link.on('click', function(e) {
$.ajax({
url: 'http://127.0.0.1/myapp/wp-admin/admin-ajax.php',
type: 'POST',
data: 'myAction',
success:function(data) {
console.log(data);
},
error: function(error) {
console.log(error);
}
});
});
});
Do you have some ideas why that code isn't working and admin-ajax.php returns "0"?
Try to use the ajax call in this format :
jQuery(document).ready(function($) {
var link = $('a.myLink');
link.on('click', function(e) {
var details = {
'action': 'myAction'
};
$.ajax({
url: 'http://127.0.0.1/myapp/wp-admin/admin-ajax.php',
type: 'POST',
data: details, // data format
success:function(data) {
console.log(data);
},
error: function(error) {
console.log(error);
}
});
});
});
hope it helps...
Solved! Two things:
data: 'myAction'
replaced by
data: {
action: 'myAction'
}
and in main plugin file I had
if ( is_admin() ) {
// there should be new myClass() too
} else {
$class = new myClass();
}
thanks for suggestions!
Try with Enque JQuery Form Plugin Before Your Ajax request.
add_action('wp_print_scripts','include_jquery_form_plugin');
function include_jquery_form_plugin(){
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'jquery-form',array('jquery'),false,true );
}

Using a do_shortcode in wordpress via an ajax call

I have the following piece of Ajax which calls a php file which intends to return the HTML content of a shortcode.
The Ajax call looks like this :
var PostData = "Action=refresh-cart";
jQuery.ajax({
dataType: "text",
type: 'POST',
url : '<?php echo plugins_url( 'class-booking-system/class-booking-process.php', dirname(__FILE__) );?>',
cache: false,
data : PostData,
complete : function() { },
success: function(data) {
// jQuery("#loading-img").hide();
alert(data);
// jQuery("#join-class-div-3").html(data);
}
});
The PHP looks like this :
<?php
require_once( ABSPATH . '/wp-includes/shortcodes.php' );
if(isset($_POST['Action'])) {
$Action = $_POST['Action'];
if($Action == "refresh-cart") {
echo do_shortcode('[woocommerce_cart]');
}
}
?>
However when I call my Ajax method it returns an HTTP 500 - which I assume means the do_shortcode function was not found in this context. How can I give my plugin the ability to call this wordpress function via ajax?
I think you should take a look at the Codex article on using Ajax in Plugins. It provides a very good example on how to go about making ajax calls in WordPress.
Adapting their example to your code I get something like the following:
First we load the javascript. We also pass some javascript variables via wp_localize_script. In this case, we're going to pass the admin's URL for processing all ajax calls.
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
wp_localize_script( 'ajax-script', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
Second, in our javascript we can make the ajax call and define our ajax "action" and any other data we need in the data object. Because "action" has kind of a different meaning, I've renamed your action to "refresh_cart".
jQuery(document).ready(function($) {
$.ajax({
type: 'POST',
url : ajax_object.ajax_url,
cache: false,
data : { 'action': 'my_action', 'refresh_cart': 'yes' },
complete : function() { },
success: function(data) {
// $("#loading-img").hide();
alert(data);
// $("#join-class-div-3").html(data);
}
});
});
Third, we need to set up the callback for our ajax action. admin-ajax.php looks through all of WordPress's pre-configured actions and then also looks for anything added to the wp_ajax_$my_action_name on the back-end and wp_ajax_nopriv_$my_action_name on the front-end. I am assuming your question concerns the front-end and since in the data object we set action = my_action the corresponding action hook would be wp_ajax_nopriv_my_action... to which we have attached the my_action_callback function. WordPress should be fully loaded and their shouldn't be an issue running shortcodes as far as I can tell.
add_action( 'wp_ajax_nopriv_my_action', 'my_action_callback' );
function my_action_callback() {
if( isset($_POST['refresh-cart']) && $_POST['refresh-cart'] == 'yes' ) {
echo do_shortcode('[woocommerce_cart]');
}
die();
}
And voila! I think that should do it, but I have to warn you that I didn't test any of this, so use with prudence.

Categories