CODEWITHSUNDEEP
phpjavascriptpopup
DrXCheng
DrXCheng

Reputation: 4132

utilize PHP variable in javascript

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?

Upvotes: 1

Views: 210

Answers (2)

rlemon
rlemon

Reputation: 17666

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>

Upvotes: 0

thejh
thejh

Reputation: 45578

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).

Upvotes: 2

Related Questions