检索 PHP 变量到 Bootstrap 模态

Question

好的，所以我正在开发一个 class 项目，我正在构建一个具有基本功能的网站。我是 php 和 javascript 的新手。

所以问题来了。我在 phpMyAdmin 中创建了一个名为 'itemdb' 的数据库。我可以通过 html+php 向其中添加项目，也可以删除它们。现在我想做的是编辑数据库中的数据，而这正是我找不到修复方法的地方。

这就是我的想法。 1. 点击编辑按钮。 2. 打开 Bootstrap 模式。 3.显示项目信息。 4.点击保存更改。数据库已更新。

我的问题是如果我将 button/input 类型设置为 "submit" 并用表单标记包围，模态框将会崩溃。但是，下面的当前代码没有表单标签，按钮设置为类型"button"，当我点击按钮时，即使我点击另一个按钮（相同数据），它也只显示一个项目的信息。

这是我的代码。

为了测试，我在第一行创建了一个table显示"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">&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
})

几天来我一直在努力解决这个问题。如果你们有更好的想法至少以某种方式传递项目 ID，以便我的模态能够检索它，那就太好了！

有什么方法可以传递变量，以便我可以通过我的模式检索它而不会崩溃？

[单击第 3 个按钮时的图像][2]

显示第一个按钮的信息 再次感谢！！

enter image description here

Answer 1

您所有的模态框都有相同的 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"

不是位置而是位置

编辑：

<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.  
}
}

Answer 2

我已经给出了打开bootstrap模态对话框的最简单方法。我会帮你的。冷静地按照这个去做。保持耐心。按原样遵循代码。它会帮助你。

<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>

检索 PHP 变量到 Bootstrap 模态

Retrieving PHP variables to Bootstrap Modal

html

javascript

php

bootstrapping

bootstrap-modal