Füllen eines Bootstrap 3 modales Fenster auf Vollkalender Ereignis klicken

Question

Versuchen, Fullcalendar.io zu nutzen, um eine Reihe von Ereignissen zu füllen. Ich habe meine Ereignisse funktioniert und die Callback-Funktion, wenn ein Ereignis angeklickt wird funktioniert auch.

Was ich tun möchte, ist ein Bootstrap-Modal zu öffnen, das seinen Inhaltsbereich mit einem AJAX-Aufruf an mein PHP-Backend füllen wird. Dadurch kann ich die Ereignisdetails in diesem modalen Fenster anzeigen.

Unten ist mein neuester Versuch zu machen, diese Arbeit:

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

beim Versuch, das modale Fenster mit einem Ereignisse Klick zu öffnen, wird die Konsole spuckt diesen Fehler:

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

ich vermute mich, Haben Sie ein Scoping-Problem, gibt es eine Möglichkeit, das ausgewählte jquery-Objekt zu übergeben, so dass ich die Anzeige des modalen AFTER, das geladen wurde, innerhalb des .get-Callbacks umschalten kann? Sobald ich das funktioniere, kann ich einfach die erforderlichen Parameter der eventId hinzufügen, so dass mein Backend das richtige Ereignis abrufen kann.

Answer 1

verwaltet, um die Antwort letzte Nacht nach viel Google-Suche zu finden.

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