I have 2 dropdown boxes, when you select from the first dropdown which is a main category, the second one will then load subcategories for the user to select from.
However, on selecting from the first category dropdown a 0 then shows below the second.
Then when you select a category a 0 shows
Can anyone assist to why this is happening please, Here is my code
if ( ! class_exists( 'frontendAjaxDropdown' ) ): class frontendAjaxDropdown { /** * Loading WordPress hooks */ function __construct() { /** * Add shortcode function */ add_shortcode( 'ajax-dropdown', array($this, 'init_shortocde') ); /** * Register ajax action */ add_action( 'wp_ajax_get_subcat', array($this, 'getSubCat') ); /** * Register ajax action for non loged in user */ add_action('wp_ajax_nopriv_get_subcat', array($this, 'getSubCat') ); } function init_shortocde() { $parent_id = 420; $args = array( 'hierarchical' => 1, 'show_option_none' => '', 'hide_empty' => 0, // Set to 0 to show empty categories and 1 to hide them 'parent' => $parent_id, 'taxonomy' => 'location' ); $subcategories = get_categories($args); echo '<select name="main_cat" id="main_cat" class="postform"><option value="">Category...</option>'; ; foreach ($subcategories as $category) { echo '<option value="' . $category->term_id . '">' . $category->name . '</option>'; // ID of the category as the value of an option } echo '</select>'; ?> <script type="text/javascript"> (function($){ $("#main_cat").change(function(){ $("#sub_cat").empty(); $.ajax({ type: "post", url: "<?php echo admin_url( 'admin-ajax.php' ); ?>", data: { action: 'get_subcat', cat_id: $("#main_cat option:selected").val() }, beforeSend: function() {$("#loading").fadeIn('slow');}, success: function(data) { $("#loading").fadeOut('slow'); $("#sub_cat").append(data); } }); }); })(jQuery); </script> <div id="loading" style="display: none;">Loading...</div> <div id="sub_cat"></div> <?php } /** * AJAX action: Shows dropdown for selected parent */ function getSubCat() { $parent_id = $_POST['cat_id']; $args = array( 'hierarchical' => 1, 'show_option_none' => '', 'hide_empty' => 1, // Set to 0 to show empty categories and 1 to hide them 'parent' => $parent_id, 'taxonomy' => 'location' ); $subcategories = get_categories($args); echo '<select name="sub_cat" id="sub_cat" class="postform"><option value="">Category...</option>'; foreach ($subcategories as $category) { echo '<option value="' . $category->term_id . '">' . $category->name . '</option>'; // ID of the category as the value of an option } echo '</select>'; } } endif; new frontendAjaxDropdown();
Advertisement
Answer
At the end of the function getSubCat
, add this
wp_die(); Or die();
This will solve the issue.