在fullcalendar事件点击时填充bootstrap 3模态窗口

Question

Trying to leverage fullcalendar.io to populate a series of events. I've got my events working and the callback function when an event is clicked functioning as well.

What I want to do is open a bootstrap modal that will populate it's content area with an ajax call to my php backend. This will allow me to display the event details in that modal window.

Below is my latest attempts at making this work:

        <!-- 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>

when trying to open the modal window with an event click, the console spits out this error:

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

I suspect I have a scoping issue, is there a way to pass in the jquery selected object so that I can toggle the display of the modal AFTER it has loaded within the .get callback? Once I have this working then I can easily add in the required parameters of the eventId so that my backend can fetch the correct event.

Answer 1

Managed to find the answer last night after much google searching.

<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');
    },
    });
});