Передача переменных в загрузочную модальную форму

Question

У меня есть таблица, в которой представлены обзоры фильмов, хранящиеся в базе данных mysql. Каждый из этих обзоров можно редактировать с помощью формы, которая находится в модуле bootstrap. Проблема у меня есть, я не могу понять, как предоставить каждой форме в модальном уникальном идентификаторе. В настоящий момент модальная только когда-либо повторяет varibales из первой строки обзоров в базе данных. Большое спасибо.

Jquery

<script type="text/javascript"> 
//Edit Review 
$(document).ready(function(){ 
$(".editReview").click(function (e) { 
$('#myModal').modal({ 
      e.preventDefault(); 

     var username = $(this).data("username"); 
     var film_id = $(this).data('filmid'); 
     var id = $(this).data('id'); 
     var review = $(this).data('review'); 


$.post('ajax_editReview.php', {username: username, film_id: film_id, id: id, review: review}, 
function(data){ 
$('#myModal').modal('hide'); 
$("#message").html(data); 
    $("#review").val(''); 
$("#message").fadeIn(500); 
$("#message").fadeOut(2500); 
}); 
return false; 
}); 
}); 
</script> 

Форма

<div class="container"> 
<?php 
    $sql = "SELECT * FROM user_reviews WHERE username='$username' ORDER BY DATE desc"; 
$result = $db_conx->query($sql); 
while($row = $result->fetch_assoc()) { 
$id = $row['id']; 
$film_id = $row['film_id']; 
$review = $row['review']; 
$movie = $tmdb->getMovie ($film_id); 

echo ' 
<div class="row"> 
     <div class="col-md-1"> 
<a href="film_info.php?film_id='. $movie->getID() .'"><img id="image1" src="'. $tmdb->getImageURL('w150') . $movie->getPoster() .'" width="80" /></a> 
</div> 

     <div class="col-md-4"> 
      <h3> 
      ' . $movie->getTitle() .' 
      </h3>'; 
      <p> 
      '.$review. ' 
      </p> 

    <!-- Trigger the modal with a button --> 
    <button type="button" class="btn btn-success btn-xs pull-right" data-toggle="modal" data-id="'.$id.'" data-username="'. $username.'" data-filmid="'.$film_id .'" data-target="#myModal">edit review</button> 

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

     <!-- Modal content--> 
     <div class="modal-content"> 
     <div class="modal-header"> 
<button type="button" class="close" data-dismiss="modal">&times;</button> 
<h4 class="modal-title"><h3> Edit your review for '. $movie->getTitle().'</h3></h4> 
</div> 
     <div class="modal-body"> 

      <form> 
<div class="editReview"> 
      <div class="form-group"> 
<label for="review">Review:</label> 
    <textarea class="form-control" rows="5" id="review" placeholder="'. $review.'" name="review"></textarea>        
       <input type="hidden" id="username" name="username" value="'.$username.'"> 
<input type="hidden" id="film_id" name="film_id" value="'. $film_id.'"> 
<input type="hidden" id="film_title" name="film_title" value="'.$movie->getTitle.'"> 
<input type="hidden" id="id" name="id" value="'.$id.'"> 
</div> 
    <button type="submit" id="FormSubmitReview" data-dismiss="modal" class="btn btn-danger btn-sm pull-right">Save Review</button> 

</form> 
     </div> 
</div> 
</div> 
    </div> 
</div> 
</div> 
     <div class="col-md-7"> 
     </div> 
     </div>'; 

} 
?> 

Answer 1

Вы должны иметь модальный только один раз на странице, и кажется, что вы в создании новой для каждого обзора, вы не» t нужно сделать это, просто выведите его один раз.

Вам необходимо затем использовать событие show.bs.modal.

$('#myModal').on('show.bs.modal', function (event) { 
    var button = $(event.relatedTarget) // Button that triggered the modal 
    var username = button.data("username"); 
    var film_id = button.data('filmid'); 
    var id = button.data('id'); 
    var review = button.data('review'); 

    .... 
});