从modal获取data-id并使用它来获取db行

时间:2016-08-28 16:02:12

标签: javascript php html twitter-bootstrap

我有一个打开模态框的按钮。但是我将id值保存到data-id中的那个按钮,我想使用该值从DB生成模态框中的内容。

<?php while($car = mysqli_fetch_assoc($sqlquery)) : ?>
    <div class="col-md-4 text-center">
        <h4><?=$car['model'];?></h4>
        <img src=<?php echo $car['image'] ?>/>
        <br/>
        <a id="firstButton"  type="button" class="show-modal btn btn-default"  data-id="<?=$car['id']?>">DETAILS</a>
    </div>
<?php endwhile ?>

这就是我生成按钮的方式......我需要将data-id值稍微提供给模态框。

$(document).ready(function(){
// Otevre modal
$('.show-modal').click(function(){
    var productID = $(this).attr('data-id');
    //$.post('detailbox.php', {data: productID}, function(data){
           // console.log(data);});
    $("#itemBox").modal('show');
    // kod co otevre modal, mkrni na bootstrap manual jak je otevira nebo si otevreni nadefinuj sa
    $('.product_id').val(productID);
});
// Pridani do kosiku v modalu
$('.add-to-basket').click(function(){
    var productID = $('.product_id').val();;
    // skryty input do ktere si zapsal ID produktu po otevreni modalu
    document.cookie= 'data='+productID;
    $.ajax({
        type: 'POST',
        cache: false,
        data: {id : productID},
        url: 'cart/cartid.php', // tomuto souboru predas idecko produktu, zapises do kosiku atd.
        success: function(data) {
            window.location.replace("/shop/cart/cart.php")
            alert("Product was added to basket");
            // treba nejaka hlaska, ze byl pridan do kosiku
        }
    });
});
});

这个JS获取数据id并且我可以在输入框中获取它,我试图将while循环向下移动所以它不会循环整个模态,只有我需要生成的东西,但我无法从中获取数据我需要的输入框。

?php while($details = mysqli_fetch_assoc($sqlquery)) : ?>   
<div class="container">

  <!-- Modal -->
  <div class="modal fade" id="itemBox" role="dialog">
    <div class="modal-dialog modal-lg">


      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body display-content">
            <div class="container-fluid">

                <div class="col-md-4"><img src=<?php echo $details['image'];?> class="image-responsive">

                <div class="col-sm-6">
                    <form action="add_cart.php" method="post">
                    <div class="form-group">
                        <label for="quantity">Quantity:</label>
                        <input type="text" class="form-control" id="quantity" name="quantity">
                    </div>
                    </form>
                </div>
                <div class="col-sm-6">
                    <br/>
                    <!-- Getting product ID from JS, -->
                    <div class="product_id">
                        <input class="product_id" type="text" id="input_product_id" name="input_product_id" value=""/>
                    </div>

                    <button type="button" class="add-to-basket btn btn-success" >ADD TO CART</button>


                </div>
                </div>
                <div class="col-md-1"></div>
                <div class="col-md-7" id="desc">
                    <p><b>Model:</b> <?php echo $details['model'];?></p>
                    <p><b>Engine:</b>  <?php echo $details['engine'];?></p>
                    <h4>Description</h4>
                    <p><?php echo $details['description'];?></p>
                    <hr>
                    <hr>
                </div>

            </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
        </div>
    </div>
  </div>
 </div>
 <?php endwhile; ?>

0 个答案:

没有答案