Question

尝试利用fullcalendar.io填充一系列事件。我点击事件时，我的事件正在运行，回调函数也正常运行。

我想要做的是打开一个bootstrap模式，通过对我的php后端的ajax调用来填充它的内容区域。这将允许我在该模态窗口中显示事件详细信息。

以下是我最近的尝试：

        <!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div id="modal-body" class="modal-body">

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

    </div>
    </div>

    <!-- This file should primarily consist of HTML with a little bit of PHP. -->
    <div id='calendar'>

    </div>    

    <script>
        jQuery(document).ready(function () {

            // set up the modal to be an ajax pull.
            jQuery("#myModal").on("show.bs.modal", function(e) {
                var link = jQuery(e.relatedTarget);
                jQuery(this).find(".modal-body").load(link.attr("href"));
            });

            // set up the calendar
            jQuery('#calendar').fullCalendar({
               header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            height: 650,
            editable: false,
            eventLimit: true, // allow "more" link when too many events
            eventSources: [
              {
                url :'<?php echo esc_url( admin_url('admin-post.php') ); ?>',
                color: 'yellow',
                textColor: 'black',
                type: 'POST',
                data: {
                    action: 'fun_events_feed'
                }
              }
            ],          
            // toggle the display of the modal window when an event is clicked.
            eventClick: function(calEvent, jsEvent, view) {                                                          
                jQuery.get( '/fun-intra/event-data.php', null, function(data){
                    jQuery('#modal-body').html(data);
                    jQuery('#myModal').modal('toggle');
                });                
            },
            });
        });
    </script>

当尝试通过单击事件打开模态窗口时，控制台会发出此错误：

(index):183 Uncaught TypeError: jQuery(...).modal is not a function

我怀疑我有一个范围问题，有没有办法传入jquery选择的对象，以便我可以在.get回调中加载后切换模态的显示？一旦我完成了这项工作，我就可以轻松添加eventId所需的参数，以便我的后端可以获取正确的事件。

Answer 1

经过多次谷歌搜索，管理找到了昨晚的答案。

<script>
jQuery(document).ready(function () {

    // set up the calendar
    jQuery('#calendar').fullCalendar({
       header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    height: 650,
    editable: false,
    eventLimit: true, // allow "more" link when too many events
    eventSources: [
      {
        url :'<?php echo esc_url( admin_url('admin-post.php') ); ?>',
        color: 'yellow',
        textColor: 'black',
        type: 'POST',
        data: {
            action: 'fengate_events_feed'
        }
      }
    ],
    // toggle the display of the modal window when an event is clicked.
    eventClick: function(calEvent, jsEvent, view) {
        console.log(calEvent);
        jQuery("#modal-body").load('<?php echo esc_url( admin_url('admin-post.php') ); ?>?action=event_modal&id=' + calEvent.id);
        jQuery("#myModal").modal('toggle');
    },
    });
});

在fullcalendar事件单击上填充bootstrap 3模态窗口

1 个答案: