[SOLVED] Javascript for id that contains a counter as part of the name

[limitphp]

On my page, there are a whole bunch of divs with id names of:

voteCount1, voteCount2, voteCount3, etc.

The number is generated by php code using a counter.

Each time the page is refreshed I don't know how many divs there will be.

 

Ok, now in my javascript, I'm trying to access these divs with this code:

document.getElementById("voteCount"+count).innerHTML=xmlHttp.responseText

Its not working.  The variable count somehow needs to be part of the name.

I remember that it is possible to do this, but I forgot how.

I wish I could just make a variable:

var = "voteCount"+count;

then just use that like this:

document.getElementById(var).innerHTML=xmlHttp.responseText

But I'm pretty sure yuo need to have quotes around the name, so it won't work, I don't think.

Any help would be really appreciated.

[premiso]

Without more code it is hard to diagnose, that and this is a javascript issue not php.

 

But what you have should work although I would change this:

 

var = "voteCount"+count;

to

var countName = "voteCount" + count;

 

I would alret the countName and make sure it is what you expect it to be, cause as long as there is a div with that name, it should work flawlessly.

[limitphp]

I tried that, but it didn't work.

I'm trying to do exactly what digg does when you click the digg button to digg a story.

Only I call it vote instead and its for songs.

I want to use ajax to make the vote counter increase when you click vote without refreshing the whole page.

I have alot of code.  First, here's the php code where the div is:

<TD ALIGN="center" VALIGN="center" STYLE="background-color:#3F85CD">
<FONT STYLE="font-family:Helvetica; color:#FFFFE8; font-size:15px;">
	<DIV ID="voteCount<?php echo $greckleVoteCount?>" VALIGN="bottom">
                     <B><?php echo $totalVoteCount ?></B>
               </DIV>
</FONT>
<FONT STYLE="font-family:arial; color:#FFFFE8; font-size:11px; letter-spacing:1px">
	<BR>
	votes
</FONT>
</TD>
</TR>
<TR>
   <TD ALIGN="center" VALIGN="center" STYLE="background-color:#2A5A8B">
	<?php if ($loginExist==0){ ?>
        <A HREF="#" onClick="alert('You must be logged in to vote')" CLASS="greckleVote">vote</A>
	<?php }else { ?>
	   <A HREF="javascript:vote(<?php echo $recordVote[songID].",".$greckleVoteCount?>)" CLASS="greckleVote">vote</A>
	<?php } ?>
	</FONT>
</TD>
</TR>

Thats where the votes are displayed and also where they click vote and I call the vote() function.

Ok, now here is the vote function....

its in the vote.js file:

var xmlHttp

function vote(songID,counter)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="vote.php"
url=url+"?songID="+songID+"&itemCount="+counter
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
var countName = "voteCount" + counter;
document.getElementById(countName).innerHTML=xmlHttp.responseText 
} 
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
}
return xmlHttp;
}

Ok, now inside the vote function it calls the vote.php page.

Here is the vote.php page:

<?php
include("connGreckle.php");

//******************************* CHECK IF USER ALREADY VOTED FOR THIS SONG	*********************************

$songID=$_GET["songID"];
$itemCount=$_GET["itemCount"];

if (isset($_COOKIE['nwo'])) { 	//**********	CHECK FOR COOKIE
$query = "SELECT * FROM cookie WHERE tempID = '$_COOKIE[nwo]'";
$result = mysql_query($query);
$data = mysql_fetch_assoc($result);
if ($data<>""){ 				
	$userID = $data['userID'];		
} 
}

$queryCheck4Vote = "SELECT songID FROM vote WHERE songID = '$songID' AND userID = '$userID'";
$resultCheck4Vote = mysql_query($queryCheck4Vote);
$dataCheck4Vote = mysql_fetch_assoc($resultCheck4Vote);
if ($data<>""){ 				
	echo "No go";		
}else{
mysql_query("INSERT INTO vote (songID, date, userID) 
VALUES ('$songID', 'now()', '$userID')");
}

$sql="SELECT * FROM vote WHERE songID = $songID";

$result = mysql_query($sql);
echo mysql_affected_rows();
?>

 

Now, I'm really new to the ajax stuff, so this is pretty much modeled after the w3school website ajax example.

 

 

 

 

[flyhoney]

I dont see anything wrong with doing:

 

document.getElementById("voteCount"+count);

 

or

 

var id = "voteCount" + count;
var div = document.getElementById(id);

 

But this is a javascript issue and should probably be posted elsewhere.

 

(my 2 cents - srsly, you should be using a javascript library like jQuery or Prototype)

[limitphp]

what exactly is a javascript library?

Would using jQuery cut down on the amount of code needed?

I was reading some of the info about jQuery on their website, and it seemed just as complicated as not using it, maybe even more so.

[limitphp]

I got it working!

 

I started over and used the example in this forum at the top...the sticky that says Ajax a basic working example.

Awesome code!.....

 

sorry for posting in the wrong forum.....thanks for putting it in this one, and thanks for the great ajax example!