I’m trying to offer the users possibility to view all posts from a single category dynamically selected by them. For that I make 2 ajax requests:
1. select box with all categories of 1st level – ajax generates the select box containing all subcategories of category selected by the user;
2. selected posts – ajax request shows all the posts from subcategory selected by the user from second select box.
The problem is that the second ajax request doesn’t want to work. I’ve put the HTML code that generates the second select box in functions.php and it doesn’t work this way. But when I put it in template file (home.php) it works. However this is not what I try to achieve.
Here is the code from files:
home.php
<?php
$args = array(
'orderby' => 'name',
'parent' => 0
);
$cat = get_categories($args);
$n = count($cat);?>
<div class="row">
<div class="medium-2 columns">
<form type="post" action="" id="newCustomerForm">
<label>
<select name="name">
<?php for($i=0;$i<$n;$i++):?>
<option value="<?php echo $cat[$i]->cat_ID;?>"><?php echo $cat[$i]->name;?></option>
<?php endFor;?>
</select>
</label>
<input type="hidden" name="action" value="selectSubcategories"/>
</form>
</div>
<div class="medium-2 medium-offset-1 left columns">
<div id="ajaxsubcategories"></div>
</div>
</div>
functions.php
function selectSubcategories(){
$atname = $_POST['name'];
$atcategory = $atname;
$atcat = get_categories("child_of=$atcategory");
$atn = count($atcat);
echo
'<form type="post" action="" id="newForm">
<label>
<select name="name">';
for($i=0;$i<$atn;$i++){
echo '<option value="'.$atcat[$i]->cat_ID.'">'.$atcat[$i]->name.'</option>';
}
echo '</select>
</label>
<input type="hidden" name="action" value="selectArticles"/>
</form>';
die();
}
add_action('wp_ajax_selectSubcategories', 'selectSubcategories');
add_action('wp_ajax_nopriv_selectSubcategories', 'selectSubcategories');
function selectArticles(){
$name = $_POST['name'];
echo $name;
die();
}
add_action('wp_ajax_selectArticles', 'selectArticles');
add_action('wp_ajax_nopriv_selectArticles', 'selectArticles');
js scripts
<script type="text/javascript">
jQuery('#newCustomerForm').change(function(){
var newCustomerForm = jQuery(this).serialize();
jQuery.ajax({
type:"POST",
url: "/wp-admin/admin-ajax.php",
data: newCustomerForm,
success:function(data){
jQuery("#ajaxsubcategories").html(data);
}
});
return false;
});
</script>
<!-- second ajax script -->
<script type="text/javascript">
jQuery('#newForm').change(function(){
var newCustomerForm = jQuery(this).serialize();
jQuery.ajax({
type:"POST",
url: "/wp-admin/admin-ajax.php",
data: newCustomerForm,
success:function(data){
jQuery("#atresult").html(data);
}
});
return false;
});
</script>
If I insert following code:
<div class="medium-2 columns">
<form type="post" action="" id="newForm">
<label>
<select name="name">
<?php for($i=0;$i<$n;$i++):?>
<option value="<?php echo $cat[$i]->cat_ID;?>"><?php echo $cat[$i]->name;?></option>
<?php endFor;?>
</select>
</label>
<input type="hidden" name="action" value="selectArticles"/>
</form>
</div>
<div class="medium-2 medium-offset-1 left columns">
<div id="atresult"> </div>
</div>
…the second ajax request works.
Could somebody help me and explain why does the code doesn’t work from functions.php file?