Question

有一些我试图进入某些模态的数据库信息。

问题似乎是模态只能从最后一个while循环中获取变量。页面上的所有php都是先运行吗？即使它没有被称为？

所以我知道使用get_results（）和fetch_array以及fetch_row可能有更简单的方法来做到这一点，但那些似乎不适合我在php 5.5中使用。

另外，我读到了某个地方使用AJAX。好吧，因为我之前从未使用过ajax，这是我应该研究的内容吗？

<div class="col-md-4">
    <?php
    error_reporting(E_ALL);
    ini_set('display_errors', 1);

    require ($_SERVER['DOCUMENT_ROOT'].'/db-connect.php');
    $conn = new mysqli($servername, $username, $password, $dbname);

    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }
    //echo $conn->host_info . "\n";

    if ($stmt = $conn->prepare("SELECT time, title, tool, descript, thumbpath, smallpath, mediumpath, largepath FROM websites ORDER BY id DESC LIMIT 1")){

        //$stmt->bind_param('s',$id);
        $stmt->execute();
        $stmt->store_result();
        $stmt->bind_result($time, $title, $tool, $descript, $thumbpath, $smallpath, $mediumpath, $largepath);

        while ($stmt->fetch()) {


        }

        $stmt->free_result();
        $stmt->close();
    }

    $conn->close();
    ?>

    <img class="img-responsive" title="<?php echo $tool; ?>" data-toggle="modal" data-target="#modalPort" sizes="100vw" src="<?php echo $thumbpath; ?>" srcset="<?php echo $smallpath; ?> 500w, <?php echo $mediumpath; ?> 1000w, <?php echo $largepath; ?> 1500w" alt="Portfolio Site">
    <span class="time line-height-small"><?php echo $time; ?></span>
</div>

这里的变量很好用。问题是我使用相同的bind_result变量运行相同的php脚本几次。我真的不想为每个模态更改变量。

模态：

<!-- Website Modals-->
<div class="modal fade" id="modalPort" tabindex="-1" role="dialog" aria-labelledby="portfolioModallabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title" id="portfolioModallabel"><?php echo $title; ?></h4>
        </div>
        <div class="modal-body text-center">
            <img class="img-responsive center-block" src="<?php echo $thumbpath; ?>" sizes="100vw" srcset="<?php echo $smallpath; ?> 500w, <?php echo $mediumpath; ?> 1000w, <?php echo $largepath; ?> 1500w" alt="Portfolio Site">
            <p class="line-height-small"><?php echo $descript; ?></p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

Answer 1

一种方法是将模态置于while ($stmt->fetch()) { }内，分配模态触发按钮和模态本身unique id

注意模态触发按钮中的data-target="#modalPort<?php echo $id;?>"和模态HTML中的id="modalPort<?php echo $id;?>"

<?php while ($stmt->fetch()) { ?>
    <button data-toggle="modal" data-target="#modalPort<?php echo $id;?>" class="btn btn-default">Modal</button>

    <div class="modal fade" id="modalPort<?php echo $id;?>" tabindex="-1" role="dialog" aria-labelledby="portfolioModallabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="portfolioModallabel"><?php echo $title; ?></h4>
            </div>
            <div class="modal-body text-center">
                <img class="img-responsive center-block" src="<?php echo $thumbpath; ?>" sizes="100vw" srcset="<?php echo $smallpath; ?> 500w, <?php echo $mediumpath; ?> 1000w, <?php echo $largepath; ?> 1500w" alt="Portfolio Site">
                <p class="line-height-small"><?php echo $descript; ?></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
  </div>
<?php } ?>

替代如果您想使用ajax，请将模态HTML放在while loop之外，将<?php echo $id;?>作为数据属性添加到模态触发按钮data-id="<?php echo $id;?>"

<?php while ($stmt->fetch()) { ?>
    <button data-toggle="modal" data-target="#modalPort" data-id="<?php echo $id;?>" class="btn btn-default">Modal</button>
<?php } ?>

模态event侦听器获取data attribute值，稍后在Ajax方法中使用以获取相应的行数据以模态显示

$(document).ready(function(){
    $('#modalPort').on('show.bs.modal', function (e) {
        var dataid = $(e.relatedTarget).data('id');
        var dataString = 'dataid=' + dataid;
        $.ajax({
            type: "POST",
            url: "get_data.php",
            data: dataString,
            cache: false,
            success: function(data){
                $("#content").html(data);
            }
        });
     });
});

get_data.php将是

<?php
    //Include database connection
    if($_POST['dataid']) {
    //run query against `dataid`
?>
    <div class="modal-header">
        <h4 class="modal-title" id="portfolioModallabel"><?php echo $title; ?></h4>
    </div>
    <div class="modal-body text-center">
        <img class="img-responsive center-block" src="<?php echo $thumbpath; ?>" sizes="100vw" srcset="<?php echo $smallpath; ?> 500w, <?php echo $mediumpath; ?> 1000w, <?php echo $largepath; ?> 1500w" alt="Portfolio Site">
        <p class="line-height-small"><?php echo $descript; ?></p>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
<?php } ?>

和模态HTML将（在循环之外）

<div class="modal fade" id="modalPort" tabindex="-1" role="dialog" aria-labelledby="portfolioModallabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
             <div id="content"></div> //display data output via ajax
        </div>
    </div>
</div>

php选择fetch while循环进入bootstrap模式

1 个答案: