Pass PHP variable from while loop to javascript function - php

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.

Answer 2

It's not a good idea to use the same ID for several elements within the same document; IDs should be unique. Use classes instead so try
<a class="link" href="#"><?=$task_goal?> by <?=$task_due?> </a>
and
<script type="text/javascript">
$('.link').click(function(){
$.ajax({
type: "GET",
url: "complete.php?id=<?=$task_id?>"
});
return false;
});
</script>

Answer 3

JavaScript and PHP do not interact. PHP is a 'pre-processor' and basically generates HTML (in this context). You can't use PHP variables in JavaScript. Period.
When generating the HTML, add the task_id to the anchor
echo "<a class=\"link\" href=\"#\" rel=\"". $task_id ."\">". $task_goal ." by ". $task_due . " </a>";
(don't use an ID for link, but use a class)
Then in jQuery:
$('.link').click(function(e){
e.preventDefault(); // use this instead of return false;
task_id = $(this).attr('rel');
$.ajax({
type: "GET",
url: "complete.php?id="+ task_id
});
});
"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)"
This is probably because you have used an ID for the anchor, and you can only use an ID once on the page. You must use a class