将数据从MySQL显示到引导模式(没有ajax)

Question

在我的页面中，我有一张商店清单，上面有一些信息。对于每一家商店，我有一个按钮，打开一个模式，在那里我想显示有关商店的所有信息。

我把我的模态放在产生列表的时间里，第一个结果正确地显示在模型中，但是如果我点击第二个，第三个等等.在列表中，我看到了关于第一家商店的信息(现在我只试着用商店的名字)。我不明白为什么。

每一家商店都有可能显示其信息吗？使用ajax是强制性的吗？

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

这是生成my list的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++;
}