-2
我有一個模型，其中包含向數據庫添加值的違規者信息。現在我想刪除某個列和字段，並且我已經在其他文件上這樣做了，但是在我的home.php和index.js上如果刪除了「Contact Number」字段，則向數據庫停止工作時添加值，我似乎無法找到錯誤。一切工作正常如果我在聯繫號碼字段輸入一定的值，但是當我刪除它並添加新的細節模式似乎不起作用。Bootstrap和Javascript模式無法正常工作
home.php
<!DOCTYPE html>
<html>
<head>
<title>TMTRO Iloilo</title>
<!-- bootstrap css -->
<link rel="stylesheet" type="text/css"
href="assests/bootstrap/css/bootstrap.min.css">
<!-- datatables css -->
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
</head>
<body>
<nav class="navbar navbar-inverse" width="100%">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="javascript:window.location.href=window.location.href">TMTRO</a>
</div>
<ul class="nav navbar-nav">
<li><a href="traffic.php">View Traffic Records</a></li>
<li><a href="loginweb.php">View Officer Info</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="logout.php"><span class="glyphicon glyphicon-log-in"></span>Logout</a></li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<center><h1 class="page-header">TMTRO Iloilo <small>Violators Records</small> </h1></center>
<div class="removeMessages"></div>
<button class="btn btn-default pull pull-right" data-toggle="modal" data-target="#addMember" id="addMemberModalBtn">
<span class="glyphicon glyphicon-plus-sign"></span> Add Violator
</button>
<br /> <br /> <br />
<table class="table table-responsive " id="manageMemberTable">
<thead>
<tr>
<th>ID #</th>
<th>Name</th>
<th>Last Name</th>
<th>License Number</th>
<th>Violation</th>
<th>Arrest Place</th>
<th>Address</th>
<th>Plate Number</th>
<th>Officer Name</th>
<th>Date&Time</th>
<th>Paid</th>
<th>Option</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<!-- add modal -->
<div class="modal fade" tabindex="-1" role="dialog" id="addMember">
<div class="modal-dialog" role="document">
<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"><span class="glyphicon glyphicon-plus-sign"></span> Add Violator</h4>
</div>
<form class="form-horizontal" action="php_action/create.php" method="POST" id="createMemberForm">
<div class="modal-body">
<div class="messages"></div>
<div class="form-group"> <!--/here teh addclass has-error will appear -->
<label for="name" class="col-sm-3 control-label">Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="name" name="name" placeholder="Name">
<!-- here the text will apper -->
</div>
</div>
<div class="form-group">
<label for="lname" class="col-sm-3 control-label">Last Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="lname" name="lname" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<label for="lnumber" class="col-sm-3 control-label">License Number</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="lnumber" name="lnumber" placeholder="License Number">
</div>
</div>
<div class="form-group">
<label for="violation" class="col-sm-3 control-label">Violation</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="violation" name="violation" placeholder="Violation">
</div>
</div>
<div class="form-group">
<label for="aplace" class="col-sm-3 control-label">Arrest Place</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="aplace" name="aplace" placeholder="Arrest Place">
</div>
</div>
<div class="form-group">
<label for="address" class="col-sm-3 control-label">Address</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="address" name="address" placeholder="Address">
</div>
</div>
<div class="form-group">
<label for="pnumber" class="col-sm-3 control-label">Plate Number</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="pnumber" name="pnumber" placeholder="Plate Number">
</div>
</div>
<div class="form-group">
<label for="cnumber" class="col-sm-3 control-label">Contact Number</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="cnumber" name="cnumber" placeholder="Contact Number">
</div>
</div>
<div class="form-group">
<label for="oname" class="col-sm-3 control-label">Officer Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="oname" name="oname" placeholder="Officer Name">
</div>
</div>
<div class="form-group">
<label for="datetime" class="col-sm-3 control-label">Date&Time</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="datetime" name="datetime" placeholder="MM/DD/YYYY HH:MM:SS AM/PM">
</div>
</div>
<div class="form-group">
<label for="paid" class="col-sm-3 control-label">Paid</label>
<div class="col-sm-9">
<select class="form-control" name="paid" id="paid">
<option value="">~~SELECT~~</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- /add modal -->
<!-- remove modal -->
<div class="modal fade" tabindex="-1" role="dialog" id="removeMemberModal">
<div class="modal-dialog" role="document">
<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"><span class="glyphicon glyphicon-trash"></span> Remove Member</h4>
</div>
<div class="modal-body">
<p>Do you really want to remove ?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="removeBtn">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- /remove modal -->
<!-- edit modal -->
<div class="modal fade" tabindex="-1" role="dialog" id="editMemberModal">
<div class="modal-dialog" role="document">
<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"><span class="glyphicon glyphicon-edit"></span> Edit Violator</h4>
</div>
<form class="form-horizontal" action="php_action/update.php" method="POST" id="updateMemberForm">
<div class="modal-body">
<div class="edit-messages"></div>
<div class="form-group"> <!--/here teh addclass has-error will appear -->
<label for="editName" class="col-sm-3 control-label">Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="editName" name="editName" placeholder="Name">
<!-- here the text will apper -->
</div>
</div>
<div class="form-group">
<label for="editLname" class="col-sm-3 control-label">Last Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="editLname" name="editLname" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<label for="editLnumber" class="col-sm-3 control-label">License Number</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="editLnumber" name="editLnumber" placeholder="License Number">
</div>
</div>
<div class="form-group">
<label for="editViolation" class="col-sm-3 control-label">Violation</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="editViolation" name="editViolation" placeholder="Violation">
</div>
</div>
<div class="form-group">
<label for="editAplace" class="col-sm-3 control-label">Arrest Place</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="editAplace" name="editAplace" placeholder="Arrest Place">
</div>
</div>
<div class="form-group">
<label for="editAddress" class="col-sm-3 control-label">Address</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="editAddress" name="editAddress" placeholder="Address">
</div>
</div>
<div class="form-group">
<label for="editPnumber" class="col-sm-3 control-label">Plate Number</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="editPnumber" name="editPnumber" placeholder="Plate Number">
</div>
</div>
<div class="form-group">
<label for="editOname" class="col-sm-3 control-label">Officer Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="editOname" name="editOname" placeholder="Officer Name">
</div>
</div>
<div class="form-group">
<label for="editDatetime" class="col-sm-3 control-label">Date&Time</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="editDatetime" name="editDatetime" placeholder="MM/DD/YYYY HH:MM:SS AM/PM">
</div>
</div>
<div class="form-group">
<label for="editPaid" class="col-sm-3 control-label">Paid</label>
<div class="col-sm-9">
<select class="form-control" name="editPaid" id="editPaid">
<option value="">~~SELECT~~</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
</div>
</div>
</div>
<div class="modal-footer editMemberModal">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- /edit modal -->
<!-- jquery plugin -->
<script type="text/javascript" src="assests/jquery/jquery.min.js"></script>
<!-- bootstrap js -->
<script type="text/javascript" src="assests/bootstrap/js/bootstrap.min.js"></script>
<!-- datatables js -->
<script type="text/javascript" src="assests/datatables/datatables.min.js"></script>
<!-- include custom index.js -->
<script type="text/javascript" src="custom/js/index.js"></script>
</body>
</html>
index.js
var manageMemberTable;
$(document).ready(function() {
manageMemberTable = $("#manageMemberTable").DataTable({
"ajax": "php_action/retrieve.php",
"order": [[0,'desc']]
});
$("#addMemberModalBtn").on('click', function() {
// reset the form
$("#createMemberForm")[0].reset();
// remove the error
$(".form-group").removeClass('has-error').removeClass('has-success');
$(".text-danger").remove();
// empty the message div
$(".messages").html("");
// submit form
$("#createMemberForm").unbind('submit').bind('submit', function() {
$(".text-danger").remove();
var form = $(this);
// validation
var name = $("#name").val();
var lname = $("#lname").val();
var lnumber = $("#lnumber").val();
var violation = $("#violation").val();
var aplace = $("#aplace").val();
var address = $("#address").val();
var pnumber = $("#pnumber").val();
var oname = $("#oname").val();
var datetime = $("#datetime").val();
var paid = $("#paid").val();
if(name == "") {
$("#name").closest('.form-group').addClass('has-error');
$("#name").after('<p class="text-danger">The Name field is required</p>');
} else {
$("#name").closest('.form-group').removeClass('has-error');
$("#name").closest('.form-group').addClass('has-success');
}
if(lname == "") {
$("#lname").closest('.form-group').addClass('has-error');
$("#lname").after('<p class="text-danger">The Lname field is required</p>');
} else {
$("#lname").closest('.form-group').removeClass('has-error');
$("#lname").closest('.form-group').addClass('has-success');
}
if(lnumber == "") {
$("#lnumber").closest('.form-group').addClass('has-error');
$("#lnumber").after('<p class="text-danger">The Lnumber field is required</p>');
} else {
$("#lnumber").closest('.form-group').removeClass('has-error');
$("#lnumber").closest('.form-group').addClass('has-success');
}
if(violation == "") {
$("#violation").closest('.form-group').addClass('has-error');
$("#violation").after('<p class="text-danger">The Violation field is required</p>');
} else {
$("#violation").closest('.form-group').removeClass('has-error');
$("#violation").closest('.form-group').addClass('has-success');
}
if(aplace == "") {
$("#aplace").closest('.form-group').addClass('has-error');
$("#aplace").after('<p class="text-danger">The Arrest Place field is required</p>');
} else {
$("#aplace").closest('.form-group').removeClass('has-error');
$("#aplace").closest('.form-group').addClass('has-success');
}
if(address == "") {
$("#address").closest('.form-group').addClass('has-error');
$("#address").after('<p class="text-danger">The Address field is required</p>');
} else {
$("#address").closest('.form-group').removeClass('has-error');
$("#address").closest('.form-group').addClass('has-success');
}
if(pnumber == "") {
$("#pnumber").closest('.form-group').addClass('has-error');
$("#pnumber").after('<p class="text-danger">The Plate Number field is required</p>');
} else {
$("#pnumber").closest('.form-group').removeClass('has-error');
$("#pnumber").closest('.form-group').addClass('has-success');
}
if(oname == "") {
$("#oname").closest('.form-group').addClass('has-error');
$("#oname").after('<p class="text-danger">The Officer Name field is required</p>');
} else {
$("#oname").closest('.form-group').removeClass('has-error');
$("#oname").closest('.form-group').addClass('has-success');
}
if(datetime == "") {
$("#datetime").closest('.form-group').addClass('has-error');
$("#datetime").after('<p class="text-danger">The Date&Time field is required</p>');
} else {
$("#datetime").closest('.form-group').removeClass('has-error');
$("#datetime").closest('.form-group').addClass('has-success');
}
if(paid == "") {
$("#paid").closest('.form-group').addClass('has-error');
$("#paid").after('<p class="text-danger">The Paid field is required</p>');
} else {
$("#paid").closest('.form-group').removeClass('has-error');
$("#paid").closest('.form-group').addClass('has-success');
}
if(name && lname && lnumber && violation && aplace && address && pnumber && oname && datetime && paid) {
//submi the form to server
$.ajax({
url : form.attr('action'),
type : form.attr('method'),
data : form.serialize(),
dataType : 'json',
success:function(response) {
// remove the error
$(".form-group").removeClass('has-error').removeClass('has-success');
if(response.success == true) {
$(".messages").html('<div class="alert alert-success alert-dismissible" role="alert">'+
'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>'+
'<strong> <span class="glyphicon glyphicon-ok-sign"></span> </strong>'+response.messages+
'</div>');
// reset the form
$("#createMemberForm")[0].reset();
// reload the datatables
manageMemberTable.ajax.reload(null, false);
// this function is built in function of datatables;
} else {
$(".messages").html('<div class="alert alert-warning alert-dismissible" role="alert">'+
'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>'+
'<strong> <span class="glyphicon glyphicon-exclamation-sign"></span> </strong>'+response.messages+
'</div>');
} // /else
} // success
}); // ajax subit
} /// if
return false;
}); // /submit form for create member
}); // /add modal
});
function removeMember(id = null) {
if(id) {
// click on remove button
$("#removeBtn").unbind('click').bind('click', function() {
$.ajax({
url: 'php_action/remove.php',
type: 'post',
data: {member_id : id},
dataType: 'json',
success:function(response) {
if(response.success == true) {
$(".removeMessages").html('<div class="alert alert-success alert-dismissible" role="alert">'+
'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>'+
'<strong> <span class="glyphicon glyphicon-ok-sign"></span> </strong>'+response.messages+
'</div>');
// refresh the table
manageMemberTable.ajax.reload(null, false);
// close the modal
$("#removeMemberModal").modal('hide');
} else {
$(".removeMessages").html('<div class="alert alert-warning alert-dismissible" role="alert">'+
'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>'+
'<strong> <span class="glyphicon glyphicon-exclamation-sign"></span> </strong>'+response.messages+
'</div>');
}
}
});
}); // click remove btn
} else {
alert('Error: Refresh the page again');
}
}
function editMember(id = null) {
if(id) {
// remove the error
$(".form-group").removeClass('has-error').removeClass('has-success');
$(".text-danger").remove();
// empty the message div
$(".edit-messages").html("");
// remove the id
$("#member_id").remove();
// fetch the member data
$.ajax({
url: 'php_action/getSelectedMember.php',
type: 'post',
data: {member_id : id},
dataType: 'json',
success:function(response) {
$("#editName").val(response.name);
$("#editLname").val(response.lname);
$("#editLnumber").val(response.lnumber);
$("#editViolation").val(response.violation);
$("#editAplace").val(response.aplace);
$("#editAddress").val(response.address);
$("#editPnumber").val(response.pnumber);
$("#editOname").val(response.oname);
$("#editDatetime").val(response.datetime);
$("#editPaid").val(response.paid);
// mmeber id
$(".editMemberModal").append('<input type="hidden" name="member_id" id="member_id" value="'+response.id+'"/>');
// here update the member data
$("#updateMemberForm").unbind('submit').bind('submit', function() {
// remove error messages
$(".text-danger").remove();
var form = $(this);
// validation
var editName = $("#editName").val();
var editLname = $("#editLname").val();
var editLnumber = $("#editLnumber").val();
var editViolation = $("#editViolation").val();
var editAplace = $("#editAplace").val();
var editAddress = $("#editAddress").val();
var editPnumber = $("#editPnumber").val();
var editOname = $("#editOname").val();
var editDatetime = $("#editDatetime").val();
var editPaid = $("#editPaid").val();
if(editName == "") {
$("#editName").closest('.form-group').addClass('has-error');
$("#editName").after('<p class="text-danger">The Name field is required</p>');
} else {
$("#editName").closest('.form-group').removeClass('has-error');
$("#editName").closest('.form-group').addClass('has-success');
}
if(editLname == "") {
$("#editLname").closest('.form-group').addClass('has-error');
$("#editLname").after('<p class="text-danger">The LName field is required</p>');
} else {
$("#editLname").closest('.form-group').removeClass('has-error');
$("#editLname").closest('.form-group').addClass('has-success');
}
if(editLnumber == "") {
$("#editLnumber").closest('.form-group').addClass('has-error');
$("#editLnumber").after('<p class="text-danger">The Lnumber field is required</p>');
} else {
$("#editLnumber").closest('.form-group').removeClass('has-error');
$("#editLnumber").closest('.form-group').addClass('has-success');
}
if(editViolation == "") {
$("#editViolation").closest('.form-group').addClass('has-error');
$("#editViolation").after('<p class="text-danger">The Violation field is required</p>');
} else {
$("#editViolation").closest('.form-group').removeClass('has-error');
$("#editViolation").closest('.form-group').addClass('has-success');
}
if(editAplace == "") {
$("#editAplace").closest('.form-group').addClass('has-error');
$("#editAplace").after('<p class="text-danger">The Arrest Place field is required</p>');
} else {
$("#editAplace").closest('.form-group').removeClass('has-error');
$("#editAplace").closest('.form-group').addClass('has-success');
}
if(editAddress == "") {
$("#editAddress").closest('.form-group').addClass('has-error');
$("#editAddress").after('<p class="text-danger">The Address field is required</p>');
} else {
$("#editAddress").closest('.form-group').removeClass('has-error');
$("#editAddress").closest('.form-group').addClass('has-success');
}
if(editPnumber == "") {
$("#editPnumber").closest('.form-group').addClass('has-error');
$("#editPnumber").after('<p class="text-danger">The Plate Number field is required</p>');
} else {
$("#editPnumber").closest('.form-group').removeClass('has-error');
$("#editPnumber").closest('.form-group').addClass('has-success');
}
if(editOname == "") {
$("#editOname").closest('.form-group').addClass('has-error');
$("#editOname").after('<p class="text-danger">The Officer Name field is required</p>');
} else {
$("#editOname").closest('.form-group').removeClass('has-error');
$("#editOname").closest('.form-group').addClass('has-success');
}
if(editDatetime == "") {
$("#editDatetime").closest('.form-group').addClass('has-error');
$("#editDatetime").after('<p class="text-danger">The Date&Time field is required</p>');
} else {
$("#editDatetime").closest('.form-group').removeClass('has-error');
$("#editDatetime").closest('.form-group').addClass('has-success');
}
if(editPaid == "") {
$("#editPaid").closest('.form-group').addClass('has-error');
$("#editPaid").after('<p class="text-danger">The Paid field is required</p>');
} else {
$("#editPaid").closest('.form-group').removeClass('has-error');
$("#editPaid").closest('.form-group').addClass('has-success');
}
if(editName && editLname && editLnumber && editViolation && editAplace && editAddress && editPnumber && editOname && editDatetime && editPaid) {
$.ajax({
url: form.attr('action'),
type: form.attr('method'),
data: form.serialize(),
dataType: 'json',
success:function(response) {
if(response.success == true) {
$(".edit-messages").html('<div class="alert alert-success alert-dismissible" role="alert">'+
'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>'+
'<strong> <span class="glyphicon glyphicon-ok-sign"></span> </strong>'+response.messages+
'</div>');
// reload the datatables
manageMemberTable.ajax.reload(null, false);
// this function is built in function of datatables;
// remove the error
$(".form-group").removeClass('has-success').removeClass('has-error');
$(".text-danger").remove();
} else {
$(".edit-messages").html('<div class="alert alert-warning alert-dismissible" role="alert">'+
'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>'+
'<strong> <span class="glyphicon glyphicon-exclamation-sign"></span> </strong>'+response.messages+
'</div>')
}
} // /success
}); // /ajax
} // /if
return false;
});
} // /success
}); // /fetch selected member info
} else {
alert("Error : Refresh the page again");
}
}
結束之前包括這哪裏是jQuery和引導在你的代碼？ –
正如@PankajMakwana所暗示的，你並沒有在任何地方導入jquery或bootstrap腳本。瀏覽JavaScript控制檯會告訴你很多東西（你會看到'undefined不是函數'或'不能讀取未定義屬性ajax'的效果）。我正在投票結束這個問題。 –
已經做到了。在**添加模式之後添加完整代碼** –