Boostrap Modal Update mit Ajax

Question

Ich habe eine Seite, wo ein Generieren von Schaltflächen, die Daten-ID in ihnen haben. Wenn ich auf den Button klicke, sende die Daten-ID über Ajax an meinen PHP-Code, öffne das modale Fenster und erzeuge den Inhalt mit der empfangenen ID. Aber das Problem ist, dass ich die Seite zuerst aktualisieren muss, um sogar einen Wert innerhalb der Variable $ _POST zu erhalten, und nachdem ich mein Modal geöffnet und geschlossen habe, muss ich die Seite erneut aktualisieren, damit meine Variablen das gleiche Fenster öffnen.

$(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) { 
     $("#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); 
    }); 
}); 

Hier Code JS,

<?php 
if(!isset($_SESSION)){ 
    session_start(); 
} 


if(isset($_REQUEST['modalID'])){ 

    $_SESSION['modalBoxID'] = $_REQUEST['modalID']; 
} 
?> 

Hier ist, wie ich die angeforderte ID von Ajax speichere.

und hier ist, wie ich meine modalen Boxen generieren, das Problem ist, dass ohne Aktualisieren der Seite, jede Box, die ich öffne, den gleichen Inhalt darin haben.

<?php 
if(!isset($_SESSION)){ 
session_start(); 
} 


if(!isset($_SESSION['sessName'])){ 
$_SESSION['sessName'] = 'visitor'; 
} 

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


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

Ist das überhaupt möglich mit der Lösung, die ich habe? Ich erhalte nicht einmal Inhalt beim Laden der ersten Seite, ich muss ihn aktualisieren, damit meine ID in der Variablen gespeichert wird und dann einige Inhalte anzeigt.

Answer 1

Fügen Sie unten zu Ihrem Javascript hinzu. Es entfernt die vorherigen Daten aus dem Modal Body. Es kann einige Verzögerungen geben, bevor der neue Inhalt geladen wird.

$(document.body).on('hidden.bs.modal', function() { 
    $("#itemBox").removeData('bs.modal'); 
});