Uncaught TypeError: Cannot convert undefined or null to object error when using fullCalendar

Question

我正在尝试在 laravel 项目中创建一个 FullCalendar 并得到这个错误：

Uncaught TypeError: Cannot convert undefined or null to object
    at entries (<anonymous>)
    at e (jquery.min.js:4:7727)
    at Ab (jquery.min.js:4:7608)
    at Ab (jquery.min.js:4:7631)
    at Ab (jquery.min.js:4:7631)
    at Function.r.param (jquery.min.js:4:7918)
    at Function.ajax (jquery.min.js:4:12227)
    at Et.e.constructor.select (MyReservations:121:27)
    at constructor.publiclyTrigger (fullcalendar.min.js:9:16482)
    at Et.e.constructor.publiclyTrigger (fullcalendar.min.js:8:30673)

这是我的 blade

MyReservations.blade.php

<!DOCTYPE html>
<html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My Reservations</title>
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</head>
<body>




<!-- Modal -->
<div class="modal fade" style="text-transform: capitalize" id="ResModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Add New Reservation</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <!-- Room -->
                <select class="form-control" aria-label="Default select example" name="room_id" id="room_id" >
                    <option selected>Select Room</option>
                    @foreach($room as $items)
                        <option value="{{$items->id}}">{{$items->id}}</option>
                    @endforeach

                </select>
                <br>
                <!--  Title -->


                <div class="input-group">
                    <span class="input-group-text"> Title : </span>
                    <input class="form-control" aria-label="Title" name="title" id="title"></input>

                </div>
                <br>
                <!-- Objectif -->
                <div class="input-group">
                    <span class="input-group-text">Objectif :</span>
                    <textarea class="form-control" aria-label="Objectif" name="objectif" id="objectif"></textarea>
                </div>
             




            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" id="submit" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-12">
            <h3 class="text-center mt-5">My Reservations</h3>
            <div class="col-md-11 offset-1 mt-5 mb-5">

                <div id="calendar">

                </div>

            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>


    <script>

        $(document).ready(function() {

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

            var reservation = @json($events);
           $('#calendar').fullCalendar({
                editable:true,
                header:{
                    left:'prev,next today',
                    center:'title',
                    right:'month, agendaWeek, agendaDay'
                },
                events: reservation,
                selectable:true,
                selectHelper:true,
                select: function(start, end, allDay)
                {
                    $('#ResModal').modal('toggle');
                    $('#submit').click(function () {
                        var title =$('#title').val;
                        var start = moment(start).format('YYYY-MM-DD');
                        var end = moment(end).format('YYYY-MM-DD');
                        var objectif =$('#objectif').val;
                        var room_id =$('#room_id').val;


                    });

                        $.ajax({
                            url:"{{route('MyReservations.store')}}",
                            type:"POST",
                            data:{title, start, end, room_id, objectif},
                            success:function(response)
                            {
                               // MyReservations.fullCalendar('refetchEvents');
                               // alert("Added Successfully");
                                console.log(response)

                         },

                        })

                },

            });
        });

    </script>
</body>
</html>

这是我的控制器

我的控制器

 public function  index(){

        $events=array();
        $reservations = reservation::all();
        foreach ($reservations as $reservation){
            $events[] = [
                'title' =>$reservation->title,
                'start' =>$reservation->start,
                'end' =>$reservation->end,

//
//                'objectif' =>$reservation->objectif,
//                'room_id' =>$reservation->room_id,
//                'user_id' =>$reservation->user_id,
//                'stat' =>$reservation->stat,


            ];
        }
         $room=room::all();
        return view('/MyReservations', ['events'=>$events],compact('room'));
    }




    public function store(Request $request)
    {
        $request->validate([
            'title' =>'required|string',
            'objectif' =>'required|string',
            'room_id' =>'required',



        ]);
        $reservation =reservation::create ([
            'objectif' => $request->objectif,
            'start' => $request->start,
            'end' => $request->end,
            'stat' => $request->stat,
            'user_id' => Auth::user()->id,
            'room_id' => $request->room_id,
        ]);
        return response()->json($reservation);

    }

我是初学者，我正在学习教程，当我点击日历的一个正方形时，它会显示 bootstrap 模型（直到这里一切都很好），一旦我点击“保存更改”我遇到了这个问题我认为问题始于 $.ajax，以及 MyController

中的存储函数

我真的不知道问题出在哪里我正在看一个教程，我做的完全一样

注意：我的模型继续 $fillable 我有三个表（用户、预订和房间）

Answer 1

我认为基本上问题是 $.ajax({ 命令需要在 $('#submit').click(function () { ... }) 区域内。否则它会运行 AJAX 命令在 selection 完成后立即执行，无需等待用户输入任何内容或提交表单。

所以这意味着 click 区域中声明的变量，AJAX 试图依赖的区域，将不存在，这将解释关于“未定义”变量的错误.

它应该看起来像这样：

select: function(start, end, allDay)
{
  $('#ResModal').modal('toggle');  
  $('#submit').off("click");

  $('#submit').on("click", function () {
    var title = $('#title').val;
    var start = moment(start).format('YYYY-MM-DD');
    var end = moment(end).format('YYYY-MM-DD');
    var objectif = $('#objectif').val;
    var room_id = $('#room_id').val;

    $.ajax({
      url:"{{route('MyReservations.store')}}",
      type:"POST",
      data:{title, start, end, room_id, objectif},
      success:function(response)
      {
        // MyReservations.fullCalendar('refetchEvents');
        // alert("Added Successfully");
        console.log(response)
      },
    })
  });
}

请注意，我还稍微修改了“点击”处理程序并在它之前添加了一个 .off 调用。这样一来，如果您随后 select 另一个区域，然后是另一个区域，它不会添加越来越多的“点击”处理程序而不删除以前的处理程序 - 因为如果您没有删除它们，那么当提交模态后，它将运行所有添加的处理程序（每次有一个 selection 一个）和 re-submit 较早的事件数据到服务器，导致存储重复数据。

Uncaught TypeError: Cannot convert undefined or null to object error when using fullCalendar

Uncaught TypeError: Cannot convert undefined or null to object error when using fullCalendar

javascript

jquery

json

laravel

fullcalendar