javascript — получение PHP-переменных для начальной загрузки

Question

javascript — получение PHP-переменных для начальной загрузки

Итак, я занимаюсь разработкой классного проекта и создаю веб-сайт с базовыми функциями. Я новичок в php и javascript.

Так вот в чем проблема. Я создал базу данных в phpMyAdmin под названием «itemdb». Я могу добавить элементы к нему через HTML + PHP, а также удалить их. Теперь я хочу отредактировать данные в базе данных, и именно здесь я не могу найти решение для этого.

Это то, что моя идея.
1. нажимает на кнопку редактирования.
2. Открывает Bootstrap Modal.
3. Отображение информации об элементе.
4. Хиты сохранить изменения. База данных обновлена.

Моя проблема заключается в том, что если я установлю тип кнопки / ввода на «submit», окруженный тегом формы, модальный сбой.
Однако текущий код, приведенный ниже, не имеет тега формы, и кнопка устанавливается как тип «кнопка», и когда я нажимаю кнопку, она отображает информацию только об одном элементе, даже если я нажимаю другую кнопку (те же данные).

Вот мой код

для целей тестирования я создал таблицу с надписью «привет» в первом ряду и кнопкой во втором ряду, и когда я нажму на кнопку, она отобразит информацию в модальном режиме.

 <div class = "row col-xs-10 col-sm-10 col-md-10 col-lg-10 ">
<?php
include 'connectDB.php';
$query = "SELECT * FROM `itemdb`;";
$result = mysqli_query($dbconnect, $query);
if(mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_assoc($result))
{?>
<table>
<tr>
<td>Hellow</td>
<td>
<?php
echo "<button type=\"button\" class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\"#exampleModal\"data-whatever=\"editDB[" .  $row['itemID'] . "]\" onclick=\"window.Socation.href = 'adminItems3.php?value=" .  $row['itemID'] . "'\";>Edit</button>
";?>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="exampleModalLabel">New message</h4>
</div>
<div class="modal-body">
<?php
if(!empty($row['itemID'])){
$ID = $row['itemID'];
echo $ID;

$query1 = "SELECT * FROM `trademe`.`itemdb` WHERE `itemdb`.`itemID` = $ID;";
$result1 = mysqli_query($dbconnect, $query1);
if(mysqli_num_rows($result1) > 0){
$row1 = mysqli_fetch_assoc($result1);

echo "<table class=\"table-striped\">
<tr>
<td class = \"imgBoxCol\">
<img class=\"imgBox img-rounded imgBox\"src=\"" . $row1['img_path'] . "\"></img>
</td>
<td>
<p >Ad Title: <input name=\"editadTitle\" value=\"" . $row1['adTitle'] . "\"/></p>
<p>Item Name:<input name=\"edititemName\" value=\" " . $row1['itemName'] . "\"/> </p>
<p>Condition:<textarea name=\"editcond\" type=\"text\" >" . $row1['cond'] . "</textarea></p>
<p>Description:<textarea name=\"editdescription\"  type=\"text\" > " . $row1['description'] . " </textarea></p>
<p>Method:<input name=\"editmethod\" value=\"" . $row1['method'] . " \"/></p>
<p>Category:<input name=\"editcategory\" value=\"" . $row1['category'] . " \"/></p>
</td>
</tr>

</table>
";
}}?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
<?php//opening php// ending html code.
}
}
?>
</div>

скрипт

$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var Eid = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + Eid)
modal.find('.modal-body input').val(Eid)
// document.location="adminItems3.php?idSelected=" + Eid
})

Я пытался исправить это в течение нескольких дней. Если у вас, ребята, есть идеи как-нибудь передать хотя бы идентификатор предмета, чтобы мой модал смог его получить, то это было бы здорово!

Есть ли способ передать переменную, чтобы я мог получить ее через мой мод без сбоев?

[Изображение 3-й кнопки при нажатии] [2]

отображает информацию о первой кнопке
Еще раз спасибо !!

введите описание изображения здесь

1

bootstrap-modal bootstrapping html5 javascript php

Решение

Другие решения

Все ваши модалы имеют одинаковый идентификатор «exampleModal», поэтому при запуске модального режима отображается только первый.

Попробуй сделать ID как

$myModalID = "exemplaModal_".$row['ID'];

в обоих

data-target=\"#<?php echo $myModalID?>\"  //I forget to let the hastag here, my bad

А ТАКЖЕ

class="modal fade" id="<?php echo $myModalID?>".

PS: у тебя ошибка

onclick=\"window.Socation.href"

Это не Socation, но Местоположение

РЕДАКТИРОВАТЬ :

<div class = "row col-xs-10 col-sm-10 col-md-10 col-lg-10 ">
<?php
include 'connectDB.php';
$query = "SELECT * FROM `itemdb`;";
$result = mysqli_query($dbconnect, $query);

if(mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_assoc($result))
{
// HERE you declare your modal ID
$myModalID = "exemplaModal_".$row['ID'];
?>
<table>
<tr>
<td>Hellow</td>
<td>
<?php
///!\ HERE : Dont forget to let the hashtag in data-taget : data-target="# <---
echo "<button type=\"button\" class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\"#<?php echo $myModalID?>\"data-whatever=\"editDB[" .  $row['itemID'] . "]\" onclick=\"window.Socation.href = 'adminItems3.php?value=" .  $row['itemID'] . "'\";>Edit</button>
";
?>

<!-- And Here juste add the normal echo $myModalID -->
<div class="modal fade" id="<?php echo $myModalID?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="exampleModalLabel">New message</h4>
</div>
<div class="modal-body">
<?php
if(!empty($row['itemID'])){
$ID = $row['itemID'];
echo $ID;

$query1 = "SELECT * FROM `trademe`.`itemdb` WHERE `itemdb`.`itemID` = $ID;";
$result1 = mysqli_query($dbconnect, $query1);
if(mysqli_num_rows($result1) > 0){
$row1 = mysqli_fetch_assoc($result1);

echo "<table class=\"table-striped\">
<tr>
<td class = \"imgBoxCol\">
<img class=\"imgBox img-rounded imgBox\"src=\"" . $row1['img_path'] . "\"></img>
</td>
<td>
<p >Ad Title: <input name=\"editadTitle\" value=\"" . $row1['adTitle'] . "\"/></p>
<p>Item Name:<input name=\"edititemName\" value=\" " . $row1['itemName'] . "\"/> </p>
<p>Condition:<textarea name=\"editcond\" type=\"text\" >" . $row1['cond'] . "</textarea></p>
<p>Description:<textarea name=\"editdescription\"  type=\"text\" > " . $row1['description'] . " </textarea></p>
<p>Method:<input name=\"editmethod\" value=\"" . $row1['method'] . " \"/></p>
<p>Category:<input name=\"editcategory\" value=\"" . $row1['category'] . " \"/></p>
</td>
</tr>

</table>
";
}}?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
<?php//opening php// ending html code.
}
}

0

Источник

Accepted Answer

Я дал самый простой способ открыть модальный диалог начальной загрузки. Это поможет. Работайте согласно этому спокойно. Сохраняйте терпение. Следуйте коду как есть. Это поможет вам.

<div class = "row col-xs-10 col-sm-10 col-md-10 col-lg-10 ">
<?php
include 'connectDB.php';
$query = "SELECT * FROM `itemdb`;";
$result = mysqli_query($dbconnect, $query);
if(mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_assoc($result))
{?>
<table>
<tr>
<td>Hellow</td>
<td>
<a class="ItemID" href="#exampleModal" data-toggle="modal" data-whatever="<?echo $row['itemID'];?>">
<input type='button' class='btn btn-primary' value="Edit">
</a>
</td>
</tr>
</table>
<?php//opening php// ending html code.
}
}
?>
</div>

В вашем нижний колонтитул, Поместите этот код

<div id="exampleModal" class="modal fade" aria-hidden="true" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog">
<div class="modal-content">

</div>
</div>
</div>

В сценарии

<script>
$('.ItemID').click(function(){
var ItemID=$(this).attr('data-whatever');
$.ajax({url:"NewPage.php?ItemID="+ItemID,cache:false,success:function(result){
$(".modal-content").html(result);
}});
});
</script>

NewPage.php
([ПРИМЕЧАНИЕ: Помните, это имя страницы также используется в теге скрипта. Поэтому, если вы измените это имя страницы. Вы должны изменить то же имя страницы в теге скрипта, которое я дал])

<?
include 'connectDB.php';
?>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="exampleModalLabel">New message</h4>
</div>
<div class="modal-body">
<?php
if(!empty($_GET['ItemID']))
{
$ID = $_GET['ItemID'];
echo $ID;

$query1 = "SELECT * FROM `trademe`.`itemdb` WHERE `itemdb`.`itemID` = $ID;";
$result1 = mysqli_query($dbconnect, $query1);
if(mysqli_num_rows($result1) > 0)
{
$row1 = mysqli_fetch_assoc($result1);
echo "<table class=\"table-striped\">
<tr>
<td class = \"imgBoxCol\">
<img class=\"imgBox img-rounded imgBox\"src=\"" . $row1['img_path'] . "\"></img>
</td>
<td>
<p >Ad Title: <input name=\"editadTitle\" value=\"" . $row1['adTitle'] . "\"/></p>
<p>Item Name:<input name=\"edititemName\" value=\" " . $row1['itemName'] . "\"/> </p>
<p>Condition:<textarea name=\"editcond\" type=\"text\" >" . $row1['cond'] . "</textarea></p>
<p>Description:<textarea name=\"editdescription\"  type=\"text\" > " . $row1['description'] . " </textarea></p>
<p>Method:<input name=\"editmethod\" value=\"" . $row1['method'] . " \"/></p>
<p>Category:<input name=\"editcategory\" value=\"" . $row1['category'] . " \"/></p>
</td>
</tr>

</table>
";
}
}?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>

1