我正在尝试添加产品详细信息，然后对其进行编辑。但是编辑选项不存在。显示空白屏幕
var manageProductTable;
$(document).ready(function() {
// top nav bar
$('#navProduct').addClass('active');
// manage product data table
manageProductTable = $('#manageProductTable').DataTable({
'ajax': 'phpaction/fetchinventory.php',
'order': []
});
// add product modal btn clicked
$("#addProductModalBtn").unbind('click').bind('click', function() {
// // product form reset
$("#submitProductForm")[0].reset();
// remove text-error
$(".text-danger").remove();
// remove from-group error
$(".form-group").removeClass('has-error').removeClass('has-success');
$("#submitProductForm").unbind('submit').bind('submit', function() {
// form validation
var productName = $("#productName").val();
var quantity = $("#quantity").val();
var rate = $("#rate").val();
if(productName == "") {
$("#productName").after('<p class="text-danger">Product Name field is required</p>');
$('#productName').closest('.form-group').addClass('has-error');
} else {
// remov error text field
$("#productName").find('.text-danger').remove();
// success out for form
$("#productName").closest('.form-group').addClass('has-success');
} // /else
if(quantity == "") {
$("#quantity").after('<p class="text-danger">Quantity field is required</p>');
$('#quantity').closest('.form-group').addClass('has-error');
} else {
// remov error text field
$("#quantity").find('.text-danger').remove();
// success out for form
$("#quantity").closest('.form-group').addClass('has-success');
} // /else
if(rate == "") {
$("#rate").after('<p class="text-danger">Rate field is required</p>');
$('#rate').closest('.form-group').addClass('has-error');
} else {
// remov error text field
$("#rate").find('.text-danger').remove();
// success out for form
$("#rate").closest('.form-group').addClass('has-success');
} // /else
if(productName && quantity && rate) {
// submit loading button
$("#createProductBtn").button('loading');
var form = $(this);
var formData = new FormData(this);
$.ajax({
url : form.attr('action'),
type: form.attr('method'),
data: formData,
dataType: 'json',
cache: false,
contentType: false,
processData: false,
success:function(response) {
if(response.success == true) {
// submit loading button
$("#createProductBtn").button('reset');
$("#submitProductForm")[0].reset();
$("html, body, div.modal, div.modal-content, div.modal-body").animate({scrollTop: '0'}, 100);
// shows a successful message after operation
$('#add-product-messages').html('<div class="alert alert-success">'+
'<button type="button" class="close" data-dismiss="alert">×</button>'+
'<strong><i class="glyphicon glyphicon-ok-sign"></i></strong> '+ response.messages +
'</div>');
// remove the mesages
$(".alert-success").delay(500).show(10, function() {
$(this).delay(3000).hide(10, function() {
$(this).remove();
});
}); // /.alert
// reload the manage student table
manageProductTable.ajax.reload(null, true);
// remove text-error
$(".text-danger").remove();
// remove from-group error
$(".form-group").removeClass('has-error').removeClass('has-success');
} // /if response.success
} // /success function
}); // /ajax function
} // /if validation is ok
return false;
}); // /submit product form
}); // /add product modal btn clicked
// remove product
}); // document.ready fucntion
function editProduct(productId = null) {
if(productId) {
$("#productId").remove();
// remove text-error
$(".text-danger").remove();
// remove from-group error
$(".form-group").removeClass('has-error').removeClass('has-success');
// modal spinner
$('.div-loading').removeClass('div-hide');
// modal div
$('.div-result').addClass('div-hide');
$.ajax({
url: 'phpaction/fetchselectedinventory.php',
type: 'post',
data: {productId: productId},
dataType: 'json',
success:function(response) {
// alert(response.product_image);
// modal spinner
$('.div-loading').addClass('div-hide');
// modal div
$('.div-result').removeClass('div-hide');
// $("#editProductImage").fileinput({
// overwriteInitial: true,
// maxFileSize: 2500,
// showClose: false,
// showCaption: false,
// browseLabel: '',
// removeLabel: '',
// browseIcon: '<i class="glyphicon glyphicon-folder-open"></i>',
// removeIcon: '<i class="glyphicon glyphicon-remove"></i>',
// removeTitle: 'Cancel or reset changes',
// elErrorContainer: '#kv-avatar-errors-1',
// msgErrorClass: 'alert alert-block alert-danger',
// defaultPreviewContent: '<img src="stock/'+response.product_image+'" alt="Profile Image" style="width:100%;">',
// layoutTemplates: {main2: '{preview} {remove} {browse}'},
// allowedFileExtensions: ["jpg", "png", "gif", "JPG", "PNG", "GIF"]
// });
// product id
$(".editProductFooter").append('<input type="hidden" name="productId" id="productId" value="'+response.product_id+'" />');
//$(".editProductPhotoFooter").append('<input type="hidden" name="productId" id="productId" value="'+response.product_id+'" />');
// product name
$("#editProductName").val(response.productname);
// rate
$("#editRate").val(response.rate);
// quantity
$("#editQuantity").val(response.qty);
// update the product data function
$("#editProductForm").unbind('submit').bind('submit', function() {
// form validation
var productName = $("#editProductName").val();
var quantity = $("#editQuantity").val();
var rate = $("#editRate").val();
if(productName == "") {
$("#editProductName").after('<p class="text-danger">Product Name field is required</p>');
$('#editProductName').closest('.form-group').addClass('has-error');
} else {
// remov error text field
$("#editProductName").find('.text-danger').remove();
// success out for form
$("#editProductName").closest('.form-group').addClass('has-success');
} // /else
if(quantity == "") {
$("#editQuantity").after('<p class="text-danger">Quantity field is required</p>');
$('#editQuantity').closest('.form-group').addClass('has-error');
} else {
// remov error text field
$("#editQuantity").find('.text-danger').remove();
// success out for form
$("#editQuantity").closest('.form-group').addClass('has-success');
} // /else
if(rate == "") {
$("#editRate").after('<p class="text-danger">Rate field is required</p>');
$('#editRate').closest('.form-group').addClass('has-error');
} else {
// remov error text field
$("#editRate").find('.text-danger').remove();
// success out for form
$("#editRate").closest('.form-group').addClass('has-success');
} // /else
if(productName && quantity && rate) {
// submit loading button
$("#editProductBtn").button('loading');
var form = $(this);
var formData = new FormData(this);
$.ajax({
url : form.attr('action'),
type: form.attr('method'),
data: formData,
dataType: 'json',
cache: false,
contentType: false,
processData: false,
success:function(response) {
console.log(response);
if(response.success == true) {
// submit loading button
$("#editProductBtn").button('reset');
$("html, body, div.modal, div.modal-content, div.modal-body").animate({scrollTop: '0'}, 100);
// shows a successful message after operation
$('#edit-product-messages').html('<div class="alert alert-success">'+
'<button type="button" class="close" data-dismiss="alert">×</button>'+
'<strong><i class="glyphicon glyphicon-ok-sign"></i></strong> '+ response.messages +
'</div>');
// remove the mesages
$(".alert-success").delay(500).show(10, function() {
$(this).delay(3000).hide(10, function() {
$(this).remove();
});
}); // /.alert
// reload the manage student table
manageProductTable.ajax.reload(null, true);
// remove text-error
$(".text-danger").remove();
// remove from-group error
$(".form-group").removeClass('has-error').removeClass('has-success');
} // /if response.success
} // /success function
}); // /ajax function
} // /if validation is ok
return false;
}); // update the product data function
// reload the manage student table
/*manageProductTable.ajax.reload(null, true);
$(".fileinput-remove-button").click();
// remove text-error
$(".text-danger").remove();
// remove from-group error
$(".form-group").removeClass('has-error').removeClass('has-success');
} // /if response.success
} // /success function
}); // /ajax function
}*/ // /if validation is ok
{
// submit loading button
//$("#editProductImageBtn").button('loading');
var form = $(this);
var formData = new FormData(this);
$.ajax({
url : form.attr('action'),
type: form.attr('method'),
data: formData,
dataType: 'json',
cache: false,
contentType: false,
processData: false,
success:function(response) {
if(response.success == true) {
// submit loading button
//$("#editProductImageBtn").button('reset');
$("html, body, div.modal, div.modal-content, div.modal-body").animate({scrollTop: '0'}, 100);
// shows a successful message after operation
/*$('#edit-productPhoto-messages').html('<div class="alert alert-success">'+
'<button type="button" class="close" data-dismiss="alert">×</button>'+
'<strong><i class="glyphicon glyphicon-ok-sign"></i></strong> '+ response.messages +
'</div>');*/
// remove the mesages
$(".alert-success").delay(500).show(10, function() {
$(this).delay(3000).hide(10, function() {
$(this).remove();
});
}); // /.alert
// reload the manage student table
manageProductTable.ajax.reload(null, true);
//$(".fileinput-remove-button").click();
/*$.ajax({
url: 'php_action/fetchProductImageUrl.php?i='+productId,
type: 'post',
success:function(response) {
$("#getProductImage").attr('src', response);
}
});*/
// remove text-error
$(".text-danger").remove();
// remove from-group error
$(".form-group").removeClass('has-error').removeClass('has-success');
} // /if response.success
} // /success function
}); // /ajax function
}
return false;
//}); // /update the product image
} // /success function
}); // /ajax to fetch product image
} else {
alert('error please refresh the page');
}
} // /edit product function
/*
// remove product
function removeProduct(productId = null) {
if(productId) {
// remove product button clicked
$("#removeProductBtn").unbind('click').bind('click', function() {
// loading remove button
$("#removeProductBtn").button('loading');
$.ajax({
url: 'phpaction/removeProduct.php',
type: 'post',
data: {productId: productId},
dataType: 'json',
success:function(response) {
// loading remove button
$("#removeProductBtn").button('reset');
if(response.success == true) {
// remove product modal
$("#removeProductModal").modal('hide');
// update the product table
manageProductTable.ajax.reload(null, false);
// remove success messages
$(".remove-messages").html('<div class="alert alert-success">'+
'<button type="button" class="close" data-dismiss="alert">×</button>'+
'<strong><i class="glyphicon glyphicon-ok-sign"></i></strong> '+ response.messages +
'</div>');
// remove the mesages
$(".alert-success").delay(500).show(10, function() {
$(this).delay(3000).hide(10, function() {
$(this).remove();
});
}); // /.alert
} else {
// remove success messages
$(".removeProductMessages").html('<div class="alert alert-success">'+
'<button type="button" class="close" data-dismiss="alert">×</button>'+
'<strong><i class="glyphicon glyphicon-ok-sign"></i></strong> '+ response.messages +
'</div>');
// remove the mesages
$(".alert-success").delay(500).show(10, function() {
$(this).delay(3000).hide(10, function() {
$(this).remove();
});
}); // /.alert
} // /error
} // /success function
}); // /ajax fucntion to remove the product
return false;
}); // /remove product btn clicked
} // /if productid
} // /remove product function
*/
function clearForm(oForm) {
// var frm_elements = oForm.elements;
// console.log(frm_elements);
// for(i=0;i<frm_elements.length;i++) {
// field_type = frm_elements[i].type.toLowerCase();
// switch (field_type) {
// case "text":
// case "password":
// case "textarea":
// case "hidden":
// case "select-one":
// frm_elements[i].value = "";
// break;
// case "radio":
// case "checkbox":
// if (frm_elements[i].checked)
// {
// frm_elements[i].checked = false;
// }
// break;
// case "file":
// if(frm_elements[i].options) {
// frm_elements[i].options= false;
// }
// default:
// break;
// } // /switch
// } // for
}<?php require_once 'phpaction/db_connect.php' ?>
<?php require_once 'phpaction/checksystemlogin.php' ?>
<!DOCTYPE html>
<html>
<head>
<title>Inventory</title>
<link rel="stylesheet" href="assests/bootstrap/css/bootstrap.min.css">
<!-- bootstrap theme-->
<link rel="stylesheet" href="assests/bootstrap/css/bootstrap-theme.min.css">
<!-- font awesome -->
<link rel="stylesheet" href="assests/font-awesome/css/font-awesome.min.css">
<!-- jquery -->
<script src="assests/jquery/jquery.min.js"></script>
<!-- jquery ui -->
<link rel="stylesheet" href="assests/jquery-ui/jquery-ui.min.css">
<script src="assests/jquery-ui/jquery-ui.min.js"></script>
<!-- bootstrap js -->
<script src="assests/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-12">
<ol class="breadcrumb">
<li><a href="dashboard.php">Home</a></li>
<li class="active">Product</li>
</ol>
<div class="panel panel-default">
<div class="panel-heading">
<div class="page-heading"> <i class="glyphicon glyphicon-edit"></i> Manage Product</div>
</div> <!-- /panel-heading -->
<div class="panel-body">
<div class="remove-messages"></div>
<div class="div-action pull pull-right" style="padding-bottom:20px;">
<button class="btn btn-default button1" data-toggle="modal" id="addProductModalBtn" data-target="#addProductModal"> <i class="glyphicon glyphicon-plus-sign"></i> Add Product </button>
</div> <!-- /div-action -->
<table class="table" id="manageProductTable">
<thead>
<tr>
<th>Product Name</th>
<th>Rate</th>
<th>Quantity</th>
<th style="width:15%;">Options</th>
</tr>
</thead>
</table>
<!-- /table -->
</div> <!-- /panel-body -->
</div> <!-- /panel -->
</div> <!-- /col-md-12 -->
</div> <!-- /row -->
<!-- add product -->
<div class="modal fade" id="addProductModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal" id="submitProductForm" action="phpaction/addinventory.php" method="POST" enctype="multipart/form-data">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"><i class="fa fa-plus"></i> Add Product</h4>
</div>
<div class="modal-body" style="max-height:450px; overflow:auto;">
<div id="add-product-messages"></div>
<div class="form-group">
<label for="productName" class="col-sm-3 control-label">Product Name: </label>
<label class="col-sm-1 control-label">: </label>
<div class="col-sm-8">
<input type="text" class="form-control" id="productName" placeholder="Product Name" name="productName" autocomplete="off">
</div>
</div> <!-- /form-group-->
<div class="form-group">
<label for="quantity" class="col-sm-3 control-label">Quantity: </label>
<label class="col-sm-1 control-label">: </label>
<div class="col-sm-8">
<input type="text" class="form-control" id="quantity" placeholder="Quantity" name="quantity" autocomplete="off">
</div>
</div> <!-- /form-group-->
<div class="form-group">
<label for="rate" class="col-sm-3 control-label">Rate: </label>
<label class="col-sm-1 control-label">: </label>
<div class="col-sm-8">
<input type="text" class="form-control" id="rate" placeholder="Rate" name="rate" autocomplete="off">
</div>
</div> <!-- /form-group-->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"> <i class="glyphicon glyphicon-remove-sign"></i> Close</button>
<button type="submit" class="btn btn-primary" id="createProductBtn" data-loading-text="Loading..." autocomplete="off"> <i class="glyphicon glyphicon-ok-sign"></i> Save Changes</button>
</div> <!-- /modal-footer -->
</form> <!-- /.form -->
</div> <!-- /modal-content -->
</div> <!-- /modal-dailog -->
</div>
<!-- /add categories -->
<!-- edit categories brand -->
<div class="modal fade" id="editProductModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"><i class="fa fa-edit"></i> Edit Product</h4>
</div>
<div class="modal-body" style="max-height:450px; overflow:auto;">
<div class="div-loading">
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
</div>
<div class="div-result">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation"><a href="#productInfo" aria-controls="profile" role="tab" data-toggle="tab">Product Info</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="productInfo">
<form class="form-horizontal" id="editProductForm" action="phpaction/editinventory.php" method="POST">
<br />
<div id="edit-product-messages"></div>
<div class="form-group">
<label for="editProductName" class="col-sm-3 control-label">Product Name: </label>
<label class="col-sm-1 control-label">: </label>
<div class="col-sm-8">
<input type="text" class="form-control" id="editProductName" placeholder="Product Name" name="editProductName" autocomplete="off">
</div>
</div> <!-- /form-group-->
<div class="form-group">
<label for="editQuantity" class="col-sm-3 control-label">Quantity: </label>
<label class="col-sm-1 control-label">: </label>
<div class="col-sm-8">
<input type="text" class="form-control" id="editQuantity" placeholder="Quantity" name="editQuantity" autocomplete="off">
</div>
</div> <!-- /form-group-->
<div class="form-group">
<label for="editRate" class="col-sm-3 control-label">Rate: </label>
<label class="col-sm-1 control-label">: </label>
<div class="col-sm-8">
<input type="text" class="form-control" id="editRate" placeholder="Rate" name="editRate" autocomplete="off">
</div>
</div> <!-- /form-group-->
<div class="modal-footer editProductFooter">
<button type="button" class="btn btn-default" data-dismiss="modal"> <i class="glyphicon glyphicon-remove-sign"></i> Close</button>
<button type="submit" class="btn btn-success" id="editProductBtn" data-loading-text="Loading..."> <i class="glyphicon glyphicon-ok-sign"></i> Save Changes</button>
</div> <!-- /modal-footer -->
</form> <!-- /.form -->
</div>
<!-- /product info -->
</div>
</div>
</div> <!-- /modal-body -->
</div>
<!-- /modal-content -->
</div>
<!-- /modal-dailog -->
</div>
<!-- /categories brand -->
<!-- categories brand -->
<!-- <div class="modal fade" tabindex="-1" role="dialog" id="removeProductModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"><i class="glyphicon glyphicon-trash"></i> Remove Product</h4>
</div>
<div class="modal-body">
<div class="removeProductMessages"></div>
<p>Do you really want to remove ?</p>
</div>
<div class="modal-footer removeProductFooter">
<button type="button" class="btn btn-default" data-dismiss="modal"> <i class="glyphicon glyphicon-remove-sign"></i> Close</button>
<button type="button" class="btn btn-primary" id="removeProductBtn" data-loading-text="Loading..."> <i class="glyphicon glyphicon-ok-sign"></i> Save changes</button>
</div>
</div>
-->
<script src="custom/js/product.js"></script>
<!-- file input -->
<script src="assests/plugins/fileinput/js/plugins/canvas-to-blob.min.js'); ?>" type="text/javascript"></script>
<script src="assests/plugins/fileinput/js/plugins/sortable.min.js" type="text/javascript"></script>
<script src="assests/plugins/fileinput/js/plugins/purify.min.js" type="text/javascript"></script>
<script src="assests/plugins/fileinput/js/fileinput.min.js"></script>
<!-- DataTables -->
<script src="assests/plugins/datatables/jquery.dataTables.min.js"></script>
</body>
</html>
我正在尝试制作在线库存管理系统。 当我单击编辑选项时，不会显示编辑产品模式。而是出现黑屏，然后我无法访问它。 所有其他的php文件都在运行，但是模式不显示。