I am trying to make a ajax request to store some information in my database.Everything goes well until I need to refresh my table, and some nasty errors appears.
Here is my html modal
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#create-subscription-modal">
Create subscription
</button>
<!-- Modal -->
<div class="modal fade" id="create-subscription-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Create subscription</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="{{ route('subscriptions.store') }}" method="post">
@csrf
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" class="form-control" name="name">
</div>
<div class="form-group">
<label for="type">Type</label>
<select id="type" class="form-control" name="type">
<option value="unlimited">Unlimited</option>
<option value="sessions">Sessions</option>
</select>
</div>
<div class="form-group">
<label for="sessions">Sessions</label>
<input type="number" id="sessions" class="form-control" name="sessions">
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea id="description" class="form-control" cols="30" rows="6" name="description"></textarea>
</div>
<div class="form-group">
<label for="price">Price</label>
<input type="text" id="price" class="form-control" name="price">
</div>
<div class="form-group">
<label for="is_active">Active
<input id="is_active" type="checkbox" name="is_active" checked/>
</label>
</div>
<div class="form-group">
<button type="submit" id="create-subscription" class="btn btn-primary">Create</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Ajax call script
<script>
$(document).ready(function() {
$('#create-subscription').click(function(event) {
event.preventDefault();
let name = $('#name').val();
let type = $('#type').val();
let sessions = $('#sessions').val();
let description = $('#description').val();
let price = $('#price').val();
// let is_active = $('#is_active').val();
let token = $('input[name="_token"]').val();
let table = $('#example1').DataTable( {
ajax: "data.json"
} );
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': token
}
});
$.ajax({
type: "post",
url: "{{ route('subscriptions.store') }}",
data: {name: name, type: type, sessions: sessions, description: description, price: price},
dataType: "json",
success: function(data) {
alert('It works!');
$('#create-subscription-modal').modal('hide');
table.ajax.reload();
},
error: function(data) {
console.log('Error: ' + data);
}
});
});
});
</script>
Controller code to handle request
public function store(Request $request)
{
$name = $request->name;
$type = $request->type;
$sessions = $request->sessions;
$description = $request->description;
$price = $request->price;
$subscription = Subscription::create([
'name' => $name,
'type' => $type,
'sessions' => $sessions,
'description' => $description,
'price' => $price,
]);
return $subscription;
}
I don't know what to do to solve this problem, please help me if it is possible.Im stuck with this.Thank you so much!
Sorry for not showing any pictures, here are my errors.
And even if I have table.ajax.reload() it does not reload the datatable, and one more thing (I need to refresh the page manually), If I try to dd(request->all()) in my controller, it calls the error ajax object.
Try this code in most cases its work for latest version of DataTable.
table.ajax.reload( null, false );//instead of table.ajax.reload()
Referenced from here: https://datatables.net/reference/api/ajax.reload(). If it does not work please insure server side is working properly and kindly check your jquery DataTables version.
If its not work