Am try to implement data from database using AJAX based on a drop down list in WordPress. The codes returning 400 bad request in the console. I am hosted the page as localhost.
Here is my theme's functions.php //I changed the Code
function my_enqueue_scripts() {
wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');
function fetchData(){
global $wpdb;
// this can be improved
$catId = isset($_REQUEST['catId']);
if($catId){
$result_data = $wpdb->get_results("SELECT * FROM sub_category where categor_id = '".$catId."'");
foreach ($result_data as $data) {
echo "<option value='".$data->id."'>'".$data->sub_category_name."'</option>";
}
}
die();
}
// add your ajax action to authenticated users only
add_action('wp_ajax_fetch_data','fetchData');
Am also adding the jQuery part here:
<script type="text/javascript">
jQuery(document).ready( function(){
jQuery('#category').on('change',function (){
console.log("start1");
var catId = document.getElementById('category').value;
console.log(catId);
jQuery.ajax({
type: 'POST',
url: "<?php echo admin_url( 'admin-ajax.php' ); ?>",
data: {
'key':catId,
'action': "fetch_data" // very important
},
success : function (data) {
jQuery('#sub_cat').html(data);
}
});
});
});
</script>
<form method="post" name="myform" id="myform">
<table width="200" border="0" cellpadding="10">
<tr>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
</tr>
<tr>
<td><label>Category</label></td>
<td><select name="category" id="category" >
<option value="">Select the category</option>
<?php
global $wpdb;
$result_fromDB = $wpdb->get_results("SELECT * FROM `category`");
foreach ($result_fromDB as $cat) {
echo "<option value='".$cat->id."' selected>".$cat->name."</option>";
}
?>
</select>
</td>
<td></td>
</tr>
<tr>
<td><label>Sub Category</label></td>
<td>
<div id="fetch_data"><select name="sub_cat" id="sub_cat">
<option value=""> Select Sub category</option> <!--Here I want to return the data-->
</select></div>
</td>
</tr>
</table>
</form>
Remembering that I am using internal scripts, Please give a solution.
Am try to implement data from database using AJAX based on a drop down list in WordPress. The codes returning 400 bad request in the console. I am hosted the page as localhost.
Here is my theme's functions.php //I changed the Code
function my_enqueue_scripts() {
wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');
function fetchData(){
global $wpdb;
// this can be improved
$catId = isset($_REQUEST['catId']);
if($catId){
$result_data = $wpdb->get_results("SELECT * FROM sub_category where categor_id = '".$catId."'");
foreach ($result_data as $data) {
echo "<option value='".$data->id."'>'".$data->sub_category_name."'</option>";
}
}
die();
}
// add your ajax action to authenticated users only
add_action('wp_ajax_fetch_data','fetchData');
Am also adding the jQuery part here:
<script type="text/javascript">
jQuery(document).ready( function(){
jQuery('#category').on('change',function (){
console.log("start1");
var catId = document.getElementById('category').value;
console.log(catId);
jQuery.ajax({
type: 'POST',
url: "<?php echo admin_url( 'admin-ajax.php' ); ?>",
data: {
'key':catId,
'action': "fetch_data" // very important
},
success : function (data) {
jQuery('#sub_cat').html(data);
}
});
});
});
</script>
<form method="post" name="myform" id="myform">
<table width="200" border="0" cellpadding="10">
<tr>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
</tr>
<tr>
<td><label>Category</label></td>
<td><select name="category" id="category" >
<option value="">Select the category</option>
<?php
global $wpdb;
$result_fromDB = $wpdb->get_results("SELECT * FROM `category`");
foreach ($result_fromDB as $cat) {
echo "<option value='".$cat->id."' selected>".$cat->name."</option>";
}
?>
</select>
</td>
<td></td>
</tr>
<tr>
<td><label>Sub Category</label></td>
<td>
<div id="fetch_data"><select name="sub_cat" id="sub_cat">
<option value=""> Select Sub category</option> <!--Here I want to return the data-->
</select></div>
</td>
</tr>
</table>
</form>
Remembering that I am using internal scripts, Please give a solution.
First, enqueue your script correctly, in functions.php:
function my_enqueue_scripts() {
wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');
Then, Authenticated users only (see https://codex.wordpress/Plugin_API/Action_Reference/wp_ajax_nopriv_(action))
(can also be in functions.php):
function fetchData(){
// Not needed anymore, as you manage the case through the `add_action` method
// if ( ! is_user_logged_in() ) {
// return;
// }
// this can be improved
$catId = isset($_REQUEST['catId']) ? $_REQUEST['catId'] : '';
echo "<option>$catId</option>"; // there was a typo here: `<optio>`
die();
}
// add your ajax action to authenticated users only
add_action('wp_ajax_fetch_data','fetchData');
// no need for the `nopriv_` action, this one is for anonymous users
// add_action('wp_ajax_nopriv_fetch_data','fetchData');?>
And finally, your JS script. You must add the action parameter, otherwise WordPress does not know which action to fire in the backend (the one used in wp_ajax_fetch_data -> fetch_data).
Also, for the url, try to use admin_url( 'admin-ajax.php' ); instead:
<script type="text/javascript">
jQuery(document).ready( function(){
jQuery('#category').on('change',function (){
console.log("start1");
var catId = document.getElementById('category').value;
console.log(catId);
jQuery.ajax({
type: 'POST',
url: "<?php echo admin_url( 'admin-ajax.php' ); ?>",
data: {
'key':catId,
'action': "fetch_data" // very important
},
cache: false,
success : function (data) {
jQuery('#sub_cat').html(data);
console.log(data);
}
});
});
});
</script>
You get 400 error, because there is no callback registered for your AJAX request.
Here's how you do the request:
jQuery.ajax({
type: 'POST',
url: "/mudratcr/wp-admin/admin-ajax.php",
data: {'key':catId},
cache: false,
success : function (data) {
jQuery('#sub_cat').html(data);
console.log(data);
}
});
So there is no action param in your request.
And because you register your callback like below:
add_action( 'wp_ajax_data', 'fetchData' );
add_action( 'wp_ajax_nopriv_data', 'fetchData' );
you should pass "data" as action in your request:
jQuery.ajax({
type: 'POST',
url: "/mudratcr/wp-admin/admin-ajax.php",
data: {key: catId, action: 'data'},
cache: false,
success : function (data) {
jQuery('#sub_cat').html(data);
console.log(data);
}
});
PS. I wouldn't use hardcoded URL to admin-ajax.php file in your JS. It would be much better if you localized your JS file and passed real admin-ajax.php file URL in there.