Ajax with laravel and jquery - php

Question

I am new to laravel and even more with ajax, I am trying to update from ajax but I can not do anything, it stays frozen and after a few seconds the url is updated with the data that happens to it, but in the base data nothing happens. If you could correct the code I would appreciate it because I am sure that this is the one that is giving problem because of my lack of experience, thank you very much
Route:
Route::name('appointments.update')->put('/appointment/$id', 'AppointmentController#update');
html:
<div class="modal fade" id="UpdateEventModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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" id="myModalLabel">Update</h4>
</div>
<form class="form-horizontal">
<div class="modal-body">
#include('appointments._form-appointments')
</div>
<div class="modal-footer">
<div class="col-md-12 form-group">
{{ Form::submit('Update',['class' => 'btn btn-primary','id' => 'btn-modal-update',]) }}
{{ Form::button('Close',['class' => 'btn btn-default', 'data-dismiss' => 'modal']) }}
</div>
</div>
</form>
</div>
</div>
ajax:
$(document).ready(function() {
$('#btn-modal-update').click(function(){
var id = $('#appointment_id').val();
var route="{{url('appointments.update')}}/"+id+"";
$.ajax({
type:'PUT',
headers:{"Authorization": localStorage.getItem('token')},
url:route,
dataType:'json',
data: {startTime: $('input#startTime').val(), finalTime: $('input#finalTime').val(), patient_id: $('select[name="patient_id"').val(),
user_id: $('select[name="user_id"').val(event.user_id), date: $('input#date').val(), appointment_id: $('#appointment_id').val()},
success:function(data){
if(data.success == 'true'){
alert('updated');
}
},
error:function(data){
alert('not updated');
}
});
});
});
controller:
public function update(Request $request, $id)
{
if($request->ajax()){
$appointment = Appointment::find($id);
$appointment->date = $request->date;
$appointment->startTime = $request->startTime;
$appointment->finalTime = $request->finalTime;
$appointment->clinic_id = $request->clinic_id;
$appointment->user_id = $request->user_id;
$appointment->patient_id = $request->patient_id;
$result = $appointment->save();
if (result) {
return response()->json(['success'=>'true']);
}
else{
return response()->json(['success'=>'false']);
}
}
}

Answer 1

You should change your event listener a little bit:
Listen to the submit() event on your form and make sure that you prevent the normal form submission by adding the following line at the end of the callback: return false;
If it still isn't doing anythin, check your console for error output.