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