2016-08-30 33 views
1

このHTMLブロックをajaxスクリプトにレスポンス(またはリクエスト?)として送る必要があります。おそらく私はこのPHPパートも必要です...基本的に私は変数から生成されたデータを持つモーダルボックスを開きたい私はJSから取得しています.Ajaxの外で自分のモーダルを生成しようとすると、うまく更新できませんでした。ここで ajaxにHTMLコードを送信する

if(!empty($_SESSION['modalBoxID'])){ 
    $sql = "SELECT * FROM vehicle WHERE vehicle.id='{$_SESSION['modalBoxID']}'"; 
    $sqlquery = $db->query($sql); 
    $_SESSION['modalBoxID'] = NULL; 
} 
?> 


<div class="modal-body display-content"> 
      <div class="container-fluid"> 
      <?php while($details = mysqli_fetch_assoc($sqlquery)) : ?> 


       <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/> 
        <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> 
    <?php endwhile; ?> 
</div>  

は...

私はあなたがPHPのカップルの引用符が欠落している

$(document).ready(function(){ 
// Otevre modal 
$('.show-modal').click(function(){ 
    var product_id = $(this).attr('data-id'); 
     $.ajax({ 
     type: 'POST', 
     cache: false, 
     data: {modalID : product_id}, 
     url: 'includes/getID.php', // tomuto souboru predas idecko produktu, zapises do kosiku atd. 
     success: function(data) { 
      $('.modal-body').html(data) 
      $("#itemBox").modal('show'); 
      // treba nejaka hlaska, ze byl pridan do kosiku 
     } 
    }); 


    // kod co otevre modal, mkrni na bootstrap manual jak je otevira nebo si otevreni nadefinuj sa 
    //$('.product_id').val(productID); 
}); 
    $(document.body).on('hidden.bs.modal', function() { 
      $("#itemBox").removeData('bs.modal'); 
     }); 

答えて

1

にそれを送信する必要がJSスクリプトです....そして、あなたはよajax呼び出しにdataType: 'html'を使用します。

$('.show-modal').click(function(){ 
    var product_id = $(this).attr('data-id'); 
     $.ajax({ 
     type: 'POST', 
     cache: false, 
     data: ({modalID : product_id}), 
     dataType: 'html', 
     url: 'includes/getID.php', // tomuto souboru predas idecko produktu, zapises do kosiku atd. 
     success: function(data) { 
      $('.modal-body').html(data) 
      $("#itemBox").modal('show'); 
      // treba nejaka hlaska, ze byl pridan do kosiku 
     } 
    }); 
+0

に見えるように私のJSを・修正することで問題を解決私はクロムコンソールでそれをチェックし、私は(おそらく)ボックスのPHPのバージョンを見ることができるプレビューをクリック...それは私がdataType – rtom

0

私は「getID.php」(私のPHPファイル)が含ま呼び出してみましたが、それはモーダルで何も表示さdoesntのが、ときに、この

$(document).ready(function(){ 
// Otevre modal 
$('.show-modal').click(function(){ 
    var product_id = $(this).attr('data-id'); 
     $.ajax({ 
     type: 'POST', 
     cache: false, 
     data: {modalID : product_id}, 
     //datatype: 'html', 
     url: 'includes/getID.php', // tomuto souboru predas idecko produktu, zapises do kosiku atd. 
     success: function(data) { 
      $("#itemBox").attr('data-id',product_id) 
      $("#itemBox").modal('show').on('shown.bs.modal', function() { 
       $(this).find(".modal-content").html(data) 
      }); 


      // treba nejaka hlaska, ze byl pridan do kosiku 
     } 
    }); 


}); 
関連する問題