Call to Ajax not working from frontend in WordPress,All i want to the data from db based on id,this is what i have tried so far.
//Frontend view
<a href="javascript:void(0)" onclick="getDetails(<?=$index;?>)" >
<?php echo $value ?>
</a>
//Functions.php
function my_enqueue() {
wp_enqueue_script( 'ajax-script', get_template_directory_uri() . '/assets/js/ajax-script.js', array('jquery') );
wp_localize_script( 'ajax-script', 'my_ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue' );
add_action('wp_ajax_nopriv_more_posts', 'get_more_posts');
function get_more_posts(){
// How to get id here to query for the database
echo "Hello World";
exit();
}
// Ajax scripts File
function getDetails(id)
{
jQuery.ajax({
url: more_posts.ajax_url,
type: "GET",
data: {
action: 'more_posts'
},
dataType: "html",
success: function(response){
alert(response);
}
});
}
I am getting this error
reference error more_posts is not defined
//Frontend view
<a href="javascript:void(0)" onclick="getDetails(<?=$index;?>)" >
<?php echo $value ?>
</a>
//Functions.php
function my_enqueue() {
wp_enqueue_script( 'ajax-script', get_template_directory_uri() . '/assets/js/ajax-script.js', array('jquery') );
wp_localize_script( 'ajax-script', 'my_ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue' );
add_action('wp_ajax_nopriv_more_posts', 'get_more_posts');
function get_more_posts(){
// How to get id here to query for the database
echo "Hello World";
echo $_GET['id'];
exit();
}
// Ajax scripts File
function getDetails(id)
{
var id = id;
jQuery.ajax({
url: url: my_ajax_object.ajax_url,
type: "GET",
data: {
action: 'get_more_posts',
id: id,
},
dataType: "html",
success: function(response){
alert(response);
}
});
}
This should work! You dont need absolute path or var with 'href', url: my_ajax_object.ajax_url, is enough as you already added admin-ajax.php with wp_enqueue_script. Thanks
You mistake in
url: more_posts.ajax_url
Because you localize script name is my_ajax_object
wp_localize_script( 'ajax-script', 'my_ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
try this
url: my_ajax_object.ajax_url
Related
little help please, it is WP site,
I have hidden section on page, and when user scroll to it popup shows asking for password, and when user enter password I must compare it with password from ACF field.
I tried several examples getting this done but i cant get anything... I could not find any clear examples of that on stackowerflow, or step by step examples, there are few of them that are not clear to me, I am kinda beginer
EDIT:
function.php
function my_enqueue() {
wp_enqueue_script( 'ajax-script', get_template_directory_uri() . '/js/global.js', array('jquery') );
wp_localize_script( 'ajax-script', 'my_ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue' );
add_action('wp_ajax_nopriv_get_acf_field_ajax', 'my_action');
add_action('wp_ajax_get_acf_field_ajax', 'my_action');
function my_action() {
$result = get_field('password', 'option');
echo json_encode($result);
// wp_send_json($result);
}
global.js
$.ajax({
type: "post",
dataType: "json",
url: my_ajax_object.ajax_url,
data: { action: 'my_action' },
success: function (data) {
console.log(data);
}
});
i got POST http://my-local-website.com/wp-admin/admin-ajax.php error 400 bad request
You have to register and localize a script file in your theme function.php.
function my_enqueue() {
wp_enqueue_script( 'ajax-script', get_template_directory_uri() . '/js/my-ajax-script.js', array('jquery') );
wp_localize_script( 'ajax-script', 'my_ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue' );
After localizing your JS file, you can use my_ajax_object object in your JS file:
var form_data = new FormData();
form_data.append('action', 'get_acf_field_ajax');
form_data.append('pass', password);
form_data.append('user_id', 141);
jQuery.ajax({
type: "post",
dataType: "json",
url: my_ajax_object.ajax_url,
data: form_data,
success: function(response){
console.log(response.success);
}
});
then you have to write your ajax callback function.
<?php
add_action('wp_ajax_nopriv_get_acf_field_ajax', 'my_action');
add_action('wp_ajax_get_acf_field_ajax', 'my_action');
function my_action() {
$response = array();
$user_id = $_POST['user_id'];
$user_pass = $_POST['pass'];
$acf_pass = get_field('acf_pass', 'user_'. $user_id );
if($user_pass == $acf_pass ){
$response['success'] = true;
}else{
$response['success'] = false;
}
wp_send_json($response);
}
?>
try out this rough code and modify as per your need.
This is how I manage to do it:
JS File:
$('.pwd').on('click', function () {
var pwd = prompt('Please enter your password:', '');
if (pwd != null && pwd != '') {
var password = pwd;
$.ajax({
url: example_ajax_obj.ajaxurl,
data: {
'action': 'example_ajax_request',
'password': password,
},
success: function (data) {
console.log(data);
},
error: function (errorThrown) {
console.log(errorThrown);
}
});
}
return false;
});
function example_ajax_enqueue() {
// Enqueue javascript on the frontend.
wp_enqueue_script(
'example-ajax-script',
get_template_directory_uri() . '/js/global.js',
array( 'jquery' )
);
// The wp_localize_script allows us to output the ajax_url path for our script to use.
wp_localize_script(
'example-ajax-script',
'example_ajax_obj',
array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
)
);
}
add_action( 'wp_enqueue_scripts', 'example_ajax_enqueue' );
function example_ajax_request() {
$acf_pass = get_field('password', 'option');
// The $_REQUEST contains all the data sent via ajax
if ( isset( $_REQUEST ) ) {
$password = $_REQUEST['password'];
if ( $password == $acf_pass ) {
$password = 'YESSSSSSS';
}else{
$password = 'NOOOOOO';
}
echo $password;
}
die();
}
add_action( 'wp_ajax_example_ajax_request', 'example_ajax_request' );
add_action( 'wp_ajax_nopriv_example_ajax_request', 'example_ajax_request' );
I sent an ajax request by a button, ajax requests work perfectly also responding. I checked the browser Network it is fine. My problem is I am not getting value by PHP request. Here is my code given below:
function my_enqueue(){
wp_enqueue_script( 'ajax-script', plugin_dir_url( __FILE__ ) . '/assets/js/awqvCustom.js', array('jquery') );
wp_localize_script( 'ajax-script', 'my_ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue' );
/* Custom Ajax */
function data_custom_ajax(){
if ( isset($_POST)) {
$id = $_POST['id'];
echo $id;
}
die();
}
add_action('wp_ajax_nopriv_data_custom_ajax', 'data_custom_ajax');
add_action('wp_ajax_data_custom_ajax', 'data_custom_ajax');
/* Modal Markup*/
function modalBody(){?>
<div class="my-modal">
<div id="ajax_result"></div> //getting ajax success value here
<?php
$getId = (isset($_POST['id']) ? $_POST['id'] : '');
echo $getId; //nothing get
?>
</div>
<?php }
add_action('get_footer', 'modalBody');
jQuery ajax code:
jQuery(document).ready(function () {
'use strict';
jQuery(".btn-container").on('click','.open-modal', function(e){
e.preventDefault();
var id = jQuery(this).data('id');
jQuery.ajax({
type: "POST",
url: my_ajax_object.ajax_url,
dataType:"json",
data: {
action: 'data_custom_ajax',
id: id,
},
cache: false,
success: function(data){
if(data !=''){
jQuery('#ajax_result').html(data);
var modal = jQuery(".my-modal").wgModal();
modal.openModal();
}
}
});
});
I checked with the debugger. The ajax variables seem to be sent
I using ACF wordpress to update acf field for user to populate with button id click.
I am getting Error as admin-ajax.php with 400
Error POST https://domainname/wp-admin/admin-ajax.php 400 ()
Wordpress code on template
<button class="get_project" id="1479" name="urbtnid" data-postid="147">Get project</button>
<button class="get_userbtn" value="<?php echo get_current_user_id() ?>" id="get_userbtn" ><?php echo get_current_user_id() ?></button>
**
JQUery AJAX Code
**
jQuery(function($){
$('.get_project').click(function() {
var stdid = jQuery('#get_userbtn').attr('value');
var stdbtnid = this.id;
jQuery.ajax({
url: my_ajax_object.ajax_url,
type : 'post',
data: dataString,
success : function( response ) {
console.log(response);
}
});
})
});
**
Function.php code
**
function my_enqueue_ajax_save() {
wp_register_script( 'ajax-script', get_template_directory_uri() . '/pradeep-js-css/my-ajax-id-save-script.js', array('jquery') , false, true );
wp_enqueue_script( 'ajax-script' );
wp_localize_script( 'ajax-script', 'my_ajax_object',
array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_ajax_save' );
add_action( 'wp_ajax_my_action', 'my_action' );
add_action( 'wp_ajax_nopriv_my_action', 'my_action' );
function my_action(){
$postid = $_POST['stdid1'];;
$fieldname = 'last_question_viewed';
$fieldvalue = $_POST['stdbtnid1'];
update_post_meta($postid, $fieldname, $fieldvalue);
echo $postid;
wp_die($fieldname = '', $fieldvalue = '', $postid = '');
}
Updated jquery with action
jQuery(function($){
var stdid = jQuery('#get_userbtn').attr('value');
var stdbtnid = this.id;
var dataString = 'stdid1=' + stdid + '&stdbtnid1=' + stdbtnid;
$('.get_project').click(function() {
var data = {
action: "my_action",
stdid: stdid,
stdbtnid1: stdbtnid
};
jQuery.ajax({
url: my_ajax_object.ajax_url,
type : 'post',
data: data,
success : function( response ) {
console.log(response);
}
});
})
});
I am struggling with getting ajax to work, if someone can guide me, it'd be greatly appreciated.
I am building this as a plugin.
I have a file named courselinkscript.js and contains this
jQuery(document).ready(function($){
jQuery(".courselist").change(function () {
jQuery.ajax({
type:"POST",
url: my_ajax_object.ajax_url,
data: { 'action': 'getLinkedCourses' }
//where/what do I put here to work with the data I received.
})
});
});
Then in my main php file named course-listing.php I have this
function getLinkedCourses() {
global $wpdb;
$results = $wpdb->get_results( 'SELECT list.ID, list.course, list.cost, list.length, link.CourseID FROM `wp_course_list` AS list INNER JOIN `wp_course_link` as link ON (list.ID=link.LinkID) WHERE link.CourseID = 1', OBJECT );
echo json_encode($results);
wp_die();
}
function wpb_adding_scripts() {
wp_register_script('courselinkscript', plugins_url('courselinkscript.js', __FILE__), array('jquery'),'1.0', true);
wp_enqueue_script('courselinkscript');
wp_localize_script( 'courselinkscript', 'my_ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'wp_ajax_my_list', 'getLinkedCourses' );
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
My calls to ajax don't work as I don't understand what needs to be done to initalise it. Any help is appreciated.
Use the below mentioned code. It should work.
function getLinkedCourses() {
global $wpdb;
$results = $wpdb->get_results( 'SELECT list.ID, list.course, list.cost, list.length, link.CourseID FROM `wp_course_list` AS list INNER JOIN `wp_course_link` as link ON (list.ID=link.LinkID) WHERE link.CourseID = 1', OBJECT );
echo json_encode($results);
wp_die();
}
function wpb_adding_scripts() {
wp_register_script('courselinkscript', plugins_url('courselinkscript.js', __FILE__), array('jquery'),'1.0', true);
wp_enqueue_script('courselinkscript');
wp_localize_script( 'courselinkscript', 'my_ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'wp_ajax_getLinkedCourses', 'getLinkedCourses' );
add_action( 'wp_ajax_nopriv_getLinkedCourses', 'getLinkedCourses' );
// add_action( 'wp_ajax_my_list', 'getLinkedCourses' );
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
Replace your javascript with the below code:
jQuery(document).ready(function($){
jQuery(".courselist").change(function () {
jQuery.ajax({
type:"POST",
url: my_ajax_object.ajax_url,
data: { 'action': 'getLinkedCourses' },
//where/what do I put here to work with the data I received.
success: function(data) {
var obj = jQuery.parseJSON(data);
console.log(obj);
},
});
});
});
I made a wordpress ajax call code in which when i click on a button the the function runs properly and returns the value first time as it should but after that the ajax call to admin-ajax.php keepon running as i can see from developer tools . My code is
add_action( 'wp_ajax_arete_bp_endorse', 'arete_bp_endorse_ajax' );
add_action( 'wp_ajax_nopriv_arete_bp_endorse', 'arete_bp_endorse_ajax' );
function arete_bp_endorse_ajax(){
global $wpdb;
$result['type'] = "works";
echo $result;
wp_die();
}
function my_script_enqueuer() {
wp_register_script( "my_voter_script", WP_PLUGIN_URL.'/example/js/example.js', array('jquery') );
wp_localize_script( 'my_voter_script', 'myAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'my_voter_script' );
}
the example.js file code
jQuery(document).on("click",".endorse-bt", function (event){
event.preventDefault();
var type= jQuery(this).attr("data");
var option= jQuery(this).parents("li").attr("data-endorsed-item-name");
var profile_id=jQuery(this).parents("li").attr("data-prf-id");
var login_id=jQuery(this).parents("li").attr("data-lg-id");
jQuery.ajax({
dataType : "json",
url : myAjax.ajaxurl,
type: 'POST',
data:{action: "arete_bp_endorse", type : type, option: option, profile_id: profile_id, login_id: login_id},
success: function( response ){
//Do something with the result from server
alert(response.type);
}
});
});