未裝載ajax和數據模式的數據

Question

即時嘗試使用ajax和數據模式對話框加載車輛詳細信息。但似乎沒有正確加載數據，我似乎不知道代碼有什麼問題。

<div class="container" style="width:900px;"> 
    <h3 align="center">View All Available Vehicle</h3> 
    <br /> 
    <div class="table-responsive"> 
     <table class="table table-striped"> 
       <tr> 
        <th width="40%">Plate Number</th> 
        <th width="20%">Type</th> 
        <th width="20%">Status</th> 
        <th width="10%">View</th> 
       </tr> 
       <?php 
       while($row = mysqli_fetch_array($result)) 
       { 
       ?> 
       <tr> 
        <td><?php echo $row["plateNo_vehicle"]; ?></td> 
        <td><?php echo $row["vehicle_Type"];?></td> 
        <td><?php echo $row["vehicle_status"];?></td> 
        <td><input type="button" name="view" value="more" id="<?php echo $row["id_vehicle"]; ?>" class="btn btn-info btn-xs view_data" /></td> 
       </tr> 
       <?php 
       } 
       ?> 
     </table> 
    </div> 
</div> 

用於顯示詳細信息的數據模式對話框。

<div id="dataModal" class="modal fade"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Vehicles Details</h4> 
      </div> 
      <div class="modal-body" id="vehicle_detail"> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 

這是我用

<?php 

    if(isset($_POST["vehicle_id"])) { 
     $output = ''; 
     $link=msqli_connect("localhost","root","root","vms"); 
     $query = "SELECT * FROM vehicle WHERE id_vehicle = '".$_POST["vehicle_id"]."'"; 
     $result = mysqli_query($link, $query); 
     $output .= ' 
     <div class="table-responsive"> 
      <table class="table table-bordered">'; 
     while($row = mysqli_fetch_array($result)) 
     { 
      $output .= ' 
       <tr> 
        <td width="30%"><label>Plate No</label></td> 
        <td width="70%">'.$row["plateNo_vehicle"].'</td> 
       </tr> 
       <tr> 
        <td width="30%"><label>Engine Number</label></td> 
        <td width="70%">'.$row["engineNo_vehicle"].'</td> 
       </tr> 
       <tr> 
        <td width="30%"><label>Engine Capacity</label></td> 
        <td width="70%">'.$row["engineCapacity_vehicle"].'</td> 
       </tr> 
       '; 
     } 
     $output .= "</table></div>"; 
     echo $output; 
    } 

?> 

腳本中使用

<script> 

$(document).ready(function(){ 
    $('.view_data').click(function(){ 
     var vehicle_id = $(this).attr("id_vehicle"); 
     $.ajax({ 
      url:"select.php", 
      method:"post", 
      data:{vehicle_id:vehicle_id}, 
      success:function(data){ 
       $('#vehicle_detail').html(data); 
       $('#dataModal').modal("show"); 
      } 
     }); 
    }); 
}); 

</script> 

Answer 1

看一看你select.php文件select.php：

<?php 

if(isset($_POST["vehicle_id"])) { 
$output = ''; 
$link=msqli_connect("localhost","root","root","vms"); <======== 

TYPO。它應該已經：

$link=mysqli_connect("localhost","root","root","vms"); 

此外，

添加data-vehicleid屬性您view_data按鈕：

<td><input type="button" data-vehicleid="<?php echo $row["id_vehicle"]; ?>" name="view" value="more" id="<?php echo $row["id_vehicle"]; ?>" class="btn btn-info btn-xs view_data " /></td> 

，然後改變你的腳本接收屬性值：

<script> 

$(document).ready(function(){ 
    $('.view_data').click(function(){ 
     var vehicle_id = $(this).attr("data-vehicleid"); <===== 
     $.ajax({ 
      .... 
     }); 
    }); 
}); 


</script> 

鑽機HT現在，你已經將它設置爲：

var vehicle_id = $(this).attr("id_vehicle"); 

，你不必叫id_vehicle="..."該按鈕的屬性，它是行不通的。我猜你的意思是attr（「id」）;

Answer 2

添加此代碼對你while loop

<?php 
    while($row = mysqli_fetch_array($result)) 
     { 
?> 
<tr> 
    <td><?php echo $row["plateNo_vehicle"]; ?></td> 
    <td><?php echo $row["vehicle_Type"];?></td> 
    <td><?php echo $row["vehicle_status"];?></td> 
    <td><input type="button" name="view" value="more" data-vehicle-id="<?php echo $row["id_vehicle"]; ?>" class="btn btn-info btn-xs view_data" /></td> 
</tr> 
<?php 
    } 
?> 

而且在腳本改變你的ID var vehicle_id = $(this).attr("data-vehicle-id"); 希望此代碼的工作

Answer 3

這裏被更新的代碼視圖：

觀點：

<div class="container" style="width:900px;"> 
    <h3 align="center">View All Available Vehicle</h3> 
    <br /> 
    <div class="table-responsive"> 
     <table class="table table-striped"> 
       <tr> 
        <th width="40%">Plate Number</th> 
        <th width="20%">Type</th> 
        <th width="20%">Status</th> 
        <th width="10%">View</th> 
       </tr> 
       <?php 
       while($row = mysqli_fetch_array($result)) 
       { 
       ?> 
       <tr> 
        <td><?php echo $row["plateNo_vehicle"]; ?></td> 
        <td><?php echo $row["vehicle_Type"];?></td> 
        <td><?php echo $row["vehicle_status"];?></td> 
        <td><a href="#" title="more details" data-toggle="modal" data-target="#dataModal" data-vehicle_id="<?php echo $row["id_vehicle"]; ?>" class="btn btn-info btn-xs">more</a></td> 
       </tr> 
       <?php 
       } 
       ?> 
     </table> 
    </div> 
</div> 

腳本：

<script> 
$('#dataModal').on('show.bs.modal', function (event) { 

    var button = $(event.relatedTarget) 
    var vehicle_id = button.data('vehicle_id') 

    var modal = $(this) 

    $.ajax({ 
     url:"select.php", 
     method:"POST", 
     data:{vehicle_id:vehicle_id}, 
     success:function(data){ 
      modal.find('.modal-body').html('No Response'); 
      modal.find('.modal-body').html(data); 
      $('#vehicle_detail').html(data); 
      $('#dataModal').modal("show"); 
     } 
    }); 
}); 
</script> 

Answer 4

爲了得到這個標識這一點，你需要添加的onclick

<td><input type="button" name="view" value="more" id="<?php echo $row["id_vehicle"]; ?>" class="btn btn-info btn-xs view_data" onclick="getId(this.id)"/></td> 

function getId(clicked_id){ 
    var vehicle_id = clicked_id; 
     $.ajax({ 
     url:"select.php", 
     method:"post", 
     data:{vehicle_id:vehicle_id}, 
     success:function(data){ 
      $('#vehicle_detail').html(data); 
      $('#dataModal').modal("show"); 
     } 
    }); 
}