我用ajax创建了一个插入模态表单。插入有效，但是验证无效，因此不会显示任何错误或警告。在涉及ajax.reload之前，我遇到了一个问题，但是当我使用来自stackoverflow的答案解决它时，在成功插入或无效插入（数据库错误）之后，页面会自动重新加载。我现在正在努力找出原因。 ajax部分中（数据）的控制台日志返回true。但是它并没有保留在控制台中，因为我认为页面会重新加载。我也尝试删除了ajax.reload（）部分，但没有任何反应。即使我删除了它，它也只是重新加载。
我使用e.preventDefault（）做了jaromanda建议的操作，但是，我的问题才浮出水面。 Ajax.reload无法正常工作，并显示“ jquery.dataTables.min.js：36 Uncaught TypeError：无法将属性'data'设置为null”
$("#form1").submit(function(e) {
var supp_code = $('#supp_code').val();
var address1 = $('#address1').val();
var address2 = $('#address2').val();
var country = $('#country').val();
var description = $('#description').val();
var tel_num = $('#tel_num').val();
var fax_num = $('#fax_num').val();
var contact_person = $('#contact_person').val();
var email = $('#email').val();
var consol_agent = $('#consol_agent').val();
var disc1 = $('#disc1').val();
var disc2 = $('#disc2').val();
var disc3 = $('#disc3').val();
var disc4 = $('#disc4').val();
var disc5 = $('#disc5').val();
var last_transaction = $('#last_transaction').val();
var old_supplier = $('#old_supplier').val();
var sfm_table = $('#datatable-buttons').DataTable();
// var validate_form = validate_inquiry_form(first_name,email_id);
// if(validate_form == true){
$.ajax({
url: '<?php echo base_url(); ?>SFM/insert',
type: 'post',
data: {
'supp_code': supp_code,
'address1': address1,
'address2': address2,
'country': country,
'description': description,
'tel_num': tel_num,
'fax_num': fax_num,
'contact_person': contact_person,
'email': email,
'consol_agent': consol_agent,
'disc1': disc1,
'disc2': disc2,
'disc3': disc3,
'disc4': disc4,
'disc5': disc5,
'last_transaction': last_transaction,
'old_supplier': old_supplier
},
success: function(data) {
if (data) {
sfm_table.ajax.reload()
$("#sfm_modal").modal('hide');
swal("Data Inserted", {
icon: "success"
});
} else {
swal("Error", {
icon: "error"
});
}
});
});function insert()
{
$data1 = array(
'SUPP_CODE'=> $this->input->post('supp_code'),
'ADDRESS'=> $this->input->post('address1'),
'ADDRESS2'=> $this->input->post('address2'),
'COUNTRY'=> $this->input->post('country'),
'DESCRIPTION'=> $this->input->post('description'),
'TEL_NO'=> $this->input->post('tel_num'),
'FAX_NO'=> $this->input->post('fax_num'),
'CONTACT'=> $this->input->post('contact_person'),
'EMAIL'=> $this->input->post('email'),
'CONS_AGENT'=> $this->input->post('consol_agent'),
'DISC1'=> $this->input->post('disc1'),
'DISC2'=> $this->input->post('disc2'),
'DISC3'=> $this->input->post('disc3'),
'DISC4'=> $this->input->post('disc4'),
'DISC5'=> $this->input->post('disc5'),
'LAST_TRANS'=> $this->input->post('last_transaction'),
'SUPP_CODE2'=> $this->input->post('old_supplier')
);
$insertReturn = $this->system_model->insert('fo_supp', $data1);
echo json_encode( $insertReturn);
}
<!-- page content -->
<div class="right_col" role="main">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Supplier Master File
<small></small>
</h2>
<ul class="nav navbar-right panel_toolbox">
<li>
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
<i class="fa fa-wrench"></i>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">Settings 1
</a>
</li>
<li>
<a href="#">Settings 2
</a>
</li>
</ul>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div style="overflow: hidden;">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#sfm_modal" style="float: right;">
<i class="material-icons"></i>
<span>Add New Data</span>
</button>
</div>
<table id="datatable-buttons" name="sfm_table" class="table table-striped table-bordered">
<thead>
<tr>
<th>Supplier Code
</th>
<th>Address
</th>
<th>Country
</th>
<th>Description
</th>
<th>Telephone Number
</th>
<th>Fax Number
</th>
<th>Contact Person
</th>
<th>Email
</th>
<th>Actions
</th>
<th>Consolidating Agent
</th>
<th>Discount 1
</th>
<th>Discount 2
</th>
<th>Discount 3
</th>
<th>Discount 4
</th>
<th>Discount 5
</th>
<th>Last Transaction
</th>
<th>Old Supplier
</th>
</tr>
</thead>
<tbody>
<?php if(!empty($fo_supp)): ?>
<?php foreach($fo_supp as $supp): ?>
<tr>
<td>
<?=$supp->SUPP_CODE?>
</td>
<td>
<?=$supp->ADDRESS." ".$supp->ADDRESS2?>
</td>
<td>
<?=$supp->COUNTRY?>
</td>
<td>
<?=$supp->DESCRIPTION?>
</td>
<td>
<?=$supp->TEL_NO?>
</td>
<td>
<?=$supp->FAX_NO?>
</td>
<td>
<?=$supp->CONTACT?>
</td>
<td>
<?=$supp->EMAIL?>
</td>
<td>
<a href="#sfm_modal_edit" data-target="#sfm_modal_edit" id='<?=$supp->SUPP_CODE?>' class="edit" data-toggle="modal">
<i class="material-icons" data-toggle="tooltip" title="Edit"></i>
</a>
<a href="#deleteEmployeeModal" class="delete" data-toggle="modal">
<i class="material-icons" data-toggle="tooltip" title="Delete"></i>
</a>
</td>
<td>
<?=$supp->CONS_AGENT?>
</td>
<td>
<?=$supp->DISC1?>
</td>
<td>
<?=$supp->DISC2?>
</td>
<td>
<?=$supp->DISC3?>
</td>
<td>
<?=$supp->DISC4?>
</td>
<td>
<?=$supp->DISC5?>
</td>
<td>
<?= $supp->LAST_TRANS ?>
</td>
<td>
<?=$supp->SUPP_CODE2?>
</td>
</tr>
<?php endforeach;?>
<?php else: ?>
<tr>
<?php for($i = 0; $i < 10; $i++): ?>
<td>
<span class="text-danger"> Not Available </span>
</td>
<?php endfor; ?>
</tr>
<?php endif; ?>
</tbody>
</table>
</div>
</div>
<!--MODAL HERE-->
<div class="modal fade" name="sfm_modal " id="sfm_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">
Create New Supplier
</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<form id="form1" class="form-horizontal">
<div class="form-group form-group-sm">
<!-- left column -->
<div class="col-sm-6">
<div class="form-group">
<label for="new_name" class="col-sm-2 control-label bg-danger" style="visibility: hidden;">Supplier Code</label>
<span class="label label-default">Supplier Code</span>
<div class="col-sm-10">
<input type="text" name="supp_code" id="supp_code" class="form-control" data-inputmask="'mask': '999999'">
</div>
</div>
<div class="form-group">
<label for="new_subname" class="col-sm-2 control-label" style="visibility: hidden;">Address</label>
<span class="label label-default">Address</span>
<div class="col-sm-10">
<input type="text" name="address1" class="form-control col-md-10" id="address1" placeholder="">
</div>
</div>
<div class="form-group">
<label for="new_address" class="col-sm-2 control-label bg-danger" style="visibility: hidden;">Address 2</label>
<span class="label label-default">Address 2</span>
<div class="col-sm-10">
<input type="text" name="address2" class="form-control col-md-10" id="address2" placeholder="">
</div>
</div>
<div class="form-group">
<label for="new_addresssub" class="col-sm-2 control-label" style="visibility: hidden;">Country</label>
<span class="label label-default">Country</span>
<div class="col-sm-10">
<input type="text" name="country" id="country" class="form-control col-md-10" />
</div>
</div>
<!-- <div class="form-group"><label for="new_zip" class="col-sm-2 control-label bg-danger" style = "visibility: hidden;">Description</label><span class="label label-default" >Supplier Code</span><div class="col-sm-3"><input type="text" class="form-control" id="new_zip" placeholder=""></div><div class="col-sm-7"><label for="new_zip_detail" class="sr-only" style = "visibility: hidden;">City, State Country</label><input type="text" class="form-control" id="new_zip_detail" placeholder="City, State Country" disabled=""></div></div> -->
<div class="form-group">
<label for="new_addresssub" class="col-sm-2 control-label" style="visibility: hidden;">Description</label>
<span class="label label-default">Description</span>
<div class="col-sm-10">
<input type="text" name="description" class="form-control" id="description" placeholder="">
</div>
</div>
<div class="form-group">
<label for="new_phone" class="col-sm-2 control-label" style="visibility: hidden;">Telephone Number</label>
<span class="label label-default">Telephone Number</span>
<div class="col-sm-10">
<input type="text" class="form-control" name="tel_num" id="tel_num" data-inputmask="'mask' : '(999) 999-9999'">
</div>
</div>
<div class="form-group">
<label for="new_phone" class="col-sm-2 control-label" style="visibility: hidden;">Fax Number</label>
<span class="label label-default">Fax Number</span>
<div class="col-sm-10">
<input type="text" class="form-control" name="fax_num" id="fax_num" data-inputmask="'mask' : '(999) 999-9999'">
</div>
</div>
<div class="form-group">
<label for="new_name" class="col-sm-2 control-label bg-danger" style="visibility: hidden;">Consolidating Agent</label>
<span class="label label-default">Consolidating Agent</span>
<div class="col-sm-10">
<input type="text" name="consol_agent" class="form-control" id="consol_agent" placeholder="">
</div>
</div>
</div>
<!-- right column -->
<div class="col-sm-6">
<div class="form-group">
<label for="new_subname" class="col-sm-2 control-label" style="visibility: hidden;">Email</label>
<span class="label label-default">Email</span>
<div class="col-sm-10">
<input type="text" class="form-control" name="email" id="email" placeholder="">
</div>
</div>
<div class="form-group">
<label for="new_name" class="col-sm-2 control-label bg-danger" style="visibility: hidden;">Contact Person</label>
<span class="label label-default">Contact Person</span>
<div class="col-sm-10">
<input type="text" class="form-control" name="contact_person" id="contact_person" placeholder="">
</div>
</div>
<div class="form-group">
<label for="new_subname" class="col-sm-2 control-label" style="visibility: hidden;">Discount 1</label>
<span class="label label-default">Discount 1</span>
<div class="col-sm-10">
<input type="text" class="form-control" name="disc1" id="disc1" placeholder="">
</div>
</div>
<div class="form-group">
<label for="new_address" class="col-sm-2 control-label bg-danger" style="visibility: hidden;">Discount 2</label>
<span class="label label-default">Discount 2</span>
<div class="col-sm-10">
<input type="text" class="form-control" name="disc2" id="disc2" placeholder="">
</div>
</div>
<div class="form-group">
<label for="new_addresssub" class="col-sm-2 control-label" style="visibility: hidden;">Discount 3</label>
<span class="label label-default">Discount 3</span>
<div class="col-sm-10">
<input type="text" class="form-control" name="disc3" id="disc3" placeholder="">
</div>
</div>
<div class="form-group">
<label for="new_phone" class="col-sm-2 control-label" style="visibility: hidden;">Discount 4</label>
<span class="label label-default">Discount 4</span>
<div class="col-sm-10">
<input type="phone" class="form-control" name="disc4" id="disc4" placeholder="">
</div>
</div>
<div class="form-group">
<label for="new_phone" class="col-sm-2 control-label" style="visibility: hidden;">Discount 5</label>
<span class="label label-default">Discount 5</span>
<div class="col-sm-10">
<input type="phone" class="form-control" name="disc5" id="disc5" placeholder="">
</div>
</div>
<div class="form-group">
<label for="new_phone" class="col-sm-2 control-label" style="visibility: hidden;">Last Transaction</label>
<span class="label label-default">Last Transaction</span>
<div class="col-sm-10">
<input type="text" class="form-control" name="last_transaction" id="last_transaction" data-inputmask="'mask': '9999/99/99'">
</div>
</div>
<div class="form-group">
<label for="new_phone" class="col-sm-2 control-label" style="visibility: hidden;">Old Supplier</label>
<span class="label label-default">Old Supplier</span>
<div class="col-sm-10">
<input type="phone" class="form-control" name="old_supplier" id="old_supplier" placeholder="">
</div>
</div>
</div>
</div>
</div>
<!-- End main input boxes, starting a new "row" -->
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default" id="newConsigneeReset">Reset</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" >Add</button>
</div>
<!-- End Modal Footer -->
</form>
</div>
<!-- End modal body div -->
</div>
<!-- End modal content div -->
</div>
<!-- End modal dialog div -->
</div>
<!-- End modal div -->
<!-- /page content -->