AJAX with jQuery in WordPress: AJAX call not passing property value to PHP function

Question

So I'm trying to build something that should be incredibly simple -- A form that has State and Area, and when you select a state, it populates the list of areas. My form has two menus, #select-region (state), and #select-area. Here's my jQuery code that is included in a .js file:

jQuery(document).ready(function() {
    jQuery("#select-region").change(function(){
    //alert(jQuery("#select-region").val());
    regionID = jQuery("#select-region").val();
    jQuery.ajax({
            type: 'POST',
            url: 'http://dev.sitename.com/wp-admin/admin-ajax.php',
            data: {
                action: 'get_area_menu',
                region_id: regionID,
            },
            success: function(data, textStatus, XMLHttpRequest){
                jQuery("#select-area").html('');
                jQuery("#select-area").append(data);
            },
            error: function(XMLHttpRequest, textStatus, errorThrown){
                alert(errorThrown);
            }
        });
     });
});

The 'get_area_menu()' function is in my functions.php file. Here's the code:

function get_area_menu($region_id){
    $areas = get_areas($region_id);

    $menu_output = "<option>" . count($areas) . "</option>";
    foreach($areas as $area) {
        $menu_output = $menu_output . "<option value=" . $area['area_id'] . ">" . $area['name'] . "</option>";
    }
    die($menu_output);
}
add_action('wp_ajax_get_area_menu', 'get_area_menu');
add_action('wp_ajax_nopriv_get_area_menu', 'get_area_menu');

`

Now, I've verified that the 'get_areas()' function that is called in the above function is working properly when a region_id is passed to it, but for some reason the region_id variable is not being passed into get_area_menu() from the AJAX call. FWIW, I have enqueued the script and localized it (although I still have no idea what that actually means) with this code near the top of functions.php:

wp_enqueue_script('jquery');
wp_enqueue_script('sitename', get_template_directory_uri() . '/scripts/sitename.js');
wp_localize_script( 'sitename', get_template_directory_uri() . '/scripts/sitename.js', $params);

Guys, I'm at my wit's end. What am I missing?

I'm not familiar with Wordpress, so maybe this doesn't apply. But have you tried passing in $_POST['region_id'] rather than $region_id? That's the standard way of accessing POST variables in PHP. — maxedison
– maxedison, Commented Apr 5, 2013 at 14:55
Since I'm using jQuery to get the current value of #select-region when it is changed (regionID = jQuery("#select-region").val();), that variable is not actually posted and therefore not in the "POST" scope. Maybe I'm wrong? There's nowhere actually use $_POST['region_id'] because $region_id, in this case, is used as a property within a function. — Josh
– Josh, Commented Apr 5, 2013 at 15:01
I don't understand. In your $.ajax call, you have this: data: { action: 'get_area_menu', region_id: regionID}. That means $_POST['action'] and $_POST['region_id'] should exist on the PHP side. Otherwise, where else are you expecting to get the value of the region_id from? — maxedison
– maxedison, Commented Apr 5, 2013 at 15:10
The AJAX call is being executed on a drop-down menu change, not a form post, so how with that data exist in the post scope on the server? The value of that drop-down is grabbed in the JS file with this code: 'regionID = jQuery("#select-region").val();' — Josh
– Josh, Commented Apr 5, 2013 at 15:27
Maybe I'm misunderstanding how the 'data' thing works. I thought 'action' was the function you're trying call on the server and all the subsequent properties/variables are just passed in to that function. In other words, 'data: { action: 'get_area_menu', region_id: regionID}' should pass the value of "regionID" (set in JS) as a property named "region_id" into the PHP function get_area_menu(), no? — Josh
– Josh, Commented Apr 5, 2013 at 15:32

Philippe Boissonneault · Accepted Answer · 2013-04-05 15:28:46Z

1

The only thing I can see is in your get_area_menu function change this line

$areas = get_areas(isset($_POST['region_id']) ? $_POST['region_id'] : $region_id);

answered Apr 5, 2013 at 15:28

Philippe Boissonneault

3,9493 gold badges28 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Josh Over a year ago

I am totally lost. How would the region_id get into the post scope if the form isn't being posted? Especially since the PHP code is using $region_id as a property that's passed in.

Philippe Boissonneault Over a year ago

You call this function from Ajax using POST to pass parameters :)

Collectives™ on Stack Overflow

AJAX with jQuery in WordPress: AJAX call not passing property value to PHP function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related