Basic jQuery/AJAX call failing. Why?
-
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: 'https://dev.golfowl.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('golfowl', get_template_directory_uri() . '/scripts/golfowl.js'); wp_localize_script( 'golfowl', get_template_directory_uri() . '/scripts/golfowl.js', $params);
Guys, I’m at my wit’s end. What am I missing?
- The topic ‘Basic jQuery/AJAX call failing. Why?’ is closed to new replies.