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'

• javascript
• php
• jquery
• ajax
• wordpress

• 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 a die(); at the end, and don't return the wp_dropdown... as it's already echoed – Tomás Cot Commented Sep 6, 2014 at 18:44

1 Answer 1

You'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);
}