将 MySQL 中的数据显示为引导模式（无 ajax）

Question

在我的页面中，我有一个包含一些信息的商店列表。对于每个商店，我都有一个按钮，可以打开一个模式，我想在其中显示有关商店的所有信息。

我将我的模态放在生成列表的 while 中，第一个结果正确显示在模态中，但是如果我单击列表中的第二个、第三个等...商店，我会看到有关第一个商店的信息（现在我只尝试了商店的名称）。我不明白为什么。

每个商店都可以显示其信息吗？ ajax是必须的吗？

我检查了这个问题How can i show data into bootstrap panel dynamically by javascript?，但它没有帮助我。

这是生成我的列表的 php 代码、打开模式的按钮和模式：

<?php
    echo'<section class="col-xs-12 col-sm-6 col-md-12">';
    $sql = "SELECT nome_L, tipocucina_TC, wifi_L, tipolocale_TL, descrizione_L, indirizzo_L, fasciaprezzo_L, convenzione_L, image_thumb_L  FROM locale l 
            JOIN tipocucina c On l.TipoCucina_L = c.IDtipocucina_TC
            JOIN tipolocale t On l.TipoLocale_L = t.IDTipolocale_TL
            WHERE TRUE";

    $result = mysqli_query($conn,$sql) or die(mysqli_error($conn));

    while($row = mysqli_fetch_array($result)) 
    {
        $nome_Local = $row['nome_L'];
        $descrizione_Local = $row['descrizione_L'];
        $indirizzo_Local = $row['indirizzo_L'];
        $tipocucina_Local = $row['tipocucina_TC'];
        $tipolocale_Local = $row['tipolocale_TL'];
        $immagine_Local = $row['image_thumb_L'];

        //START MODAL
        echo'
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="myModalLabel">'.$nome_Local.'</h4>
                        </div>
                        <div class="modal-body">
                        ...
                        </div>
                        <div class="modal-footer">

                        </div>
                    </div>
                </div>
            </div>
        ';
        //END MODAL

        echo'<article class="search-result row">
                <div class="col-xs-12 col-sm-12 col-md-3">
                    <a href="#" title="Lorem ipsum" class="thumbnail"><img src="images/locals/'.$immagine_Local.'"/></a>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-2" style="width: 18%;">
                    <ul class="meta-search">
                        <li><i class="fa fa-cutlery fa-lg"></i> <span>'.$tipocucina_Local.'</span></li>
                        <li><i class="fa fa-coffee fa-lg"></i> <span>'.$tipolocale_Local.'</span></li>
                    </ul>
                </div>

                <div class="col-xs-12 col-sm-12 col-md-7 excerpet" style="width: 55%;">';
                    echo"<h3><a>".$nome_Local."</a></h3>";
                    echo'<i class="fa fa-compass"> </i>'.$indirizzo_Local.'</i>';
                    echo"<br>";
                    echo'<p class="local-description">'.$descrizione_Local.'</p>';   

                    //BUTTON THAT OPEN MY MODAL
                    echo'<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Show more </button>'; 
                    echo'
                </div>
                <span class="clearfix borda"></span>
            </article>'; 
    }              
    $conn->close(); 
?>

希望我已经正确描述了问题。

Answer 1

正如有人评论的那样，您为每个模态框提供了相同的 ID，并为每个按钮提供了相同的目标。你需要给他们独特的。在你的while循环之前声明一个计数器，比如$i = 0;

$i = 0;
while ( ... 

变化：

 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

到：

 <div class="modal fade" id="myModal_<? echo $i; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

并更改按钮，来自：

echo'<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Show more </button>'; 

到：

echo'<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal_' .$i .'"> Show more </button>'; 

并在您的 while 循环关闭之前增加 $i，使用 $i++:

    ...
    $i++;
}