php - 使用php将数据从mysql传递到modal

Question

如何使用 php.ini 从数据库传递数据？我正在使用谷歌标记来显示我的模态，我使用“addListener('click', function(event)”来显示标记。我的问题是将数据从我的 mysql 数据库传递到我的模态中。例如，我想显示数据库中的所有数据。我想显示 ID 列 ($row['id'])。

模态代码:

<div class='modal'>
            <div class='modal-dialog'>
                <div class='modal-content'>
                    <div class='modal-header'>
                        <h3 class='modal-title'>Branch Details</h3>
                        <span class='modal-close'>
                            <i class='fa fa-close'></i>
                        </span>
                    </div>
                    <div class='modal-subheader'>
                        <a class='modal-subheader-tab subheader-active'>Summary Details</a>
                        <a class='modal-subheader-tab'>Sales Report</a>
                        <a class='modal-subheader-tab'>Detailed Sales Report</a>
                        <a class='modal-subheader-tab'>Gallery</a>
                    </div>
                    <div id='details' class='tab-content'>
                        <div class='details-row'>
                            <p class='left-details'>Branch ID:</p>
                            <span> <?php echo $row['id'];?></span>
                        </div>
                     </div>
                 </div>

标记代码:

<?php
    require "connect.php";

    $sql = "SELECT * FROM tblLocation";
    $result = mysqli_query($conn,$sql);
    $count = mysqli_num_rows($result);

    echo "<script>
            function initMap() {
                var infowindow = new google.maps.InfoWindow({});
                var uluru = {lat: 13, lng: 122};
                var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 5.2,
                    center: uluru
                });";

                if ($count > 0){
                    while ($row = mysqli_fetch_array($result)) {
                    echo "
                        var content = '';
                        var marker = new google.maps.Marker({
                        content:content,
                        position:{lat:{$row['latitude']}, lng:{$row['longitude']}},
                        map: map
                });

                marker.addListener('click', function(event) {
                    $('.modal').addClass('show');
                }.bind(marker));";
            }
        }     
echo "}


</script>"
?>

Answer 1

我修改了您的代码，请使用并让我知道输出

<?php
    require "connect.php";

    $sql = "SELECT * FROM tblLocation";
    $result = mysqli_query($conn,$sql);
    $count = mysqli_num_rows($result);
?>
<script>
    function initMap() {
        var infowindow = new google.maps.InfoWindow({});
        var uluru = {lat: 13, lng: 122};
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 5.2,
            center: uluru
        });

<?php if ($count > 0){ ?>
     var marker, i;
     <?php
        while ($row = mysqli_fetch_array($result)) {
     ?>
        var content = '';
        marker = new google.maps.Marker({
            content:content,
            position: new google.maps.LatLng(<?php echo $row['latitude']?>, <?php echo $row['longitude'] ?>),
            map: map
        });
        marker.addListener('click', function(event) {
                    $('.modal').addClass('show');
        }.bind(marker));
    <?php }
    }
    ?>
</script>