This is a continuation of my question here. I have custom page template with a form with 2 dropdown and 1 input submit. When the user submit the form, the result will be displayed, this is working properly. But I have a problem, the browser is reload when fetching the data in the database.
I'm trying to use AJAX to prevent refreshing browser. I just updated the AJAX function in functions.php
and JS. The page is not refreshing now when the user click the submit button. But the results are not displayed. I'm using is_page
, to displayed different result in the specific pages
How to fix this? How can I call the custom PHP file in the AJAX?
AJAX (functions.php)
function ajax_enqueue_sl(){
wp_enqueue_script('ajax_load_sl', get_template_directory_uri().'/js/alternate-dropdown.js', array('jquery'));
wp_localize_script('ajax_load_sl', 'ajax_object', array('ajax_url' => admin_url( 'admin-ajax.php')));
}
add_action('wp_enqueue_scripts', ajax_enqueue_sl);
add_action('init', 'registerFormAction');
function registerFormAction(){
// To handle the form data we will have to register ajax action.
add_action('wp_ajax_nopriv_submitAjaxForm','submitAjaxForm_callback');
add_action('wp_ajax_submitAjaxForm','submitAjaxForm_callback');
}
function submitAjaxForm_callback(){
global $wpdb;
if(is_page(9208)){
//ROCK ON!
if (isset($_POST['store_list']) && $_POST['store_list'] != 'Select by Store'){
$store_list = $_POST['store_list'];
$stores= $wpdb->get_results($wpdb->prepare("SELECT street FROM tablename WHERE stores= '" . $store_list . "' AND col IN ('test') ORDER BY street ASC", OBJECT));
foreach ($stores as $record_s){
echo '<div class="records">';
echo '<div><span class="icons-tabbed-store icon-icon-stores">' . $record_s->street . '</span></div>';
echo '</div>';
}
} elseif (isset($_POST['mall_list']) && $_POST['mall_list'] != 'Select by Mall'){
$mall_list = $_POST['mall_list'];
$street = $wpdb->get_results($wpdb->prepare("SELECT stores FROM tablename WHERE street= '" . $street_list . "' AND col IN ('test') ORDER BY stores ASC", OBJECT));
foreach ($street as $record_m){
echo '<div class="records">';
echo '<div><span class="icons-tabbed-store icon-icon-stores">' . $record_m->stores . '</span></div>';
echo '</div>';
}
}
}
wp_die();
}
PHP w/ HTML (test.php)
$results_street = $wpdb->get_results('SELECT DISTINCT street FROM tablename WHERE code IN ("test1") ORDER BY street ASC', OBJECT);
$results_stores = $wpdb->get_results('SELECT DISTINCT stores FROM tablename WHERE code IN ("test2") ORDER BY stores ASC', OBJECT);
<form action='' method='post' name='myform' id="myform">
<div class="pos-div">
<select name="street_list" id="filterbystreet">
<option name="default" class="filter_by" value="Select by">Select by</option>
<?php
foreach($results_street as $option){
if(isset($_POST['street_list']) && $_POST['street_list'] == $option->street)
echo '<option name="street_list" class="filter_by" selected value="'. $option->street .'">'. $option->street .'</option>';
else
echo '<option name="street_list" class="filter_by" value="'. $option->street .'">'. $option->street .'</option>';
};
?>
</select>
</div>
<span class="or">or</span>
<div class="pos-div">
<select name="store_list" id="filterby">
<option name="default" class="filter_by" value="Select by">Select by</option>
<?php
foreach($results_stores as $option){
if(isset($_POST['store_list']) && $_POST['store_list'] == $option->stores)
echo '<option name="store_list" class="filter_by" selected value="'. $option->stores .'">'. $option->stores .'</option>';
else
echo '<option name="store_list" class="filter_by" value="'. $option->stores .'">'. $option->stores .'</option>';
};
?>
</select>
</div>
<input type="submit" value="List all partner stores" class="pos-submit"/>
</form>
if (isset($_POST['store_list']) && $_POST['store_list'] != 'Select by Store'){
$store_list = $_POST['store_list'];
$stores= $wpdb->get_results($wpdb->prepare("SELECT street FROM tablename WHERE stores= '" . $store_list . "' AND code IN ('test3') ORDER BY street ASC", OBJECT));
foreach ($stores as $record_s){
echo '<div class="records">';
echo '<div><span>' . $record_s->street. '</span></div>';
echo '</div>';
}
} elseif (isset($_POST['street_list']) && $_POST['street_list'] != 'Select by'){
$street_list = $_POST['street_list'];
$streets = $wpdb->get_results($wpdb->prepare("SELECT street FROM tablename WHERE street_list= '" . $street_list. "' AND code IN ('test3') ORDER BY stores ASC", OBJECT));
foreach ($streets as $record_m){
echo '<div class="records">';
echo '<div><span>' . $record_m->stores . '</span></div>';
echo '</div>';
}
}
ajax_js.js
jQuery(document).ready(function($){
//$('#myform').submit(ajaxFormSubmit);
$('#filterbystreet').change(function(){
$('#filterbystore').prop('selectedIndex','Select by Store');
});
$('#filterbystore').change(function(){
$('#filterbystreet').prop('selectedIndex','Select by');
});
jQuery('.pos-submit').on('click',function(e){
e.preventDefault();
var myform = jQuery('#myform').serialize();
jQuery.ajax({
type:"POST",
// Get the admin ajax url which we have passed through wp_localize_script().
url: ajax_object.ajax_url,
action: "submitAjaxForm",
data: myform,
success:function(data){
jQuery(".records").html(data);
console.log(data);
}
});
});
});