Trying to pass a php id to javascript on the same page

[dk4210]

Hello Guys,

 

I need some help here..

 

I have a page that has a grid on it and I have a hidden div(below the grid). When the link is clicked inside the grid it opens the hidden div (With me so far?) using the following code for the link in the grid.

 

foreach($ct->data as $key => $value){
   $ct->data[$key][3]='<a href=#" onclick="part2();" href="index.php?messages&id='.$ct->data[$key][0].'">'.$ct->data[$key][3].'</a>';

 

Here is the JS to show the hidden div

 

<script type="text/javascript">
function part2() {
var part2 = document.getElementById('part2');
if ( part2.className == 'hidden' ) {
part2.className = 'visible';
} else {
part2.className = 'hidden';
}
}
</script> 

 

The problem I have is its passing the id to the hidden div, but its also refreshing the page (Which is not cool when you have a hidden layer that opens.

 

Here is the code for the hidden layer

 

<div id="part1">
<p>Messages</p>
</div>

<div id="part2" class="hidden">
<p><a href=index.php?content=messages>close</a></p>';

$id = $_GET['id'];

echo "
This is the id - $id
</div>

 

 

If I do it this way it wont reload the pages but it also wont pass the var

foreach($ct->data as $key => $value){
   $ct->data[$key][3]='<a href=#" onclick="part2();" href="#&id='.$ct->data[$key][0].'">'.$ct->data[$key][3].'</a>';

 

So looks like I need to pass the var through the onclick function or some js function but not sure how.. Any help would be appreciated..

 

Thanks!

Dan

 

 

 

 

[reyborn]

Change your code something like this:

 

foreach($ct->data as $key => $value){
   $ct->data[$key][3]='<a href=#" onclick="part2(<?php echo $ct->data[$key][0]; ?>);" href="javascript:void();">'.$ct->data[$key][3].'</a>';
}

 

<script type="text/javascript">

function part2(id) {

var part2 = document.getElementById('part2');

if ( part2.className == 'hidden' ) {

part2.className = 'visible';

document.getElementById('message').html = 'This is the ID: '+id;

} else {

part2.className = 'hidden';

}

}

</script>

 

<div id="part2" class="hidden">

<p><a href=index.php?content=messages>close</a></p>';

 

<span id=message></span>

</div>

[reyborn]

Sorry there is an error in the code above, please change the following line:

 

document.getElementById('message').html = 'This is the ID: '+id;

 

into:

 

document.getElementById('message').InnerHTML = 'This is the ID: '+id;

[dk4210]

Thanks for the reply..

 

I changed your code a little cause it was causing syntax errors and it still doesn't work.

 

Here is the code that you gave me that has been modified.

 

1. Added the following code

foreach($ct->data as $key => $value){
   $ct->data[$key][3]='<a href=#" onclick="part2('.$ct->data[$key][0].');" href="javascript:void();">'.$ct->data[$key][3].'</a>';

 

2. Added this is the header

<script type="text/javascript">
function part2(id) {
var part2 = document.getElementById('part2');
   if ( part2.className == 'hidden' ) {
      part2.className = 'visible';
      document.getElementById('message').InnerHTML = 'This is the ID: '+id
   } else {
      part2.className = 'hidden';
   }
}
</script>

 

3. Added this in the hidden div

<span id=message></span>

 

Still not displaying the id..

 

Please advise..