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 tha

Answer 1

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

1. GET PHP variable value from HTML data-id
2. Passing data via Modal Bootstrap and getting php variable?

Quick Links

3. Can an html element have multiple ids?

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