modal popup keep populating only first item data on all item buttons
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>
Answers:
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
Go through it. And, if any problem comes, feel free to ask.