modal popup keep populating only first item data on all item buttons

Question

I am implementing cloth shopping website in which i am uploading cloth items with their images and description from admin panel. on home page i am retrieving all cloth items that are in stock and displaying using while loop. in order to view details i have put "view button" which on click opens modal popup and displays whole description of the item. But i am facing problem that every button of item on click only displays first item description in modal popup on all item button. I want that every item button should display item owns description. but it keeps populating first item data on every button.

Code:

<?php
$link = mysql_connect("localhost", "root", "") or die("Cannot Connect to the database!");
mysql_select_db("login", $link) or die("Cannot select the database!");
$sql = "SELECT * FROM add_stock";
$result = mysql_query($sql);
while ($row = mysql_fetch_assoc($result)) {?>     
  <div class="grid_element"> 
    <div class="show-image">
      <form method="post" action="" id="myform" >
        <img  src="<?php echo $row['image'] ?>" name="image" onclick="openModal()" id="image" name="image1" target="_parent">
        <figcaption>
          <b>Product Code: <?php echo $row['id']; ?> <br/>
          <?php echo $row['dress_description']; ?> <br/> 
          PKR <?php echo $row['price']; ?></b>
        </figcaption>
      </form>
      <!-- view button -->
      <button class="update fa fa-eye" id="popupview" onclick="openModal1()"  title="View" type="image"  /></button>

      <!-- View Item modal popup -->
      <div id="mpopupBox" class="mpopup">
          <!-- mPopup content -->
        <div class="mpopup-content">
          <div class="mpopup-head">
            <span class="close7">×</span>
            <h2 style="font-family:Cooper Black;">Item Description</h2>
          </div> 
          <div class="mpopup-main" ><br/>              
              <img  src="<?php echo $row['image']; ?>"  style="width: 300px; height: 300px; border-radius: 25px;">
              <p style="margin-top: -250px; margin-left: 380px; "><font size="4"><b>Product Code: <?php echo $row['id']; ?> <br/>
                PKR <?php echo $row['price']; ?> <br/>
                Brand: <?php echo $row['brand_name']; ?> <br/>
                Gender: <?php echo $row['gender_name']; ?><br/> 
                Category: <?php echo $row['category_name']; ?><br/>
                Size: <?php echo $row['size_name']; ?> <br/>
                Material: <?php echo $row['material_name']; ?> <br/>
                Description: <?php echo $row['dress_description']; ?></font></b> </p>  
              <button style="margin-left: 380px; margin-top: 20px; width: 135px;" class="button button4 add-to-cart"><i class="fa fa-shopping-cart"></i>Add to Cart</button>
          </div>
          <div class="mpopup-foot">
          <!-- <p>created by CodexWorld</p> -->
          </div>
        </div>
      </div>
      <script type="text/javascript">
        var mpopup = document.getElementById('mpopupBox');
        // get the link that opens the mPopup
        var mpLink = document.getElementById("popupview");
        // get the close action element
        var close7 = document.getElementsByClassName("close7")[0];
        // open the mPopup once the link is clicked
        mpLink.onclick = function () {
            mpopup.style.display = "block";
        }
        var imagess = document.querySelectorAll('button[title="View"]');
        for (var i = 0, len = imagess.length; i < len; i++) {
            imagess[i].addEventListener('click', openModal1);
        }
        function openModal1() {
            mpopup.style.display = "block";
        }
        // close the mPopup once close element is clicked
        close7.onclick = function () {
            mpopup.style.display = "none";
        }
      </script>
    </div>
  </div>

same id can not be used multiple time. `id="popupview" onclick="openModal1()"` — urfusion, Aug 16 '17 at 12:39
There are multiple way to do that. 1. Use ajax for fetching information and open up the model. 2. Pass`this` in `onclick="openModal1(this)"` and fetch information according to `this` object — urfusion, Aug 16 '17 at 12:42
https://stackoverflow.com/questions/22820398/load-modal-pop-up-in-foreach-loop — urfusion, Aug 16 '17 at 12:45
want to thank @urfusion, i was stuck on same kind of issue from past 4 hours until now — ericdemo07, Oct 02 '18 at 23:16

Nana Partykar · Accepted Answer · 2017-08-17T08:02:01.193

1) The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead. Stop using mysql functions.

2) Why to connect database connection on each and every file. Create one common db file where database connection code is written and include in each file. Otherwise, when database or username or password get changed, then you have to change it in each and every file. So, to avoid it, create one common db file.

db.php

<?php
$link = mysql_connect("localhost", "root", "") or die("Cannot Connect to the database!");
mysql_select_db("login", $link) or die("Cannot select the database!");
?>

3) IDs can't be same through out a page. So, change it accordingly.

YourPage.php

<?php
include("db.php");
$result = mysql_query("SELECT * FROM add_stock");
while ($row = mysql_fetch_assoc($result)) {?>
  <div class="grid_element"> 
    <div class="show-image">
      <form method="post" action="" id="myform" >
        <img  src="<?php echo $row['image'] ?>" name="image" onclick="openModal()" id="image" name="image1" target="_parent">
        <figcaption>
          <b>Product Code: <?php echo $row['id']; ?> <br/>
          <?php echo $row['dress_description']; ?> <br/> 
          PKR <?php echo $row['price']; ?></b>
        </figcaption>
      </form>

      <button class="update fa fa-eye openPopUp" data-url="ajax_pop_up.php?id=<?php echo $row['id'];?>" title="View" type="image"  /></button>
    </div>
  </div>
<?php }?>

<style>
  .displayBlock{display:block;}
  .displayNone{display:none;}
</style>

<div id="mpopupBox" class="mpopup displayNone">

</div>

<script>
  //For Opening Pop Up
  $(document.body).on('click', '.openPopUp', function () {
    $("#mpopupBox").removeClass("displayNone").addClass("displayBlock");
    $.ajax({url:$(this).attr('data-url'),cache:false,success:function(result){
        $("#mpopupBox").html(result);
    }});
  });

  //For Closing Pop Up
  $(document.body).on('click', '.close7', function () {
    $("#mpopupBox").removeClass("displayBlock").addClass("displayNone");
  });
</script>

4) Create one common ajax pop up file in same directory, where pop up content will appear.

ajax_pop_up.php

(if you are planning to change file name here, change in data-url of YourPage.php page, both are related to each other)

<?php
include("db.php");
$result = mysql_query("SELECT * FROM add_stock WHERE id=".$_GET['id']);
while ($row = mysql_fetch_assoc($result)){?>
<!-- mPopup content -->
<div class="mpopup-content">
  <div class="mpopup-head">
    <span class="close7">×</span>
    <h2 style="font-family:Cooper Black;">Item Description</h2>
  </div> 
  <div class="mpopup-main" ><br/>              
      <img  src="<?php echo $row['image']; ?>"  style="width: 300px; height: 300px; border-radius: 25px;">
      <p style="margin-top: -250px; margin-left: 380px; "><font size="4"><b>Product Code: <?php echo $row['id']; ?> <br/>
        PKR <?php echo $row['price']; ?> <br/>
        Brand: <?php echo $row['brand_name']; ?> <br/>
        Gender: <?php echo $row['gender_name']; ?><br/> 
        Category: <?php echo $row['category_name']; ?><br/>
        Size: <?php echo $row['size_name']; ?> <br/>
        Material: <?php echo $row['material_name']; ?> <br/>
        Description: <?php echo $row['dress_description']; ?></font></b> </p>  
      <button style="margin-left: 380px; margin-top: 20px; width: 135px;" class="button button4 add-to-cart"><i class="fa fa-shopping-cart"></i>Add to Cart</button>
  </div>
  <div class="mpopup-foot">
  <!-- <p>created by CodexWorld</p> -->
  </div>
</div>
<?php }?>

Similar Question

Quick Links

Can an html element have multiple ids?

Go through it. And, if any problem comes, feel free to ask.

Have you copied the entire code. Because, It's correct code. @ShoaibSharoon — Nana Partykar, Aug 16 '17 at 15:17
@ShoaibSharoon: Don't call me Sir. I'm like all others. Your pop up not opening? Correct? Have you checked in console, what error coming there? — Nana Partykar, Aug 17 '17 at 07:31
ok yes popup not opening with this code but generating no error — Shoaib Sharoon, Aug 17 '17 at 07:50
actually with my code row['id'] is not updating it remains same. how i can update id for every button? — Shoaib Sharoon, Aug 17 '17 at 07:51
There is no code given by for updating. It's a different question. And, let me check why pop up not opening. @ShoaibSharoon — Nana Partykar, Aug 17 '17 at 07:54
Copy 3rd Point and paste it in your code and check @ShoaibSharoon. And, do some debug from your side too. It's not easy to assume what problem you are facing. — Nana Partykar, Aug 17 '17 at 08:02
@ShoaibSharoon: If so, Please mark this answer as correct answer. As, it will help other user too. — Nana Partykar, Aug 17 '17 at 08:09
how i can mark this anwser correct? please guide me i am new to stack overflow — Shoaib Sharoon, Aug 17 '17 at 08:11
Please go through [How does accepting an answer work?](https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) and mark all your 8 question's answer if they meet your requirements @ShoaibSharoon — Nana Partykar, Aug 17 '17 at 08:13
brother i am facing problem in this code that when first time i open modal it works fine ut when i click on 2nd item it opens first previous modal open for like 1 second and then it opens the 2nd modal and same case with third item modal and all items button. @Nana Partykar — Shoaib Sharoon, Aug 21 '17 at 07:53

modal popup keep populating only first item data on all item buttons

1 Answers1

Linked