show data in lightbox

Question

i want to show related data on click red circled image in light box but when i click it always shows the data in light box of the first record in the table i want to show concern record of click ,my code is here in JavaScript i have write these lines of code

 <script>
 function manageLightbox(visibility,id) {
 document.getElementById('overlay').style.display = visibility;
 document.getElementById('content').style.display = visibility;
 }
 </script>

i have called this function in my html

<a href="#"><img src="images/core/icon16/zoom.png" title="View" onClick="return manageLightbox('block','<?php echo $res['id']?>');" /></a>

the html of my light box is just here

<div id="content" class="content">
<a href = "javascript:void(0)" onClick="return manageLightbox('none')">
<img  src="images/images1.jpeg" style="width:25px; height:25px; float:right"/></a>
<br/>
<center>
    <table>
        <tr>
           <td>Product_ID</td>
           <td><input type="text" name="product_id" value="<?php echo $row['id']; ?>"/></td>
        </tr>
        <tr>
            <td>Name</td>
            <td><input type="text" name="name" value="<?php echo $row['name']; ?>"/></td>
        </tr>
      //and all other fields in light box ....
    </table>
</center>
</div>
<div id="overlay" class="overlay" onClick="return manageLightbox("")></div>

Answer 1

First, you are using $res in your call, and $row in your view, maybe wrong name? Second, do you use AJAX? With Jquery you can make easy AJAX calls and put the data into a place where you want. So: Use the $res["id"] as data to the data you want, (return for example the table) and include that in your div content.

The reason why you see only the first is because you assign multiple div's with the same name, javascript will return the first element with the given name. By using AJAX you can make a call, and the information will be included in the only div "content" which you have on your view.

Example:

<script>
$(".link_zoom").click(function(){ //add class to a href: class='link_zoom', when click, trigger event
   $.ajax({
      type: 'POST'
      url: "someaction.do.php",
      data: "id=" + $(this).attr("id"), //add to the a href: id='<?php echo $res["id"]; ?>'
      dataType: "html",
      success: function(html) 
      { 
        $(".content").html(html); //will add the html to the content div
      }
   });
});
</script>