php - 将变量传递给 Bootstrap 模式形式

Question

我有一个表，显示存储在 mysql 数据库中的电影评论。这些评论中的每一个都可以使用驻留在 Bootstrap 模式中的表单进行编辑。我遇到的问题是我无法理解如何为模式中的每个表单提供唯一的 ID。目前，该模式仅与数据库中第一行评论中的变量相呼应。非常感谢。

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

您只需要在页面上放置一次模式，并且似乎您为每个评论创建一个新的模式，您不需要这样做，只需输出一次即可。

然后您需要像这样使用 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');

  ....
});