dMultiple Ajax Requests on one page - php

Question

In my index page I got 3 colums, the first column displays all the categories in a database, second column displays the subject when a category is clicked, and third col selects contents when subject is clicked ..
What Im trying to do is, While Clicking any category, Ajax Requests the database for all subjects related to that category, and display it in column1 and It Works, but when i click the generated subjects to get content for that subject it fails to request asynchronously, instead it takes me to content.php. to make it more clear i am pasting the index.php and script.js ( all the javascript and jquery files been included in header.php)
the index page
<?php
include("tpl/header.php");
?>
<div id="navigation">
<ul id="search_form">
<?php
$cat = Category::find_all();
foreach($cat as $category) {
echo '<li value="';
echo $category->cat_id;
echo '" class="myLi" "><a href="subject.php?id=';
echo $category->cat_id;
echo'">';
echo $category->category;
echo '</a></li>';
}
?>
</ul>
</div>
<div id="content1">
<h2>Subjects</h2>
<!-- works -->
</div>
<div id="content2">
<h2>Content</h2>
<!-- doesnt work -->
</div>
<?php
include_layout_template("footer.php");
?>
the js code
$(document).ready(function() {
$(".myLi").click(function(){
var id = this.value;
ajax.open('get', 'subject.php?id=' + encodeURIComponent(id));
ajax.onreadystatechange = function() {
// Pass it this request object:
handleResponse(ajax);
}
ajax.send(null);
return false; // So form isn't submitted.
});
$(".myLi1").click(function(){
var cid = this.value;
ajax.open('get', 'content.php?id=' + encodeURIComponent(cid));
ajax.onreadystatechange = function() {
// Pass it this request object:
handleResponse1(ajax);
}
ajax.send(null);
return false; // So form isn't submitted.
});
function handleResponse(ajax) {
// Check that the transaction is complete:
if (ajax.readyState == 4) {
// Check for a valid HTTP status code:
if ((ajax.status == 200) || (ajax.status == 304) ) {
// Put the received response in the DOM:
var results = document.getElementById('content1');
results.innerHTML = ajax.responseText;
// Make the results box visible:
results.style.display = 'block';
}
} // End of readyState IF.
} // End of handleResponse() function.
function handleResponse1(ajax) {
// Check that the transaction is complete:
if (ajax.readyState == 4) {
// Check for a valid HTTP status code:
if ((ajax.status == 200) || (ajax.status == 304) ) {
// Put the received response in the DOM:
var results1 = document.getElementById('content2');
results1.innerHTML = ajax.responseText;
// Make the results box visible:
results1.style.display = 'block';
}
} // End of readyState IF.
} // End of handleResponse() function.
});
..Well it fails only when I Click the subject on Index page, When I navigate to subject.php and click the link it gives the result asynchronously. so my question is how can i query multiple ajax calls on a single page(i.e in my case "index.php" ) .. any help ?

Answer 1

After the subjects are loaded, you should ajaxify them, but you are ajaxifying them when the document is ready, that is, before they even exist. Your call to $(".myLi1") doesn't match anything.
Another solution would be to attach your event to all elements matching .myLi1 now, or in the future.
With jQuery < 1.7, you can do this with the delegate() method, otherwise, with the on() method.