Bootstrap modal call from fullcalendar event click

Question

I have a fullcalendar on my page. On it I have an add event button. That calls a javascript function that opens a modal view allowing the user to add an event.

function showAddMeeting() {
    var current_date = $('#calendar').fullCalendar('getDate');
    $("#modal").load('modal.php?type=meeting&action=add&date='+current_date);
}

This works perfectly. Now, I have another function to edit the meeting:

function showEditMeeting(meeting_id) {
    alert('modal.php?type=meeting&action=edit&id='+meeting_id);
    $("#modal").load('modal.php?type=meeting&action=edit&id='+meeting_id);
}

When I put this on the button, it works fine. But when I add it as a function to the event, it does not work.

eventClick: function(event) {
    showEditMeeting(event['id']);
}

When I click the event, I get the alert of the working link, but I never get a modal popover.

EDIT:

I've figured out it's because I'm not calling

 data-toggle="modal" data-target="#modal"

Does anybody know of how to call that through javascript?

Answer 1

Bootstrap has all the methods available for the modal in "modal.js", this is included in the minified pack.

You need to use it as follows.

Original

function showEditMeeting(meeting_id) {
    alert('modal.php?type=meeting&action=edit&id='+meeting_id);
    $("#modal").load('modal.php?type=meeting&action=edit&id='+meeting_id);
}

Becomes

function showEditMeeting(meeting_id) {
    alert('modal.php?type=meeting&action=edit&id='+meeting_id);
    $("#modal").load('modal.php?type=meeting&action=edit&id='+meeting_id).modal('show');
}

Notice the additional .modal('show');

Please note, I've not tested this code.

More information: http://getbootstrap.com/javascript/#modals-methods