up vote 0 down vote favorite
share [g+] share [fb]

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?

link|improve this question
100% accept rate
feedback

3 Answers

up vote 3 down vote accepted

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.

link|improve this answer
thanks for the response. that makes perfect sense and seems to be exactly what i was looking for. unfortunately, its not doing the ajax part.... source is picking up the task_id for each link. – thebarless 17 hours ago
Hmm.. I'll have a look – tftd 17 hours ago
The code seems to be working fine - tmp.itnews-bg.com/thebarless/index.php ; when you click on a link it sends a request to tmp.itnews-bg.com/thebarless/complete.php?id=X , where X is the task_id of the link. Here is the source tmp.itnews-bg.com/thebarless/index.phps – tftd 17 hours ago
using the test links, i see the header send; once i copy it to my script, it no longer sends. i feel like im missing something extremely stupid... – thebarless 16 hours ago
and i was. i'm using the jquery.1.7.1.min.js file....many thanks @tftd – thebarless 16 hours ago
show 1 more comment
feedback
up vote 0 down vote

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

link|improve this answer
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 18 hours ago
Most probably? I don't think so.. – Richard 18 hours ago
Updated my answer. – Richard 17 hours ago
@richard - well aware of the nature of PHP vs javascript. thanks for the response. – thebarless 17 hours ago
feedback
up vote 1 down vote

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>
link|improve this answer
2  
this actually wouldn't work as desired - it will use the same $task_id on all the links you click. – tftd 18 hours ago
I get the same result as before - only works successfully on the last task. – thebarless 17 hours ago
feedback

Your Answer

 
or
required, but never shown

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