Question

Before anyone says “try searching”, I have – I realize this is probably a simple solution, but I just can’t get it to work. This is my first venture into AJAX – and my knowledge of javascript is slightly above a 1st grader…I know I need to get up to speed on it.

I’m trying to build a nested task manager, using AJAX. I’m getting jammed up on the AJAX implementation…the list works well otherwise. The basic concept should output like this:

Goal: Create a nested task list

Milestone: Build the basic setup – completed 2/11/12

Task: Design the database – completed 2/11/12
Task: Design the php stuff – completed 2/11/12

Milestone: Add the finesse

Task: Include AJAX functioning
Task: Include CSS

As you click on the link, it runs my MySQL update to show the item being completed. I have three nested while loops (one for goals, one for milestones and one for tasks). They are near identical. Here’s the most deeply nested loop:

$query_tasks = mysql_query("SELECT * FROM task WHERE task_gid = '$task_gid' AND task_mid = '$task_mid' AND task_tid IS NOT NULL");
$t_numrows = mysql_num_rows($query_tasks);
if($t_numrows > 0){ 
    while( $get_task = mysql_fetch_array($query_tasks)){
    $task_id = $get_task['task_id'];
    $task_goal = $get_task['task_goal'];
    $task_due = $task_task['task_due'];
        $task_due = date("m/d/Y", $task_due);
    $task_complete = $get_task['task_complete'];
    $task_complete_date = $get_task['task_complete_date']; ?>

Here is my link to trigger the query:

    <a id="link" href="#"><?=$task_goal?> by <?=$task_due?> </a>
    }

Here is my ajax query:

<script type="text/javascript">
$('#link').click(function(){
$.ajax({
    type: "GET",
    url: "complete.php?id=<?=$task_id?>"
});
return false;
});
</script>

I’ve got it to work for one link (if I click on the last rendered link, it works as desired – but no other links do). I’ve tried calling the javascript in the head (my preferred method) as well as calling it each time the loop passes (not sure that’s a good idea, but whatever). My thought is to use the variable from the while loop for each task in the javascript function. I’ve tried placing the ajax script into a javascript function and calling it on the onClick behavior for the link, but no luck. Thoughts?

Answer 1

This is how you should do it:
http://pastebin.com/ZMCzAS5H

By setting a custom attribute (task_id) to your link you’ll be able to retrieve it later in the ajax request. This way you’ll use one event binder for all of the links instead of one for each link.