Updating list items using PHP and AJAX - php

Question

I'm trying to make 2 lists where one lists is updated depending on what the user choses from the first list.
The first list is made up of "lists names"... every "list" that is made by a user contains a number of movies,...
So for example I would make a list: Top 5 fav movies and when I click on it in my first list on the second list it will show the lists of movies that are in that list.
I know I also need to use Ajax to make this happen but I'm stuck. I'm able to create the first list from my database but I don't know how to go any further?
<ul class="MyLists">
<?php
$MyList = new Lists();
$res = $MyList->GetMyLists();
foreach ($res as $r) {
echo "<li><a href='mylists.php?id=".$currentID."&listname".$r['list_name']."'>". $r['list_name'] . "</a></li>";
}
?>
</ul>
<ul class="MyLists">
<?php
<li>Here are items of the selected list</li>
?>
</ul>
I put the name of the list that the user chose in the "href" section as you can tell so that I might be able to get this with a $_GET method. But I been trying and I haven't gotten this to work.
Also any reference to usefull AJAX tips are more then welcome.
Thanks in advance and for your time.

Answer 1

This is my approach when I do something like this.
First when generating the links in php I give each link element a data attribute, like:
<li><a data="<?php echo $id; ?>">List Title</a></li>
The $id can be anything that identifies the list and it's elements. Something that you can use on the php side of things to extract the data that you need. Now in your javascript with jQuery you can do a simple ajax call like so:
$(document).ready(function(){
$('a').click(function(){
var id = $(this).attr("data");
$.ajax({
url: 'getlistitems.php',
type: 'GET',
data: {id:id},
success: function(data){
//I'll talk about what goes in here in a bit
}
});
});
});
Let be break down what is going on. So basically when you are clicking on a link element the jQuery is extracting what you saved in the data attribute of the specific link that was clicked (with $(this)) to pass to you PHP file in the ajax call. The 'url' parameter of the AJAX call is the php file that is going to extract the data from your database, or however it is saved. The 'type' parameter is the HTTP method you are using. The data parameter here is a json object that will get put into the $_GET global server side.
Now in your php file you will simple extract your data using the supplied id, referencing like $_GET['id']. I don't know how your data is saved so I cannot get very specific here but you could easily structure a MySQL query here to get the items prevalent to list that was clicked. Now you just have to get this data back to your client side browser. Thankfully this is very easy using php's built in json_encode() function. Simply save all of your list items to an array and supply that array to json_encode() and echo it out like so:
$listitems = array();
//add all relevant items to $listitems
echo json_encode($listitems);
Now here is where that success: function(data){} parameter in the ajax call above comes into play. That json_encoded($listitems) parameter will be the data parameter to the success callback. It is even turned into a usable array for you. So now all you have to do loop over the data array and append it to the second list using jQuery append and you will be all set.