up vote 1 down vote favorite

I just asked another question here: global variable and reduce database accesses in PHP+MySQL I am using PHP+MySQL. The page accesses to the database and retrieve all the item data, and list them. I was planning to open a new page, but now I want to show a pop div using javascript instead. But I have no idea how to utilize the variables of PHP in the new div. Here is the code:

<html>
</head>
<script type="text/javascript">
function showDiv() {
    document.getElementById('infoDiv').style.visibility='visible';
}
function closeDiv() {
    document.getElementById('infoDiv').style.visibility='hidden';
}
</script>
</head>
<body>
<ul>
<?php foreach ($iteminfos as $iteminfo): ?>
    <li><a href="javascript:showDiv()"><?php echo($iteminfo['c1']); ?></a></li>
<?php endforeach;?>
</ul>
<div id="infoDiv" style="visibility: hidden;">
    <h1><?php echo($c1) ?></h1>
    <p><?php echo($c2) ?></p>
    <p><a href="javascript:closeDiv()">Return</a></p>
</div>
</body>
</html>

"iteminfos" is the results from database, each $iteminfo has two value $c1 and $c2. In "infoDiv", I want to show the details of the selected item. How to do that?

Thanks for the help!

A further question: if I want to use, for example, $c1 as text, $c2 as img scr, $c1 also as img alt; or $c2 as a href scr, how to do that?

share|improve this question
74% accept rate
feedback

2 Answers

up vote 2 down vote accepted

Try this:

<?php foreach ($iteminfos as $iteminfo): ?>
  <li>
    <a href="javascript:showDiv(<?php echo(json_encode($iteminfo)) ?>)">
      <?php echo($iteminfo['c1']); ?>
    </a>
  </li>
<?php endforeach;?>

Also, modify showDiv to take your row data:

function showDiv(row) {
  document.getElementById('infoDiv').style.visibility='visible';
  document.getElementById('infoDiv').innerHTML = row['c1'];
}

Basically, you have to consider that the javascript runs in the browser long after the PHP scripts execution ended. Therefore, you have to embed all the data your javascript might need into the website or fetch it at runtime (which would make things slower and more complicated in this case).

share|improve this answer
it seems quote mark and double quote mark have problem here. – xuc Nov 1 '11 at 21:27
@xuc: Ah, right, you'll have to replace \ with \\ and " with \" in PHP, then it should work. – thejh Nov 1 '11 at 21:34
It works when I replace " with ' (instead of \"). – xuc Nov 1 '11 at 22:00
@xuc: That might fail sometimes, I really don't recommend it. – thejh Nov 1 '11 at 22:01
But it doesn't work with \". A have a further question edited in the original post. Thank you! – xuc Nov 1 '11 at 22:03
feedback
up vote 0 down vote

Do you want a single info area with multiple items listed on the page and when you click an item the info area is replaced with the new content??? or you want a new info area for each item??

I see something along the lines of the first approach, so I will tackle the latter.

<?php
//do some php magic and get your results
$sql = 'SELECT title, c1, c2 FROM items';
$res = mysql_query($sql);

$html = '';
while($row = mysql_fetch_assoc($res)) {
    $html .= '<li><a class="toggleMe" href="#">' . $row['title'] . '</a><ul>';
    $html .= '<li>' . $row['c1'] . '</li><li>' . $row['c2'] . '</li></ul>';
    $html .= '</li>'; //i like it when line lengths match up with eachother
}
?>
<html>
</head>
<script type="text/javascript">
window.onload = function(){ 
    var els = document.getElementsByClassName("toggleMe");
    for(var i = 0, l = els.length; i < l; i++) {
        els[i].onclick = function() {
           if(this.style.display != 'none') {
            this.style.display = 'block';
           } else {
            this.style.display = 'none';
           }
        }
    }
}
</script>
</head>
<body>
<ul>
<?php
echo $html;
?>
</ul>
</body>
</html>
share|improve this answer
ohh, and the css .toggleMe { display: none; } – rlemon Nov 1 '11 at 20:53
feedback

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.

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