Logging status of lesson to db when vimeo video complete via ajax and jquery

Question

I am attempting to log data to my database when a vimeo video completes to in the end track students/employees time in a course as well determine when they have completed the course. I am lost when it comes to js and ajax. Below is what I have tried so far. I am using laravel 5.6.

If someone could even just point me into the right direction that would help tremendously.

    @extends('layouts.app')

@section('page-title', trans('app.dashboard'))
@section('page-heading', trans('app.dashboard'))

@section('breadcrumbs')
<li class="breadcrumb-item active">
    @lang('Companies')
</li>
@stop

@section('content')

@include('partials.toastr')
<div class ="row justify-content-md-center">
    <div class='col-lg-6 '>

        <iframe id="display" style="width:100%; height:360px;overflow:auto;" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>


    </div>

</div>
<div class = "row">

    <div class="col-lg-8 col-md-12">
    <h2>Course Lessons</h2>  
    @include('courses.partials.lessons')
    </div>

    @permission('online.instructor.menu')
    <div class="col-lg-4 col-md-12">

        @include('courses.partials.instructor_menu')

    </div>


    <div class="modal fade" id="modalLoginForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header text-center">
                <h4 class="modal-title w-100 font-weight-bold">Add New Lesson</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body mx-3">
                {!! Form::open(['route' => 'lesson.store', 'id' => 'lesson-form']) !!} 
                <div class="md-form mb-5">
                    <i class="fa fa-compass prefix grey-text"></i>
                    <input type="hidden" id="course_id" name="course_id" class="form-control validate" value="{{$course->id}}">

                </div>

                <div class="md-form mb-5">
                    <i class="fa fa-compass prefix grey-text"></i>
                    <input type="text" id="title" name="title" class="form-control validate">
                    <label data-error="wrong" data-success="right" for="title">Lesson Title</label>
                </div>

                <div class="md-form mb-5">
                    <i class="fa fa-sort prefix grey-text"></i>
                    <input type="text" id="order" name="order" class="form-control validate">
                    <label data-error="order" data-success="order" for="title">Number order to diplay.</label>
                </div>

                <div class="md-form mb-5">
                    <i class="fa fa-film prefix grey-text"></i>
                    <input type="text" id="content" name="content" class="form-control validate">
                    <label data-error="wrong" data-success="right" for="title">Lesson Content</label>
                </div>

            </div>
            <div class="modal-footer d-flex justify-content-center">
                <button class="btn btn-primary">Add Lesson</button>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
</div>

    @endpermission




</div>

@stop

@section('styles')

@stop

@section('scripts')

<script>


    function onFinish() {
        status.text('finished');

            $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $(document).ready(function(){
        $('#form').submit(function (e) {
            e.preventDefault(); //**** to prevent normal form submission and page reload

            $.ajax({
                type : 'POST',
                url : '{{route('lesson.completed')}}',
                data : {
                    lesson: val({{$lesson->id}}),
                    user: val({{$auth->user-id}}),
                    time: val({{date('Y-m-d h:i:s')}})
                },
                success: function(result){
                    console.log(result);
                    $('#head').text(result.status);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    //alert(xhr.status);
                    //alert(thrownError);
                }
            });
        });
    });
    }

});
</script>

@stop

Answer 1

It appeared I had an error in my js, I rewrote the function and now have it working.

<script>
        $(function() {
            var iframe = $('#display')[0];
            var player = $f(iframe);
            var lesson_id='';
            var lesson_complate_id='';
            // When the player is ready, add listeners for pause, finish, and playProgress
            player.addEvent('ready', function() {
                player.addEvent('pause', onPause);
                player.addEvent('finish', onFinish);
                player.addEvent('playProgress', onPlayProgress);
            });
            $('button').bind('click', function() {
                lesson_id=$(this).data('id');
            });
            function onFinish() {
                console.log('finished');
                $.ajaxSetup({
                    headers: {
                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                      'X-Requested-With': 'XMLHttpRequest'
                    }
                });
                $.ajax({
                    url: '{{route('lesson.complete')}}',
                    method: 'POST',
                    data:  {
                        lesson: lesson_id,
                        user: {{Auth::user()->id}},
                        course: {{$course->id}},

                    },
                    success: function(res){
                        lesson_complate_id ="#lesson_complate_id"+lesson_id;
                        $(lesson_complate_id).attr('class', 'badge badge-success');
                        $(lesson_complate_id).text('Completed')
                    }
                });
            }

    </script>