I have a test page where results my from DB are being displayed, via AJAX I sent off and get sub menu items. I want to use the same Javascript page to then go get sub menu items and loop it over.
Below is my code, it only works on a single level. the second level does not work.
I guess this is because my ajax results are in the HTML make up of the page therefore it can't find the Javascript code to find what to do?
any ideas?
index.php
<script>
function ajaxObj( meth, url ) {
var x = new XMLHttpRequest();
x.open( meth, url, true );
x.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
return x;
}
function ajaxReturn(x){
if(x.readyState == 4 && x.status == 200){
return true;
}
}
function DisplayMenu (url){
var getData = ajaxObj("POST", url);
getData.onreadystatechange = function() {
if(ajaxReturn(getData) == true) {
document.getElementById('Menu').innerHTML = getData.responseText;
}
}
getData.send("");
}
</script>
</head>
<body>
<?php
mysql_connect ("localhost", "***", "****");
mysql_select_db ("test");
$result = mysql_query('SELECT * FROM category WHERE ParentID = 0');
while($row = mysql_fetch_assoc($result)) {
echo "<a href=\"#\" onclick=\"DisplayMenu('get_menu.php?ParentID=" . $row['ID'] . "')\">" . $row['CatName'] . "</a><br>";
}
?>
<div id="Menu" style="margin-top:30px;"></div>
get_menu.php
<?php
echo $_SERVER['REQUEST_URI'] . "<br>";
$ParentID = $_GET['ParentID'];
mysql_connect ("localhost", "***", "****");
mysql_select_db ("test");
$result = mysql_query("SELECT * FROM category WHERE ParentID = $ParentID");
while($row = mysql_fetch_assoc($result)) {
echo "<a href=\"#\" onclick=\"DisplayMenu(get_menu.php?ParentID=" . $row['ID'] . ")\">" . $row['CatName'] . "</a><br>";
}
?>
