Question 187798 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – Ajax request to php variable does not work as expected

I am making an AJAX GET request, but the response I receive is not as expected. The response goes through, but the PHP variable is empty. Here is my jQuery:

jQuery(document).ready(function($) {
   $.ajax({
      url: '/wp-admin/admin-ajax.php',
      method: 'GET',
      data: {
         action: 'geoip_detect2_get_info_from_current_ip',
      },
      success: function(response) {
         var country = response.country.names.en;
         var isoCode = response.country.iso_code;
  
         console.log('Country: ' + country);
         console.log('ISO Code: ' + isoCode);  
      },
      error: function(xhr, status, error) {
         // Handle any errors that occur during the AJAX request
         console.error(error);
      }
   });    
});

**UPDATED AJAX REQUEST FOR ANSWERS **

    $.ajax({
      url: '/wp-admin/admin-ajax.php',
      method: 'GET',
      data: {
        action: 'geoip_detect2_get_info_from_current_ip',
      },
      success: function(response) {
        var country = response.country.names.en;
        var isoCode = response.country.iso_code;
  
        console.log('Country: ' + country);
        console.log('ISO Code: ' + isoCode);
  
        // Store the values in hidden input fields
        $('#hidden-country').val(country);
        $('#hidden-isoCode').val(isoCode);
      },
      complete: function() {
        // Retrieve the values from hidden input fields
        var country = $('#hidden-country').val();
        var isoCode = $('#hidden-isoCode').val();
  
        // Make an AJAX request to your PHP script in the theme
        $.ajax({
          url: '/wp-content/themes/bethub/inc/product_layout/side_block.php',
          method: 'POST',
          data: {
            country: country,
            isoCode: isoCode
          },
          success: function(response) {
            console.log(response);
            // Handle the response from your PHP script
          },
          error: function(xhr, status, error) {
            console.error(error);
          }
        });
      },
      error: function(xhr, status, error) {
        // Handle any errors that occur during the AJAX request
        console.error(error);
      }
    });
  });

In the console, as expected, I got the correct result without errors:

Country: Ukraine
ISO Code: UA
XHR finished loading: GET "https://mywebsite.com/wp-admin/admin-ajax.php?action=geoip_detect2_get_info_from_current_ip"
XHR finished loading: POST "https://mywebsite.com/wp-content/themes/theme_name/inc/product_layout/side_block.php".

However, when I want to output the result in a PHP file of the WordPress theme, I get an empty result:

$country = $_POST['country'];
$isoCode = $_POST['isoCode'];
echo "Country: " . $country . "<br>";
echo "ISO Code: " . $isoCode;

What am I doing wrong?

The plugin that I am using is geoip-detect.

Server: Nginx php-fpm

No errors in the Nginx log.

Tags:

2

Answers


  1. 0

    Ajax request are asynchronous, which means that your second request is probably made before the 1st one even finishes so try making your second request inside a complete function after your first success like this

    $.ajax({
  url: '/wp-admin/admin-ajax.php',
  method: 'GET',
  data: {
    action: 'geoip_detect2_get_info_from_current_ip',
  },
  success: function(response) {
    var country = response.country.names.en;
    var isoCode = response.country.iso_code;

    console.log('Country: ' + country);
    console.log('ISO Code: ' + isoCode);
    $('#hiddenCountry').val(country);
    $('#hiddenIsoCode').val(isoCode);
  },
  complete: function() {
    // Make an AJAX request to your PHP script in the theme
    $.ajax({
      url: '/wp-content/themes/my_theme/inc/product_layout/side_block.php',
      method: 'POST',
      data: {
        country: $('#hiddenCountry').val(),
        isoCode: $('#hiddenIsoCode').val()
      },
      success: function(response) {
        console.log(response);
        // Handle the response from your PHP script
      },
      error: function(xhr, status, error) {
        console.error(error);
      }
    });
  },
  error: function(xhr, status, error) {
    // Handle any errors that occur during the AJAX request
    console.error(error);
  }
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<input type="hidden" id="hiddenCountry">
<input type="hidden" id="hiddenIsoCode">
    Login or Signup to reply.
  2. 0

    As was mentioned in a comment above, PHP is on the server, not client. $_GET deals with pulling in URL parameters that were passed to a php file from a form.

    Since you are calling this library manually in php, you aren’t on the client side. The function you used (fetch action) won’t generate the same response. It will use the ip of the server making the request.

    This means you should use geoip_detect2_get_info_from_ip() instead and feed in the ip address and other required arguments.

    For info about the api for the library and what arguments are in the function, visit the repo here: link to repo

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search