带有laravel和jQuery的Ajax

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">&times;</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.