将 $_POST 或 $_GET 与 Modal 一起使用，根据 ID 刷新

Question

这是生成从数据库调用的 6 个对象数组的 html（这工作正常），并将它们打印到引导行。

<div class="row products">
            <?php while($product = mysqli_fetch_assoc($featured)) : ?>

            <div class="col-md-2 col-sm-6">
                <div class="product">
                    <div class="image">
                        <a href="#"><img src=" <?= "images/wheels/wheelphotos/". $product["bigpic"]; ?>" alt= "<?= $product["manufacturer"]; ?>" class="img-responsive"></a>
                        <div class="quick-view-button"><button type="button" onclick="quickModal(<?= $product["recid"]; ?>)" class="btn btn-default btn-sm">Quick view</button></div>
                    </div>
                    <div class="text">
                        <h3> <a href="detail.html"><?= $product["manufacturer"]; ?></a></h3>
                        <p class="price">$<?= $product["rrp"]; ?></p>
                    </div>
                </div>
            </div>

            <?php endwhile; ?>

这里是生成模态的Jquery

<script>
        function quickModal(recid) {
            alert(recid)// checked it was receiving ID

            // setting an id object as recid from db
            var data = {"id" : recid};
            jQuery.ajax({
                url : '/MagV4(Final)/includes/quickModal.php',
                method : "post",
                data : data,
                success: function(data){
                    jQuery('body').append(data);
                    jQuery('#product-quick-view-modal').modal('toggle');
                },
                error: function(){
                    alert("something wrong");
                }
            });
        }
    </script>

这是模态代码，现在我知道正在传递 ID（来自模态的警报），但在加载第一个模态后，模态不会生成新内容（有 6 个不同的磁轮），例如我为第一个 mag 加载 id 1 的模态，第二个 mag 是 id 7 也为 id 1 创建一个模态。 由于某种原因，使用 $_POST['id'] 在模态中不起作用。

 <?php
    require_once '../core/dbcon.php';
    if(isset($_GET['id'])) {
        $id = $_GET['id'];
        $id = (int)$id;
    }
    echo $id;

$sql = "SELECT * FROM wheels WHERE recid = '$id'";
$result = $db->query($sql);
$product = mysqli_fetch_assoc($result);

$sql = ""

?>

<?php ob_start(); ?>
<!-- quick view modal box-->
<div id="product-quick-view-modal" tabindex="-1" role="dialog" aria-hidden="false" class="modal fade">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" data-dismiss="modal" aria-hidden="true" class="close">×</button>
                <div class="row quick-view product-main">
                    <div class="col-sm-6">
                        <div class="quick-view-main-image"><img src=" <?= "images/wheels/wheelphotos/". $product["bigpic"]; ?>" alt= "<?= $product["manufacturer"]; ?>" class="img-responsive"></div>

                        <!-- Ribbons
                        <div class="ribbon ribbon-quick-view sale">
                            <div class="theribbon">SALE</div>
                            <div class="ribbon-background"></div>
                        </div>
                        <!-- /.ribbon
                        <div class="ribbon ribbon-quick-view new">
                            <div class="theribbon">NEW</div>
                            <div class="ribbon-background"></div>
                        </div>
                        <!-- /.ribbon-->
                        <div class="row thumbs">
                            <div class="col-xs-4"><img src=" <?= "images/wheels/wheelphotos/". $product["bigpic"]; ?>" alt= "<?= $product["manufacturer"]; ?>" class="img-responsive"></a></div>
                            <div class="col-xs-4"><img src=" <?= "images/wheels/wheelphotos/". $product["bigpic"]; ?>" alt= "<?= $product["manufacturer"]; ?>" class="img-responsive"></a></div>
                            <div class="col-xs-4"><img src=" <?= "images/wheels/wheelphotos/". $product["bigpic"]; ?>" alt= "<?= $product["manufacturer"]; ?>" class="img-responsive"></a></div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <h2 class="product__heading"><?= $product['manufacturer']; ?></h2>
                        <p class="text-muted text-small text-center">Great Tyre for all vehicle types</p>
                        <div class="box">
                            <form action="add_cart.php" method="post">
                                <p class="price"><?= $product['rrp']; ?></p>
                                <div class="row">
                                    <div class="col-md-6 col-md-offset-3">
                                        <div class="form-group">
                                            <label for="modal_size">Choose your size</label>
                                            <select id="modal_size" class="form-control">
                                                <option value=""></option>
                                                <option value=""></option>
                                            </select>
                                        </div>
                                        <p>Current Stock: 3</p>
                                        <div class="form-group">
                                            <label for="modal_quantity">Quantity</label>
                                            <input type="number" value="1" id="modal_quantity" class="form-control">
                                        </div>
                                    </div>
                                </div>
                                <p class="text-center">
                                    <button type="submit" class="btn btn-primary"><i class="fa fa-shopping-cart"></i>&nbsp;Add to cart</button>
                                    <button type="submit" data-toggle="tooltip" data-placement="top" title="Add to wishlist" class="btn btn-default"><i class="fa fa-heart-o"></i></button>
                                </p>
                            </form>
                        </div>
                        <!-- /.box-->
                        <div class="quick-view-social">
                            <h4>Show it to your friends</h4>
                            <p><a href="#" data-animate-hover="pulse" class="external facebook"><i class="fa fa-facebook"></i></a><a href="#" data-animate-hover="pulse" class="external gplus"><i class="fa fa-google-plus"></i></a><a href="#" data-animate-hover="pulse" class="external twitter"><i class="fa fa-twitter"></i></a><a href="#" data-animate-hover="pulse" class="email"><i class="fa fa-envelope"></i></a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /.modal-dialog-->
</div>
<!-- /.modal-->
<!-- /quick view modal box-->
<?php echo ob_get_clean(); ?>

在新脚本中添加，但现在第一次之后的模式只是闪烁然后消失并显示相同的信息。

 <script>
    $('a[data-toggle="modal"]').on('click', function(){
        // update modal header with contents of button that invoked the modal
        $('#quick-view-button').html( $(this).html() );
        //fixes a bootstrap bug that prevents a modal from being reused
        $('#product-quick-view-modal').load(
            $(this).attr('href'),
            function(response, status, xhr) {
                if (status === 'error') {
                    //console.log('got here');
                    $('#utility_body').html('<h2>Oh boy</h2><p>Sorry, but there was an error:' + xhr.status + ' ' + xhr.statusText+ '</p>');
                }
                return this;
            }
        );
    });​
</script>

Answer 1

经过进一步研究，我发现一些 Bootstrap 问题提到了这种行为 here 和 here。我已要求重新打开 issue 5514。

同时，这个 jQuery 将解决问题*：

$('a[data-toggle="modal"]').on('click', function(){
    // update modal header with contents of button that invoked the modal
    $('#myModalLabel').html( $(this).html() );
    //fixes a bootstrap bug that prevents a modal from being reused
    $('#utility_body').load(
        $(this).attr('href'),
        function(response, status, xhr) {
            if (status === 'error') {
                //console.log('got here');
                $('#utility_body').html('<h2>Oh boy</h2><p>Sorry, but there was an error:' + xhr.status + ' ' + xhr.statusText+ '</p>');
            }
            return this;
        }
    );
});​

有关工作示例，请参阅 http://jsfiddle.net/jhfrench/qv5u5/51/。*

因此，在您的情况下，您还需要将呼叫按钮从 <button type="button" onclick="quickModal(<?= $product["recid"]; ?>)" class="btn btn-default btn-sm">Quick view</button> 编辑为 <a href="/MagV4(Final)/includes/quickModal.php?recid=<?= $product["recid"]; ?>" data-toggle="modal" class="btn btn-default btn-sm">Quick view</a>。 FWIW，我赞成这种“链接调用模式”方法（与“按钮调用模式”相比），因为这也允许用户右键单击链接并在新的浏览器选项卡中打开模式的内容，如果他们这样选择的话。因此，请仔细考虑该 UX 的含义。

*-出于某种原因，有时当您单击小提琴中的按钮时，模式会显示为空白。这不是我正在使用的应用程序的问题，所以我怀疑这是与此问题/答案无关的问题。