Multipage Navigation and AJAX - php

Question

I'm looking at creating a 'Multi Page Navigation System' using PHP and MySQL along with jQuery.
Ideally, what I want is to be a a list of items, such as:
* Item 1
* Item 2
* Item 3
Within Item 1, there is 3 other subcategories, within Item 2 there are 2 subcategories and within them 2 subcategories there are 3 more subcategories
So what I'm really looking for is the following:
1) when i click on 'Item 2` is displays the 2 subcategories
2) when I click on one of these subcategories it displays the 3 others
Ideally, I'd like to do this in using AJAX as I'd like this to be in a jQuery UI Dialog.
I have 2 tables:
category
id | title
----------
1 | item 1
2 | item 2
3 | item 3
subcategory (simplified)
id | cat_id | parent_id | title
-------------------------------
1 | 1 | 0 | subcat1
2 | 1 | 0 | subcat2
3 | 1 | 1 | subcat1_subcat1
4 | 1 | 1 | subcat1_subcat2
5 | 1 | 1 | subcat1_subcat3
My main issue is how I'd go about doing this?
I don't really want to have a big array with all that data in, as it could potentially have more categories and subcategories.
Does any have an idea what would be the best solution to about this?
Thanks

Answer 1

What's wrong with having it all stored in an array? Unless you're planning on have thousands of elements in those menu items (which would be incredibly un-user-friendly), then it's just a walk in the park for PHP.
Also, you might want to be abit more specific about what your requirement is. Is it the jQuery, the PHP or both? Do you need the code or the concept?
EDIT: Solution
So based on the comments you listed, here's a proof of concept.
PHP:
You'll need to read from the Database and load them into an array. That's pretty easy to do with PDO. Just use the fetchAll() command and retrieve the entire result set in an associative array. The tricky part becomes converting your 'flat' DB into a multi-dimensional array. Here goes:
// Retrieve the details from the database in the $rows associative array
...
// Now, we need to expand the 'flat' DB structure into a multi-
// dimensional array.
$multid=findKids($rows);
// Send it back, JSON-encoded
die(json_encode(
'result' => 'success',
'response' => $multid
)); // Send the response back via AJAX
/**
* Here's the function that converts the flat DB into a multi-
* dimensional array. It tracks all the parents in a single
* array and collects the kids for those parents. If it comes
* across a new parent, if fetches all the kids recursively.
*/
function findKids( $rows, $parentid=NULL, &$parents=NULL ) {
// Create a temporary array for the kids
$shelter;
// Go through all the rows
foreach($rows as $index => $row) {
// Find the kids that belong to this parent
if($row['parentid']==$parentid) {
// This kid belongs to this parent
// Move it to the temporary shelter
$shelter[$parentid][]=$row;
}
else {
// This kid doesn't belong to this parent.
// Have we already talked to the parent before?
if(isset($parents[$row['parentid']])) {
// Yes, the parent has already been visited. Ignore
}
else {
// Parent hasn't been visited; add it
$shelter[$row['parentid']][]=findKids($rows,$row['parentid'],$parents);
}
} // close else{ }
} // close foreach{ }
// Return the shelter, with all the kids
return $shelter;
}
The returned array will include a response that looks like this:
$response=[
'result'=>'success',
'response'=>[
0=>[ // Contains the kids for $parentid=0
['id'=>1, 'cat_id'=>1, 'parent_id'=>0],
['id'=>2, 'cat_id'=>1, 'parent_id'=>0]
],
1=>[ // Contains the kids for $parentid=1
['id'=>3, 'cat_id'=>1, 'parent_id'=>1],
['id'=>4, 'cat_id'=>1, 'parent_id'=>1],
['id'=>5, 'cat_id'=>1, 'parent_id'=>1]
],
]
];
jQuery: You'll interpret the JSON response and iterate through the response to create the menu on the fly.
Here's a sample script that'll display the array as a nested unordered list.
// Call the printMyFamily method on the element to display
// that you'd like to see the menu appear in
$outputElem.html($.printMyFamily(NULL,response['response']));
$.printMyFamily = function(parentid,haystack){
// Our output variable
output="<ul>";
// Find the kids
$haystack.each(function(index,elem){
// Is this kid ours?
if(elem[parentid] == parentid){
// Yes. Add to output
output+="<li id='"+elem['id']+"'>"+elem['catid']+"</li>";
// Find this items kids (if any)
output+=$.printMyFamily(elem['id'],haystack);
}
else { /* not ours, ignore */ }
});
// Is the result an empty string? If so, just clear it
if(output=="<ul>"){ output=""; }
// Return the output
return output;
};