7 Replies - 2714 Views - Last Post: 31 May 2012 - 08:58 PM

#1 lilymrichards  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 12-February 12

Assigning getElementById to specific variable id from PHP page

Posted 31 May 2012 - 11:14 AM

I am trying to put a Like function into place for the forum-based website I work on. So far I've managed to get the javascript to work properly for the most part. The main displayed page is a php page, from which a javascript function saved in a separate .js file is included via html.

The only problem that persists is in the function that does the innerHTML stuff. Because it is a forum and therefore has a lot of posts, I tried making the id unique by using this code:

<?php  echo "
	    <td id=\"likeunlike".$POST->id."\" style=\"text-align:left\">";
?>


wherein $POST is defined by a mysql_query before. This all works fine and using the web developer it's shown me that the function does call the right id etc. The php part that calls the function is as follows:

	    echo "<td id=\"likeunlike".$POST->id."\" style=\"text-align:left\">

	   <div style=\"background-image:url(/newlayout/images/likes.png); background-repeat: no-repeat; display: inline-block; height: 23px; width: 23px\"><b><font color=\"#ffffff\" size=\"2\"><center>".$like."</center></font></b></div>
	    
	    <a style=\"color:#234904\" onmouseover=\"this.style.color='#6666CC'\" onmouseout=\"this.style.color='#234904'\" id=\"".$POST->id."\" onclick=\"likePost(this.id)\" name=\"like\">  Like This Post</td>


and the javascript function it calls from a separate file is this:

var xmlHttplike;

function likePost(x)
{ 
xmlHttplike=GetXmlHttpObject();
if (xmlHttplike==null)
 {
 alert ("Browser does not support HTTP Request");
 return;
 }
 
var pid = document.getElementById(x).id;
var url="forum-like.php";
url+="?pid="+pid;
url+="&sid="+Math.random();
xmlHttplike.onreadystatechange=stateChangedlike;
xmlHttplike.open("GET",url,true);
xmlHttplike.send(null);
}


function stateChangedlike() 
{ 
if (xmlHttplike.readyState==4 || xmlHttplike.readyState=="complete")
 { 
 document.getElementById("likeunlike").innerHTML=xmlHttplike.responseText;
 } 
}


Basically, I need a way to get the stateChangedlike function to find the post id called in the previous function, so that I can properly assign the getElementById to the correct id.

I should note that if I put the id as simply "likeunlike" in the php part that calls the function, it works fine, but the innerHTML response text always appears in the first post, as that is the first instance of the element id being "likeunlike". I need it to appear in the post it concerns.

Hope this makes sense and any help would be greatly appreciated :)

Is This A Good Question/Topic? 0
  • +

Replies To: Assigning getElementById to specific variable id from PHP page

#2 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3481
  • View blog
  • Posts: 10,038
  • Joined: 08-June 10

Re: Assigning getElementById to specific variable id from PHP page

Posted 31 May 2012 - 01:13 PM

from the description Id say something along
function stateChangedlike() 
{ 
if (xmlHttplike.readyState==4 || xmlHttplike.readyState=="complete")
 { 
 document.getElementById("likeunlike" + x).innerHTML = xmlHttplike.responseText;
 } 
}

XMLHttpRequest.requestid might be of interest here.
Was This Post Helpful? 0
  • +
  • -

#3 lilymrichards  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 12-February 12

Re: Assigning getElementById to specific variable id from PHP page

Posted 31 May 2012 - 01:34 PM

Thank you so much for your reply!
I tried it and now the innerHTML won't work though, so it doesn't update without refreshing...
Also could you tell me more about the XMLHttpRequest.requestid? -googles frantically-
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3481
  • View blog
  • Posts: 10,038
  • Joined: 08-June 10

Re: Assigning getElementById to specific variable id from PHP page

Posted 31 May 2012 - 01:38 PM

seems like it is not part of the XHR object anymore but who cares, its Javascript
Was This Post Helpful? 0
  • +
  • -

#5 VolcomMky  Icon User is offline

  • D.I.C Regular

Reputation: 74
  • View blog
  • Posts: 313
  • Joined: 13-May 09

Re: Assigning getElementById to specific variable id from PHP page

Posted 31 May 2012 - 02:09 PM

What I see is this line..
var pid = document.getElementById(x).id;


If you are already submitting the ID as the variable X, why do you set it again?

Instead why don't you use this?
var url="forum-like.php";
url+="?pid="+x;


Are you getting an error or watching what URL is being requested?

As far as changing the innerHTML to a specific place like Dormilich said, you would want to use a global variable possibly.

Similar to this..
var xmlHttplike;
var likeID;
function likePost(x)
{ 
likeID = x;
xmlHttplike=GetXmlHttpObject();
if (xmlHttplike==null)
 {
 alert ("Browser does not support HTTP Request");
 return;
 }
 
var url="forum-like.php";
url+="?pid="+x;
url+="&sid="+Math.random();
xmlHttplike.onreadystatechange=stateChangedlike;
xmlHttplike.open("GET",url,true);
xmlHttplike.send(null);
}


function stateChangedlike() 
{ 
if (xmlHttplike.readyState==4 || xmlHttplike.readyState=="complete")
 { 
 document.getElementById("likeunlike" + likeID).innerHTML=xmlHttplike.responseText;
 } 
}

This post has been edited by VolcomMky: 31 May 2012 - 02:12 PM

Was This Post Helpful? 0
  • +
  • -

#6 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3481
  • View blog
  • Posts: 10,038
  • Joined: 08-June 10

Re: Assigning getElementById to specific variable id from PHP page

Posted 31 May 2012 - 02:29 PM

View PostVolcomMky, on 31 May 2012 - 11:09 PM, said:

As far as changing the innerHTML to a specific place like Dormilich said, you would want to use a global variable possibly.

and this is exactly the case where you must not use a global variable.

imagine the following:
- you (un)like div1, save the ID in a global variable, request1 goes on
- you (un)like div3, overwrite the ID in the global variable, request2 goes on
- request1 returns, uses global variable with the ID of div3 !!!
- request2 returns, uses global variable with the ID of div3
Was This Post Helpful? 0
  • +
  • -

#7 VolcomMky  Icon User is offline

  • D.I.C Regular

Reputation: 74
  • View blog
  • Posts: 313
  • Joined: 13-May 09

Re: Assigning getElementById to specific variable id from PHP page

Posted 31 May 2012 - 03:12 PM

Then you can have the Response have the ID in it and then parse it out to know what ID to update with what Text
Was This Post Helpful? 0
  • +
  • -

#8 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3481
  • View blog
  • Posts: 10,038
  • Joined: 08-June 10

Re: Assigning getElementById to specific variable id from PHP page

Posted 31 May 2012 - 08:58 PM

you can just assign the ID to the XMLHttpRequest object itself, just use a property name that is not in use.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1