Am using WordPress ajax to load the sub-categories dynamically.
Here's my code
Php code
function techento_getsubcat() {
$category_name = $_POST['catname'];
$cat_id = $_POST['catid'];
return wp_dropdown_categories( 'show_option_none=Choose a Sub Category&tab_index=10&taxonomy=category&hide_empty=0&child_of=' . $cat_id . '' );
}
add_action('wp_ajax_techento_getsubcat', 'techento_getsubcat');
add_action('wp_ajax_nopriv_techento_getsubcat', 'techento_getsubcat');
Jquery
jQuery(document).ready(function(){
$('#cat').change(function(e){
alert("changed");
$.ajax({
type: 'POST',
dataType: 'json',
url: pcAjax.ajaxurl ,
data: {
'action': 'techento_getsubcat', //calls wp_ajax_nopriv_ajaxlogin
'catname': $('#cat option:selected').text(),
'catid': $('#cat option:selected').val() },
success : function(response){
alert(response);
console.log(response);
$("#subcats").html(response);
}
});
e.preventDefault();
});
});
The problem with the above code is that php returns the raw html irrespective of the thing asked to return
even if set it to
return true;
it then returns the raw html of subcategories generated plus '0'
Am using WordPress ajax to load the sub-categories dynamically.
Here's my code
Php code
function techento_getsubcat() {
$category_name = $_POST['catname'];
$cat_id = $_POST['catid'];
return wp_dropdown_categories( 'show_option_none=Choose a Sub Category&tab_index=10&taxonomy=category&hide_empty=0&child_of=' . $cat_id . '' );
}
add_action('wp_ajax_techento_getsubcat', 'techento_getsubcat');
add_action('wp_ajax_nopriv_techento_getsubcat', 'techento_getsubcat');
Jquery
jQuery(document).ready(function(){
$('#cat').change(function(e){
alert("changed");
$.ajax({
type: 'POST',
dataType: 'json',
url: pcAjax.ajaxurl ,
data: {
'action': 'techento_getsubcat', //calls wp_ajax_nopriv_ajaxlogin
'catname': $('#cat option:selected').text(),
'catid': $('#cat option:selected').val() },
success : function(response){
alert(response);
console.log(response);
$("#subcats").html(response);
}
});
e.preventDefault();
});
});
The problem with the above code is that php returns the raw html irrespective of the thing asked to return
even if set it to
return true;
it then returns the raw html of subcategories generated plus '0'
Share Improve this question asked Sep 6, 2014 at 17:40 Vaibhav BhanushaliVaibhav Bhanushali 6533 gold badges13 silver badges32 bronze badges 5-
setting
dataType
is only to tell$.ajax
what to expect as return, it won't change what is returned from server. really not clear what your issue is – charlietfl Commented Sep 6, 2014 at 17:57 - I had set "return true;" but inspite it returns html generate from wp_dropdown_category @charlietfl – Vaibhav Bhanushali Commented Sep 6, 2014 at 18:01
-
return true
on what? your explanation is not very detailed – charlietfl Commented Sep 6, 2014 at 18:02 - this is what response i get "i.imgur./Ks9vs7B.png" only expected response is "0" as for testing purposes it made it to return true – Vaibhav Bhanushali Commented Sep 6, 2014 at 18:07
-
can you organize your code a bit? also, the php function
techento_getsubcat
should have adie();
at the end, and don't return thewp_dropdown...
as it's already echoed – Tomás Cot Commented Sep 6, 2014 at 18:44
1 Answer
Reset to default 5You're missing the $
shortcode in
jQuery(document).ready(function($){
The Ajax callback is better handled by wp_send_json_success()
, so we don't have to worry with return
or echo
, exit
or die
. For that, set echo
to false in the dropdown arguments:
function techento_getsubcat() {
$cat_id = intval( $_POST['catid'] );
$args = array(
'hide_empty' => 0,
'echo' => 0,
'child_of' => $cat_id,
'taxonomy' => 'category'
);
$data = wp_dropdown_categories( $args );
wp_send_json_success( $data );
}
On Ajax success, use response.data
:
success : function(response){
console.log(response.data);
}