如何从模式中从数据库中获取数据以显示特定点击的详细信息

时间:2018-06-22 06:18:42

标签: php mysqli bootstrap-modal

我创建了产品展示页面。每行显示4个产品。我有7个产品上传到数据库中。因此,如果我单击特定产品,请打开模式并显示我单击的产品的详细信息。我不明白如何获取特定产品的模态数据。这是我的下面的代码。请帮助我。

我在这里将数据提取到产品展示中。

double total = 0.0;
//do something for total, anyway
return total < 10E-6 ? 0 : (1.0 / total);

这是我显示产品详细信息的模式。

<div class="row">
        <div class="position-relative">
            <?php
                $sql = "SELECT * FROM wm_products";
                $result = $conn->query($sql);
                if($result->num_rows > 0){
                    while($row = $result->fetch_assoc()){
                        ?>
                            <!-- start team item -->
                            <div class="col-md-3 padding-15px-lr team-block text-left team-style-1 md-margin-40px-bottom wow fadeInUp">
                                <div class="agileinfo_new_products_grid">
                                    <div class="agile_ecommerce_tab_left agileinfo_new_products_grid1">
                                        <div class="hs-wrapper hs-wrapper1">
                                            <img src="products_images/<?php echo $row['pro_img']; ?>" alt=" " class="img-responsive" />
                                        </div>
                                        <p style="height:40px;"><a href="single.html"><?php echo $row['pro_name']; ?></a></p>
                                        <div class="simpleCart_shelfItem">
                                            <p><i class="item_price"><?php echo $row['pro_price'];?></i></p>
                                            <p><a href="" class="item_add prod_detail" data-toggle="modal" data-target="#PRODUCT_DETAILS" dataid="<?php echo $row['pro_id']; ?>">View</a></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- end team item -->  
                        <?php
                    }
                }
            ?>
        </div>
    </div> 

2 个答案:

答案 0 :(得分:0)

在产品展示中,尝试在下面的行中将data-id更改为href

<p><a href="" class="item_add prod_detail" data-toggle="modal" data-target="#PRODUCT_DETAILS" dataid="<?php echo $row['pro_id']; ?>">Add to cart</a></p>

拥有

<p><a href="" class="item_add prod_detail" data-toggle="modal" data-target="#PRODUCT_DETAILS" href="#modal<?php echo $row['pro_id']; ?>">Add to cart</a></p>

然后将您的模式更新ID属性设置为

<div id="#modal<?php echo $row['pro_id']; ?>" class="modal fade"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

我还假设您的模式显示数据也位于while语句内,或者您已经为其创建了while语句。

所以最后您应该拥有:

<div class="row">
        <div class="position-relative">
            <?php
                $sql = "SELECT * FROM wm_products";
                $result = $conn->query($sql);
                if($result->num_rows > 0){
                    while($row = $result->fetch_assoc()){
                        ?>
                            <!-- start team item -->
                            <div class="col-md-3 padding-15px-lr team-block text-left team-style-1 md-margin-40px-bottom wow fadeInUp">
                                <div class="agileinfo_new_products_grid">
                                    <div class="agile_ecommerce_tab_left agileinfo_new_products_grid1">
                                        <div class="hs-wrapper hs-wrapper1">
                                            <img src="products_images/<?php echo $row['pro_img']; ?>" alt=" " class="img-responsive" />
                                        </div>
                                        <p style="height:40px;"><a href="single.html"><?php echo $row['pro_name']; ?></a></p>
                                        <div class="simpleCart_shelfItem">
                                            <p><i class="item_price"><?php echo $row['pro_price'];?></i></p>
                                            <p><a href="" class="item_add prod_detail" data-toggle="modal" data-target="#PRODUCT_DETAILS" href="#modal<?php echo $row['pro_id']; ?>">Add to cart</a></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- end team item -->  

                            <!-- corresponding modal  -->
                            <div id="#modal<?php echo $row['pro_id']; ?>" class="modal fade"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                                <div class="modal-dialog" role="document">                   
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title" id="myModalLabel"><?php echo $row['pro_name'];?></h4>
                                        </div>
                                        <div class="modal-body product_detail">
                                            <div class="col-md-5 modal_body_left">
                                                <img src="../products_images/<?php echo $row['pro_img']; ?>" alt=" " class="width-azset img-responsive">
                                            </div>
                                            <div class="col-md-7 modal_body_right">
                                                <h4><?php echo $row['pro_name'];?></h4>
                                                <p><?php echo $row['pro_dis'];?></p>

                                                <div class="modal_body_right_cart simpleCart_shelfItem">
                                                    <p><i class="item_price"><?php echo $row['pro_price'];?></i></p>                            
                                                </div>                  
                                            </div>                  
                                            <div class="clearfix"> </div>                   
                                        </div>
                                        <div class="modal-footer">
                                            <button type="submit" name="Add_Cart" class="btn btn-success">Add to Cart</button>
                                            <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                                        </div>
                                    </div>
                                </div>
                        </div>
                            <!-- corresponding modal end  -->
                        <?php
                    }
                }
            ?>
        </div>
    </div> 
</div>

答案 1 :(得分:0)

您可以使用php jQuery / ajax和JavaScript来做到这一点:

因此,如果您将锚标签更改为以下内容:

<p><a href="#PRODUCT_DETAILS" class="item_add prod_detail" data-toggle="modal" data-target="#PRODUCT_DETAILS" data-id="<?php echo $row['pro_id']; ?>">Add to cart</a></p>

然后从有问题的锚标记中获取数据ID,并使用jquery ajax php执行以下操作,获取该产品的相关详细信息:

  $('#PRODUCT_DETAILS').on('show.bs.modal', function (e) {
        var productID= $(e.relatedTarget).data('id');
        $.ajax({
            url:"fetchProductDetails.php",
            method: "POST",
            data:{productID:productID},
            dataType:"JSON",
            success:function(data)
            {   
                $('#proPrice').text(data.price);
                $('#proName').text(data.name);
                $('#proNameTitle').text(data.name);
                $('#proDesc').text(data.description);
                $('#proImage').html(data.img); 
            }
        })
     });

创建一个php文件,该文件将获取所有产品详细信息,如下所示:

require 'database.php';

if (isset($_POST['productID'])) {

$productID = $_POST['productID'];

$query = $conn->prepare('SELECT * FROM products WHERE id=:productID');
$query->execute(array(':productID' => $productID));

if ($query->rowCount() > 0) {

while ($row = $query->fetch(PDO::FETCH_ASSOC)) {

        $data['description'] = $row['pro_dis'];
        $data['name'] = $row['pro_name'];
        $data['price'] = $row['pro_price'];

        $img = $row['pro_img'];

        $data['img'] = "<img src='../products_images/".$img."' alt='' class='width-azset img-responsive'>";

}
    echo json_encode($data);

}else{
    echo "<h1>" . "Error 404 Page" . "</h1>";
}
}

然后在模态中,您可以通过执行以下操作来显示此信息:

<div id="PRODUCT_DETAILS" class="modal fade"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">                   
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 id="proNameTitle"></h4>
                </div>
                <div class="modal-body product_detail">
                    <div class="col-md-5 modal_body_left">
                        <span id="proImage"></span>
                    </div>
                    <div class="col-md-7 modal_body_right">
                        <h4 id="proName"></h4>
                        <p id="proDesc"></p>

                        <div class="modal_body_right_cart simpleCart_shelfItem">
                            <p id="proPrice"></i></p>                            
                        </div>                  
                    </div>                  
                    <div class="clearfix"> </div>                   
                </div>
                <div class="modal-footer">
                    <button type="submit" name="Add_Cart" class="btn btn-success">Add to Cart</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
</div>

稍作修改以符合您的要求。