Problem Setting Up AJAX Request in Wordpress (with JQuery) - php

Question

I am getting an error of "500 (Internal Server Error). I have gone through a lot of the solutions here and they don't seem to change my outcome and I'm not sure why. I am still learning Wordpress and Ajax so any help is appreciated!
My functions.php:
<?php
// register and enqueue custom js scripts
add_action('wp_enqueue_scripts', 'hyix_enqueue_custom_js');
function hyix_enqueue_custom_js() {
//enqueue zip-search-popup.js
wp_enqueue_script('zip-search-popup', get_stylesheet_directory_uri().'/js/zip-search-popup.js', array('jquery'), false, true);
wp_localize_script('zip-search-popup', 'from_php', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
//hook zip-search function into ajax
add_action( 'wp_ajax_zip_search', 'zip_search' );
//same hook for users not logged in
add_action( 'wp_ajax_nopriv_zip_search', 'zip_search' );
//query for pulling in shipping data
function zip_search() {
$submittedZip = $_REQUEST['submittedZip'];
global $wpdb;
// The SQL query
$response = $wpdb-> get_results("SELECT {$wpdb->prefix}woocommerce_shipping_zones.zone_name ".
"FROM {$wpdb->prefix}woocommerce_shipping_zone_locations ".
"INNER JOIN {$wpdb->prefix}woocommerce_shipping_zones ".
"ON {$wpdb->prefix}woocommerce_shipping_zone_locations.zone_id = {$wpdb->prefix}woocommerce_shipping_zones.zone_id ".
"WHERE location_code = '$submittedZip' ");
$response = array(
'request' => $_REQUEST,
'zip' => $submittedZip,
'test' => 'is ok',
);
wp_send_json( $response );
// echo $response;
die();
}
My jQuery file - zip-search-popup.js:
(function($) {
$(document).ready(function() {
$('.zip-bar-button').click(function(event) {
event.preventDefault();
submittedZip = $("#zipcode-bar-input").val();
console.log(submittedZip);
$.ajax({
url: from_php.ajax_url,
type: "POST",
dataType: "json",
data: {
action : 'zip_search',
submittedZip : submittedZip,
},
success: function (response) {
console.log("this is the response: " + response);
alert("working");
},
})
})
})
})(jQuery);

Answer 1

This is working code for you you need to add this code in your child-theme functions.php
I have made few changes to the code the way you wp_enqueue_scripts in wordpress.
child-theme (functions.php)
function my_custom_scripts() {
$myvars = array(
'ajaxurl' => admin_url( 'admin-ajax.php' ) //admin ajax
);
wp_enqueue_script( 'my-ajax-request', get_stylesheet_directory_uri() . '/js/zip-search-popup.js', array( 'jquery' ),'',true );
wp_localize_script( 'my-ajax-request', 'MyAjax', $myvars );
}
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );
//hook zip-search function into ajax
add_action( 'wp_ajax_zip_search', 'zip_search' );
//same hook for users not logged in
add_action( 'wp_ajax_nopriv_zip_search', 'zip_search' );
//query for pulling in shipping data
function zip_search() {
$submittedZip = $_REQUEST['submittedZip'];
global $wpdb;
//The SQL query
$response = $wpdb-> get_results("SELECT {$wpdb->prefix}woocommerce_shipping_zones.zone_name ".
"FROM {$wpdb->prefix}woocommerce_shipping_zone_locations ".
"INNER JOIN {$wpdb->prefix}woocommerce_shipping_zones ".
"ON {$wpdb->prefix}woocommerce_shipping_zone_locations.zone_id = {$wpdb->prefix}woocommerce_shipping_zones.zone_id ".
"WHERE location_code = '$submittedZip' ");
$response = array(
'request' => $_REQUEST,
'zip' => $submittedZip,
'test' => 'is ok',
);
wp_send_json( $response );
}
child theme (js file - jQuery code) zip-search-popup.js
$(document).ready(function () {
$('.zip-bar-button').click(function (event) {
event.preventDefault();
submittedZip = $("#zipcode-bar-input").val();
console.log(submittedZip);
$.ajax({
url: MyAjax.ajaxurl,
type: "POST",
dataType: "json",
data: {
action: 'zip_search',
submittedZip: submittedZip,
},
success: function (response) {
console.log("this is the response: " + response);
alert("working");
},
})
})
})

Answer 2

To find out what is going wrong, check the error.log of your php server..?