A little bit of Ajax goes a long way
- by Holland
..except when you're having problems.
My problem is this: I have a hierarchical list of categories stored in a database which I wish to output in a dropdown list. The hierarchy comes into place when the subcategories are to be displayed, which are dependent on a parent id (which equals out to the first seven or so main categories listed). My thoughts are relatively simple: when the user clicks the dynamically allocated list of main categories, they are clicking on an option tag. For each option tag, an id (i.e., the parent) is listed in the value attribute, as well as an argument which is sent to a Javascript function which then uses AJAX to get the data via PHP and sends it to my 'javascript.php' file. The file then does magic, and populates the subcategory list, which is dependent on the main category selected. I believe I have the idea down, it's just that I'm implementing the solution improperly, for some reason.
Here's what I have so far:
from javascript.php
<script type="text/javascript" src=<?=JPATH_BASE.DS.'includes'.DS.'jquery.js';?>>
var ajax = {
ajax.sendAjaxData = function(method, url, dataTitle, ajaxData) {
$.ajax({
type: 'post',
url: "C:/wamp/www/patention/components/com_adsmanagar/views/edit/tmpl/javascript.php",
data: {
'data' : ajaxData
},
success: function(result){
// we have the response
alert("Your request was successful." + result);
},
error: function(e){
alert('Error: ' + e);
}
});
}
ajax.printSubCategoriesOnClick = function(parent) {
alert("hello world!");
ajax.sendAjaxData('post', 'javascript.php', 'data' parent);
<?php
$categories = $this->formData->getCategories($_POST['data']);
?>
ajax.printSubCategories(<?=$categories;?>);
}
ajax.printSubCategories = function(categories) {
var select = document.getElementById("subcategories");
for (var i = 0; i < categories.length; i++) {
var opt = document.createElement("option");
opt.text = categories['name'];
opt.value = categories['id'];
}
}
}
</script>
the function used to populate the form data
function populateCategories($parent, FormData $formData) {
$categories = $formData->getCategories($parent);
echo "<pre>";
print_r($categories);
echo "</pre>";
foreach($categories as $section => $row){
?>
<option value=<?=$row['id'];?> onclick="ajax.printSubCategoriesOnClick(<?=$row['id']?>)">
<? echo $row['name']; ?>
</option>
<?php
}
}
The problem is that when I try to do a print_r on my $_POST variable, nothing shows up. I also receive an "undefined index" error (which refers to the key I set for the data type). I'm thinking that for some reason, the data is being sent to my form.php file, or my default.php file which includes both the form.php and javascript.php files via a function.
Is there something specific that I'm missing here? Just looking up basic AJAX syntax (via jQuery) hasn't helped out, unfortunately.
