0

I'm trying to send jQuery data via AJAX to a WordPress template file. I've tried several different techniques and solutions based on other questions posted that pertain to this topic, with no success. I can successfully pass data from the functions.php file to my promotions.php template file.

However, I cannot get the data from my JavaScript file (ajax-javascript.js) file to the functions.php file. When the page loads, my $_POST variable is empty and my console.log message from my ajax-javascript.js file reads 'Server response from the AJAX URL 0'. To me, a response code of '0' means there is something wrong with my wp_ajax hooks but I cannot figure out what. Is there something wrong with the hooks or is it something else that I'm over-looking?

Here is my latest attempt:

ajax-javascript.js

jQuery(document).ready(function($) {
  var numberOfPromos = 4;
  var data = {
    numberOfPromos: numberOfPromos
  };

  $.post('/wp-admin/admin-ajax.php', data, function(response) {
    console.log('Server response from the AJAX URL ' + response);
  });
});

functions.php

add_action( 'wp_enqueue_scripts', 'add_ajax_javascript_file' );

function add_ajax_javascript_file() {
    wp_localize_script( 'ajax_for_frontend', 'ajax_for_frontend', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));
    wp_enqueue_script( 'ajax_custom_script', get_stylesheet_directory_uri() . '/js/ajax-javascript.js', array('jquery') );
}

add_action( 'wp_ajax_nopriv_get_number_of_promos', 'get_number_of_promos' );
add_action( 'wp_ajax_get_number_of_promos', 'get_number_of_promos' );

function get_number_of_promos() {
    echo $_POST['numberOfPromos'];  
    die();
}

promotions.php - where I call my function in my Wordpress template file

<div><?php echo $get_number_of_promos(); ?></div>
0

Untested but ...

You need to pass your "action" identifier with the data, like so:

var data = {
    'action': 'my_action',
    'whatever': 1234
};

In your case, that action would be get_number_of_promos.

The example is from the Codex page about AJAX, which you should read carefully: https://codex.wordpress.org/AJAX_in_Plugins

0

You cannot pass absolute URLs in WordPress. Use ajax_for_frontend.ajaxurl in place of absolute URL.

Try using this (untested) -

jQuery(document).ready(function() {
    var numberOfPromos = 4;

    jQuery.ajax({

        url: ajax_for_frontend.ajaxurl,
        type: 'post',
        data: {
            action: 'get_number_of_promos',
        },
        success: function( response ) {
            console.log('Server response from the AJAX URL ' + response);
        }

    });
});
0

Also the way you are calling your function is incorrect :

 <div><?php echo $get_number_of_promos(); ?></div>

You are calling a function (get_number_of_promos) as a string ($).

It should be :

 <div><?php echo get_number_of_promos(); ?></div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.