模态弹出窗口仅在所有项目按钮上仅填充第一项数据 [英] modal popup keep populating only first item data on all item buttons
问题描述
我正在实施服装购物网站，在该网站中，我从管理面板上载具有其图像和描述的服装项目.在主页上，我正在检索所有库存的布料，并使用while循环显示.为了查看详细信息，我放置了查看按钮"，单击该按钮会打开模式弹出窗口并显示该项目的完整描述.但是我面临的问题是，单击项目的每个按钮仅在所有项目按钮的模式弹出窗口中显示第一项目描述.我希望每个项目按钮都应显示项目拥有的描述.但它会不断填充每个按钮上的第一项数据.
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.
代码:
<?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>
推荐答案
1) The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead. Stop using mysql functions.
2)为什么要在每个文件上连接数据库连接.创建一个公共数据库文件，在其中写入数据库连接代码，并将其包含在每个文件中.否则，当数据库或用户名或密码更改时，则必须在每个文件中都进行更改.因此，为避免这种情况，请创建一个常见的db文件.
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)整个页面中的ID不能相同.因此，请相应地进行更改.
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)在同一目录中创建一个常见的Ajax弹出文件，其中将显示弹出内容.
4) Create one common ajax pop up file in same directory, where pop up content will appear.
ajax_pop_up.php
(如果您打算在此处更改文件名，请在 YourPage.php 页的data-url中进行更改，两者都相互关联)
(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
- GET PHP variable value from HTML data-id
- Passing data via Modal Bootstrap and getting php variable?
快速链接
Quick Links
通过它.而且，如果有任何问题，请随时提出.
Go through it. And, if any problem comes, feel free to ask.
这篇关于模态弹出窗口仅在所有项目按钮上仅填充第一项数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
