未装载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"); 
     } 
    }); 
}