модальное всплывающее окно заполняет только данные первого элемента на всех элементах элементов

Я реализую веб-сайт по торговле тканью, в котором я загружаю элементы одежды с их изображениями и описанием с панели администратора. на домашней странице я извлекаю все предметы ткани, которые находятся в запасе и отображаются с использованием цикла while. чтобы просмотреть подробности, я поставил кнопку «Просмотр», которая при нажатии открывает модальное всплывающее окно и отображает полное описание элемента. Но я столкнулся с проблемой, что каждая кнопка элемента на клике отображает только первое описание элемента в модальном всплывающем окне на все кнопки элемента. Я хочу, чтобы каждая кнопка элемента отображала описание элемента. но он сохраняет заселение данных первого элемента на каждой кнопке.

Код:

<?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) Расширение mysql устарело и будет удалено в будущем: вместо этого используйте mysqli или PDO . Прекратите использование функций mysql.

2) Зачем подключаться к базе данных по каждому файлу. Создайте один общий файл db, где код подключения к базе данных написан и включен в каждый файл. В противном случае, когда база данных или имя пользователя или пароль будут изменены, вы должны изменить их в каждом файле. Таким образом, чтобы избежать этого, создайте один общий файл db.

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) Идентификаторы не могут быть одинаковыми на странице. Итак, измените его соответствующим образом.

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> в <?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> - <?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 в том же каталоге, где появится всплывающее содержимое.

ajax_pop_up.php

(если вы планируете изменить имя файла здесь, измените data-url страницы YourPage.php , оба связаны друг с другом)

 <?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 }?> в <?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 }?>

Похожие вопросы

Значение переменной GET PHP из идентификатора данных HTML
Передача данных через Modal Bootstrap и получение переменной php?

Быстрые ссылки

Может ли элемент html иметь несколько идентификаторов?

Пройти через это. И, если возникнет какая-либо проблема, не стесняйтесь спрашивать.