检索PHP变量到Bootstrap Modal
Retrieving PHP variables to Bootstrap Modal
好的，所以我正在开发一个类项目，我正在建立一个具有基本功能的网站。我是php和javascript的新手。
问题就在这里。我在phpMyAdmin中创建了一个名为"itemdb"的数据库。我可以通过html+php添加项目，也可以删除它们。现在我要做的是编辑数据库中的数据，这就是我找不到修复它的地方。
这就是我的想法。1. 点击编辑按钮。2. 打开引导模式。3.显示项目信息。4. 点击保存更改。数据库更新。
我的问题是，如果我设置按钮/输入类型为"提交"与一个表单标签包围模态将崩溃。但是，下面的当前代码没有表单标记，按钮被设置为"button"类型，当我单击按钮时，即使我单击另一个按钮(相同的数据)，它也只显示一个项目的信息。
这是我的代码。为了测试，我创建了一个表格，在第一行显示"hello"，在第二行显示一个按钮，当我点击按钮时，它会在模态中显示信息。
<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">×</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
})
我已经试着解决这个问题好几天了。如果你们有更好的想法传递至少项目ID以某种方式，让我的模态将能够检索它，那么这将是非常伟大的!
是否有任何方法可以传递变量，以便我可以通过我的模态检索它而不崩溃?
[点击第三个按钮时的图像][2]
显示第一个按钮的信息再次感谢!!
输入图片描述
我已经给出了最简单的方法来打开一个模式对话框的引导。这会有帮助的。按照这个冷静地工作。保持耐心。按照代码执行。它会帮助你的。
<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">×</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>
所有的模态都有相同的ID "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而是Location
编辑:<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">×</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.
}
}
相关文章：
- 如何在Bootstrap Modal中为动态点击生成的变量设置jade属性
- Jquery and Bootstrap Modal
- 在Java中显示Bootstrap Modal
- 只有当有AJAX响应时，Bootstrap Modal才会出现
- 在Angular Bootstrap Modal和父控制器之间共享作用域
- Angular 1.5组件中的Angular Bootstrap Modal$uibModalInstance未知提供程
- 修正了在Bootstrap Modal中IE 10与Chrome和Firefox的不同位置
- Bootstrap Modal使背景变黑
- Angular Bootstrap$modal与活动背景元素
- 单击外部时，Twiiter Bootstrap Modal未关闭
- Bootstrap modal赢得't出现
- Jade:在Bootstrap Modal中获取变量
- 正在打开带有锚点标签的Bootstrap Modal
- 将函数绑定到Twitter Bootstrap Modal Ajax Complete
- 通过JavaScript调用Bootstrap modal
- 如何在angular 1.5中将angular component与ui.bootstrap.modal一起使用
- 如何在Bootstrap Modal上使用Vue.js渲染插件jQuery(作为工具提示和Switchery）
- 如何获得Twitter Bootstrap Modal'的invoker元素
- Bootstrap Modal仅显示一次
- Twitter Bootstrap Modal does not appear
