Question

目前有一个FullCalendar应用程序，可以跟踪约会。最近改变了布局，以某种方式帮助我的对话工作。因此，每当我点击日历上的约会时，它都会在对话框中显示详细信息。

我已经切换了一些东西，现在它不起作用，在Unhandled exception at line 214, column 25 in http://localhost:9755/Account/Login?ReturnUrl=/Appointments/Calendar 0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'modal' occurred

的Internet Explorer上出现

我99％肯定我的布局页面中的内容已经放入。

长期以来一直在破坏我的头脑。这是我的日历页面：

    <div id="calendar"></div>

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"><span id="eventTitle"></span></h4>
            </div>
            <div class="modal-body">
                <button id="btnDelete" class="btn btn-default btn-sm pull-right">
                    <span class="glyphicon glyphicon-remove"></span> Remove
                </button>
                <button id="btnEdit" class="btn btn-default btn-sm pull-right" style="margin-right:5px;">
                    <span class="glyphicon glyphicon-pencil"></span> Edit
                </button>
                <p id="pDetails"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>


@*<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css" rel="stylesheet" />*@
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.print.css" rel="stylesheet" media="print" />

@section Scripts{
    <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>
        $(document).ready(function () {
            var events = [];
            $.ajax({
                type: "GET",
                url: "/Appointments/GetEvents",
                success: function (data) {
                    $.each(data, function (i, v) {
                        events.push({
                            details: v.DetailsOfAppointment,
                            date: moment(v.DateOfAppointment),
                            room: v.RoomType,
                            confirmed: v.Confirmed,
                            colour: v.ThemeColour,
                            church: v.Church.Name,
                            parishAdminName: v.Admins.AdministratorName,
                            parishAdminUser: v.Admins.AdminUsername,
                            parishAdminId: v.Admins.AdministratorId,
                            fee: v.Fee,
                            id: v.AppointmentId
                        });

                    })
                     GenerateCalender(events);   
                },
                error: function (error) {
                    alert("failed");
                    console.log(error);
                }
            })

            function GenerateCalender(events) {
                $('#calendar').fullCalendar('destroy');
                $('#calendar').fullCalendar({
                    contentHeight: 500,
                    defaultDate: new Date(),
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'month,basicWeek,basicDay'
                    },
                    timeFormat: 'HH:mm',
                    eventLimit: true,
                    eventColor: events.ThemeColour,
                    events: events,
                    eventRender: function (event, element) {
                        if (event.fee == null) {
                            if (event.confirmed == false) {
                                element.css('background-color', '#FF0000');
                                element.css('border-color', '#FF0000');
                            }
                            else {
                                element.css('background-color', '#008000');
                                element.css('border-color', '#008000');
                            }
                        }
                        else
                        {
                            element.css('background-color', '#0000FF');
                            element.css('border-color', '#0000FF');

                        }
                    },
                    eventClick: function (calEvent, jsEvent, view) {
                        $('#myModal #details').text(calEvent.details);
                        var $details = $('<div/>');

                        if (calEvent.fee != null) {
                            $details.append($('<p/>').html('<b>Date of Ceremony : </b>' + calEvent.date.format("DD-MMM-YYYY HH:mm a")));
                        }
                        else {
                            $details.append($('<p/>').html('<b>Date of Appointment : </b>' + calEvent.date.format("DD-MMM-YYYY HH:mm a")));
                        }
                        if (calEvent.end != null) {
                            $details.append($('<p/>').html('<b>End:</b>' + calEvent.end.format("DD-MMM-YYYY HH:mm a")));
                        }
                        $details.append($('<p/>').html('<b>Details : </b>' + calEvent.details));
                        $details.append($('<p/>').html('<b>Church Name : </b>' + calEvent.church));
                        if (calEvent.fee == null) {
                            if (calEvent.room != null) {
                                $details.append($('<p/>').html('<b>Room : </b>' + calEvent.room));
                            }
                            else {
                                $details.append($('<p/>').html('<b>Room Not Confirmed'));
                            }
                        }


                        $details.append($('<p/>').html('<b>Parish Admin : </b>' + calEvent.parishAdminName));
                        if (calEvent.confirmed == true)
                        {
                            $details.append($('<p/>').html('<b>Status : Confirmed </b>'));
                        }
                        else
                        {
                            $details.append($('<p/>').html('<b>Status : Not Confirmed </b>'));
                        }
                        $('#myModal #pDetails').empty().html($details);

                        $('#myModal').modal();
                    }

                })
            }
        })
    </script>
}

我的布局页面，我认为问题在于。

<head>

@Styles.Render("~/Content/Site.css")

@Styles.Render("~/Content/jquery.datetimepicker.css")
@Scripts.Render("~/bundles/modernizr")
@Styles.Render("~/Content/fullcalendar.css")

<meta charset="utf-8" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

这是我使用F12后的google片段

Answer 1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

我认为两次包含脚本是没有用的。因此，从布局页面中删除脚本

jQuery和Bootstrap对话框没有出现

1 个答案: