当某些行值为null时,Modal中没有数据返回

时间:2017-11-20 20:21:17

标签: php mysql json ajax bootstrap-modal

我正在开展一个项目,在那里我为公司创建了一个目录。在某些页面上,当用户点击产品ID时,模式会显示产品详细信息。当行中有值时,模态可以正常工作。但是,当存在空值时,模态将返回空白。如何处理代码,以便即使某些行中存在空值,仍会显示数据?或者是否有一种更简单的方法来显示show product detail而不使用modal / ajax / json。

MYSQL查询

if($_REQUEST['tid']) {
SELECT t.tool_id, power_source, sub_option, sub_type, 
(purchase_price * 0.15) AS rental_price, (purchase_price * 0.4) AS 
deposit_price, material,manufacturer, length, width_diameter, weight, 
ac.accessory_description FROM tool t JOIN accessory ac on t.tool_id = 
ac.tool_id WHERE tool_id='".$_REQUEST['tid']."'";
$resultset = mysqli_query($connection, $sql) or die("database error:". 
mysqli_error($connection)); 
$data = array();
while( $rows = mysqli_fetch_assoc($resultset) ) {
$data = $rows;
}
echo json_encode($data);
} else {
echo 0; 
}
?>

Ajax / json代码

$(document).ready(function(){$(document).on
('click', '#getTool', function(e){  e.preventDefault();  
var tid = $(this).data('id');    
$('#tool-detail').hide();
$('#tool_data-loader').show();  
$.ajax({url: 'toolData.php',
type: 'POST',
data: 'tid='+tid,
dataType: 'json',
cache: false
})
.done(function(data){
console.log(data.id); 
$('#tool-detail').hide();
$('#tool-detail').show();
$('#tid').html(data.tool_id);
$('#tool_type').html(data.power_source);
$('#short_desc').html(data.sub_option + " " +data.sub_type);
$('#fullDesc').html(data.manufacturer+ " "+data.material+ ", 
"+data.length+"in x " +data.width_diameter+"in,"+data.weight+"lbs");
$('#rental_price').html("$"+data.rental_price);
$('#deposit_price').html("$"+data.deposit_price);
$('#accessories').html("$"+data.accessory_description);      
$('#tool_data-loader').hide();
})
.fail(function(){
$('#tool-detail').html('Error, Please try again...');
$('#tool_data-loader').hide();
});
}); 
});

模态

<form action="productDetail.php" method="post">
<table>
<tr>
<td><input type="submit" name="productDetail" value="productDetail" id="productDetail" style="margin-left: 10px;"></td>
</tr>
</table>
</form>
<div id="tool-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog"> 
<div class="modal-content">                  
<div class="modal-header"> 
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">*</button> 
<h4 class="modal-title">
<i class="glyphicon glyphicon-wrench"></i> Tool Details
</h4> 
</div>          
<div class="modal-body">                       
<div id="tool_data-loader" style="display: none; text-align: center;">
<img src="ajax-loader.gif"> 
</div>                       
<div id="tool-detail">                                        
<div class="row"> 
<div class="col-md-12">                         
<div class="table-responsive">                             
<table class="table table-striped table-bordered">
<tr>
<th>Tool ID</th>
<td id="tid"></td>
</tr>                                     
<tr>
<th>Tool Type</th>
<td id="tool_type"></td>
</tr>                                         
<tr>
<th>Short Description</th>
<td id="short_desc"></td>
</tr>
<tr>
<th>Full Description</th>
<td id="fullDesc"></td>
</tr>                                            
<tr>
<th>Rental Price</th>
<td id="rental_price"></td>
</tr>
<tr>
<th>Deposit Price</th>
<td id="deposit_price"></td>
</tr>
<tr>
<th>Accessories</th>
<td id="accesories"></td>
</tr>                                                                                           
</table> 
</div>                                       
</div> 
</div>                       
</div>                              
</div>           
<div class="modal-footer"> 
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
</div>              
</div> 
</div>
</div>

0 个答案:

没有答案