0

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?

3 Answers 3

4

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.

3
1

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>
2
  • 2
    this actually wouldn't work as desired - it will use the same $task_id on all the links you click.
    – tftd
    Feb 12, 2012 at 1:11
  • I get the same result as before - only works successfully on the last task.
    – thebarless
    Feb 12, 2012 at 1:34
0

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

2
  • JavaScript doesn't directly interact with PHP. But if you have a *.php file which is being executed the code which he posted will work. He most probably knows that ;)
    – tftd
    Feb 12, 2012 at 1:16
  • @richard - well aware of the nature of PHP vs javascript. thanks for the response.
    – thebarless
    Feb 12, 2012 at 1:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.