-2
Ich habe ein Modell, das Verletzer Informationen zum Hinzufügen von Werten zur Datenbank enthält. Jetzt möchte ich eine bestimmte Spalte und ein Feld löschen, und ich habe es für andere Dateien getan, aber auf meiner home.php und index.js, wenn ich das Feld "Kontaktnummer" lösche das Hinzufügen von Werten zu Datenbank funktioniert nicht mehr und ich kann nicht scheinen finde den Fehler. Alles funktioniert gut Wenn ich einen bestimmten Wert in das Feld für die Kontaktnummer gebe, aber wenn ich es lösche und neue Details hinzufüge, scheint das Modal nicht zu funktionieren.Bootstrap und Javascript Modal funktioniert nicht richtig
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");
}
wo jquery und Bootstrap in Ihrem Code ist? –
Wie @PankajMakwana andeutet, importieren Sie die jquery- oder bootstrap-Skripte nirgends. Ein Blick auf die JavaScript-Konsole hätte dir genauso viel gesagt (du würdest etwas mit dem Effekt von 'undefined ist keine Funktion' oder 'kann nicht lesen Eigenschaft Ajax von undefiniert') sehen. Ich stimme zu, diese Frage zu schließen. –
Bereits getan. Vollständige Codes hinzugefügt nach ** add modal ** –