[SOLVED] Working with multiple results, click 4th result, it takes 1st results details...

[ineedhelpbigtime]

I am working on a uni project which is a basic social networking site. I am designing the friends system in AJAX/PHP. The part i am stuck on is accepting friend requests.

 

Here's my code for the displaying of requests awaiting authorisation.

// awaiting result is the query to return friend requests and is working.

if(!($awaitingresult))

{

  echo "<h2>Awaiting Confirmation...</h2><br />You currently have no requests to action.";

}

else

{

  $awaitingtotal = mysql_num_rows($awaitingresult);

  echo "<h2>Awaiting Confirmation...</h2><br />You currently have $awaitingtotal confirmation(s) awaiting your attention!<hr/>" ;

  while($awaitingrow = mysql_fetch_array($awaitingresult))

{

$birthdate = "$awaitingrow[birthday]";

    echo "<br /><img src='images/nia.jpg' align='right' alt='No Image Available' width=\75' height='75'>

Name: $awaitingrow[names]<br/>

    Username: $awaitingrow[username] <br/> 

Age: " . GetAge($birthdate);

 

// this form starts the AJAX. The ajax returns the results to the div insert_response.  !! PROBLEM !! when multiple results are returned by the ajax/php. When i click the accept rollover, it doesn't know what input i want to take the results from.

echo "<form method='post' name='accept' action='javascript:acceptfriend()'><input type='hidden' id='authid' name='id' value='$awaitingrow[authid]'><div id='insert_response'><input name='image' type='image' onMouseOver=\"this.src='images/accept1.png'\" onMouseOut=\"this.src='images/accept.png'\" src='images/accept.png' align=middle width=80 height=18> <a href='ignore.php'><img src='images/decline1.png' align=middle alt='Add to ignore list!'></a></form></div>" ;

}

}

 

AJAX:  ** the ajax doesn't know which input id=authid that it should be taking the value from, so always takes the first one regardless of how many results there are. **

 

var nocache = 0;

function acceptfriend() {

// Optional: Show a waiting message in the layer with ID login_response

document.getElementById('insert_response').innerHTML = "Just a second..."

// Required: verify that all fileds is not empty. Use encodeURI() to solve some issues about character encoding.

var id = encodeURI(document.getElementById('authid').value);

// Set te random number to add to URL request

nocache = Math.random();

// Pass the login variables like URL variable

http.open('get', 'confirm.php?authid='+id+'&nocache = '+nocache);

http.onreadystatechange = acceptfriendReply;

http.send(null);

}

function acceptfriendReply() {

if(http.readyState == 4){

var response = http.responseText;

// else if login is ok show a message: "Site added+ site URL".

document.getElementById('insert_response').innerHTML = ''+response;

}

}

 

PHP: ** the php is working, but when you click on "accept" it updates using the authid value of the first result, and the code is displayed in the div=insert_response of the first result!. **

$id = $_GET['authid'];

$awaitingresult = mysql_query ("SELECT `names`, `username` , `birthday` , `useroneid` , `usertwoid`, `authid`

FROM `users` , `auths`

WHERE users.userid = auths.useroneid

AND auths.authid='$id'");

$row = mysql_fetch_array($awaitingresult);

mysql_query ("UPDATE auths SET status = 1 where authid='$id'");

$names = $row['names'];

echo "<img src=\"images/tick.png\" align=\"left\" alt=\"Green Tick\" width=\15\" height=\"15\"/> You have successfully confirmed" . first_name($names);

echo "as your friend!";

 

PLEASE TELL ME SOMEONE KNOWS THE ANSWER. I'm know the ajax i am using is to basic to carry out this task, but i am at a loss. I cant find any examples on net of how to fix this (probably because i dont know what im looking for) and im getting desperate now!

[xtopolis]

Please use code tags next time.

 

Secondly, the problem likely lies with this line:

var id = encodeURI(document.getElementById('authid').value);

 

I'm guessing every "friend request thing" has an element with the id "authid".  Therefore when getElementById() goes looking, it returns the first match since it's doing only what it's told.  You should probably use a this reference in your acceptfriend() function so that it knows what value to use.

 

<a href="#" onclick="acceptfriend(this.value)" value="113">Friend Name</a>

Where value="authID" or whatever unique friend identifier you're using per friend.

[ineedhelpbigtime]

I will look into that in the morning. Apologies for not using the code tags.

 

If the "this" function works, how about displaying the result of the update...?  currently i have a div called insert response that surrounds the accept and ignore buttons so that when it updates, it removes the options to accept/ignore and displays success confirmation. But ATM this also applies to the first result?

 

[attachment deleted by admin]

[xtopolis]

Read up on the javascript "this" keyword reference: http://www.quirksmode.org/js/this.html

 

When you build out the "awaiting reply" users assign their userid to the div id element.

 

//...
while(list($uid,$uname) = mysql_fetch_array($result)){
  echo '<div class="usercontainer">';

echo $uname.'<br />';
echo "<div id='div$uid'><a href='#' onclick=\"acceptfriend('$uid')\"><img src="accept.jpg" alt="accept" /></a></div>";

  echo '</div><!--usercontainer-->';
}
//...

You could leave out the this reference and just supply it a uid.  Don't copy/paste that as it won't work but should give you an idea of how to remedy your problem.

[ineedhelpbigtime]

OK i have read and read and read. I am still not getting it. I see what you have demonstrated in the code snippets but i just cant make it work! Im so close to getting it i just need to see one working example and i will be happy as a pig in poo.

 

This code is giving the div's unique names, i see that...

 

   while($awaitingrow = mysql_fetch_array($awaitingresult))
{
    $id=$awaitingrow['authid'];
    echo '<div class="usercontainer">';
$birthdate = "$awaitingrow[birthday]";
    echo "<br /><img src='images/nia.jpg' align='right' alt='No Image Available' width=\75' height='75'>
Name: $awaitingrow[names]<br/> 
    Username: $awaitingrow[username] <br/>  
Age: " . GetAge($birthdate); 
echo "<div id='div$id'><a href='#' onclick=\"acceptfriend('$id')\"><img src=\"images/accept.png\" alt=\"accept\" /></a></div>";
echo "</div><!--usercontainer-->";
}

 

But how do i use it in my JS, its turned into a bit of a mess now, but could you possibly make sense of it?

 

var nocache = 0;
function acceptfriend(id) {

var id = id;
document.getElementById('div+id+).innerHTML = "Just a second..."
nocache = Math.random();

http.open('get', 'confirm.php?authid='+id+'&nocache = '+nocache);
http.onreadystatechange = acceptfriendReply;
http.send(null);
}

function acceptfriendReply() {
if(http.readyState == 4){
var response = http.responseText;
document.getElementById('div').innerHTML = ''+response;
}
}

 

I just dont know how to use the value passed from acceptfriend(*here*) in my javascript.

 

Im just stuck... and this is killin me :S Once i have this all my probs are sorted...

 

[xtopolis]

What are your errors?

 

1)Have you debugged it yet?  Does the php output the HTML correctly as expected? (if you view source, does it show names like div123 or w/e for the div$id areas?)

 

2)In your javascript, do an alert(id)  as the first thing inside the acceptfriend(id) function

var nocache=0;
function acceptfriend(id){
alert(id);
//...

^-- Does the id alert the expected authid value?

 

http.open('get', 'confirm.php?authid='+id+'&nocache = '+nocache);

3)if you alert(confirm.php?authid='+id+'&nocache = '+nocache) does it output the expected URL?

-does that url work if you copy/paste it directly into a browser?

 

4)Are you using a quality web browser that will show you javascript errors(hint hint , firefox [Error Console])?

 

Don't answer back until you've taken a look at those 4 things I've mentioned.  If you do that, you probably won't even need my help, but if you're still stuck...and have done all those debug things, post your problem.  Do not say "it won't work", I have no idea about your code, so that won't help me any.

[ineedhelpbigtime]

IT WORKS!

 

One last problem: The db is now updating, and it returns the "Just a second..." waiting message to the correct DIV. I am so relieved this is working, i had no clue about FF error console... turns out i was missing a termination on one of my lines ";". After that, the alert worked and i was sorted! One final question if i may....

 

How do i make the ID available to my acceptfriendReply()? FF.EC is telling me the id variable isn't assigned, which it isn't i guess because the reply is a seperate function.

 

var nocache = 0;
function acceptfriend(id) {
alert(id);
var id = id;
document.getElementById('div'+id+'').innerHTML = "Just a second...";
nocache = Math.random();

http.open('get', 'confirm.php?authid='+id+'&nocache = '+nocache);
http.onreadystatechange = acceptfriendReply;
http.send(null);
}

function acceptfriendReply() {
if(http.readyState == 4){
var response = http.responseText;
document.getElementById('div'+id+'').innerHTML = ''+response;
}}

 

Truly, thank you so much. Without you i would have wasted the past 6 hours. Dunno what more i can say. I'm truly thankful and indebted to you (unfortunately i am also useless to you  ).

 

 

 

[ineedhelpbigtime]

Ok i just moved the } from the end of the acceptfriend() function to after the reply function and it has worked...

 

So unless that is the wrong way of doing it. Once again thank you very much.

[xtopolis]

You could have just passed the same id argument to your other function.  id was/is in a different scope so the other function couldn't see it.

 

Sorry if I seemed impatient, but when I see the words "it doesn't work" with no description I wonder how people expect me to read their mind.

[ineedhelpbigtime]

I worked in IT long enough (as second line support for internet apps) to know a techie like yourself doesn't like people being general when it comes to errors. Had i of known about FF.EC i would have provided you with some better information. In fact, i daresay if i knew of FF.EC i would have got there after your first guidance post. So you managed to pinpoint a method to solve my prob straight away even if the description of the problem, by myself, was shoddy.

 

Not only have you fixed my prob, you taught me some valuable things. JS alert for checking the variable passed, the "this" thing, and Firefox error console. Once again many thanks, you're a code hero.