too long

Question

I have a project in Zend Framework, that has on a page a menu with all products ordered by categories. I want to make a pop-up with name and description of a product. This should be shown on every click on a product. I use this code for my pop-up:

<script type="text/javascript">
 function show_popup(id) {
if (document.getElementById){
    obj = document.getElementById(id);
    if (obj.style.display == "none") {
        obj.style.display = "";
    }
}
}
function hide_popup(id){
if (document.getElementById){
    obj = document.getElementById(id);
    if (obj.style.display == ""){
        obj.style.display = "none";
    }
 }
}
</script>

<div id="my_popup" style="display:none;border:1px dotted gray;padding:.3em;background-color:white;position:absolute;width:400px;height:400px;left:10px;top:300px">
                                                <div align="right">
                                                        <a href="javascript:hide_popup('my_popup')">Close</a>
                                                </div>
                                                        <h3>Product Name</h3>
                                                        <p>Product description</p>
                                        </div>

The problem is that it works with static text. My products are taken from DB like this:

<?php foreach ($products as $product):?>
 <a href="javascript:show_popup('my_popup')"> <?php echo $product['front_name'];?></a>
<?php endforeach;?>

So I have a link for the pop-up on every title, but I want to print name and description of the product is clicked in that pop-up and I don't know how to verify which is the product that is clicked. I was thinking to send some parameters, but I am not sure how to do that. If you have some solutions for my problem, please do tell! Thank you

I've tried to put my **<div id="my_popup>**  in foreach, but it doesn't work because my pop-up windows does not appear anymore.

Answer 1

I encountered the same problem with Jquery, my solution was calling the JS function by providing it the id of the product so that it is unique,and concatenation with a alphanumeric (cause js dont accept only numeric in DIV): for example (inside your loop):

<?php $id_for_div="unique_id_".$product['id'];
      $id_product=$product['id'];?>

then pass that new id to the JS function showPopup('<?=$id_product?>'); and the id of the DIV must be :<div id='<?id_for_div ?>' ..>..</div>

then in your JS function you can get the new parameter and do staff acording to it (in Jquery i do showPopup(id){ $('#unique_id_'+id).....} i hope it helps.