fullcalendar open event using Bootstrap Modal

Question

I'm opening fullcalendar events with bootstrap modal using this example : ( http://www.mikesmithdev.com/blog/fullcalendar-event-details-with-bootstrap-modal/ )

It works perfectly.

Now that the event is opened, I don't know how to go about to retrieve the information of that event. Let me explain, the event is linked in my database (mysql) with some other information and other tables. In that modal popup i would like to show linked information.

I was thinking that this would work : (in my main page i have this)

element.click(function() {
//set the modal values and open
$('#modalTitle').html(event.title);
$('#modalBody').html(event.description);
$('#eventUrl').attr('href',event.url);
$('#fullCalModal').modal();
var my_variable = event.id; // here i take the event id

$.ajax({
url: 'ajax.php',
data: { var_PHP_data : my_variable },
type: "GET"
// here i send my id to my ajax page
});

Then in my ajax.php page I would simply do :

$event_id = $_GET['var_PHP_data'];

And in my main page where the modal popup is displayed i would simply do :

<?php 

include("ajax.php");

echo $event_id;

?>

But that doesnt work because it's within the same page, and ajax is for remote pages.

So is there a way to retrieve in that popup modal the event id ?

for example I would like to do something like this in my modal

<div id="fullCalModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button>
                <h4 id="modalTitle" class="modal-title"></h4>
            </div>
            <div id="modalBody" class="modal-body">
            <?php
$event_id = $_GET['event_id'];

//the use this event for mysql operations...

            ?>

Answer 1

You have a couple of options (though I'm a little confused because you can already set the event id in the modal window with something like $('#modalBody').html(event.id); )

1) I think the most efficient would be to just send back all the necessary event data in your event source. You are already passing extra data like the description . You can add any extra fields you want to your source and then just pass it directly into the modal with event.SomeDataField . Customize that modal popup however you wish and add whatever extra fields you want. This would be the ideal way because there is no need for AJAX for extra database calls.

2) If there is too much data to pass and your events source would be too big if it were included, or you can't efficiently build that extra data into your source due to your database schema, then AJAX could work to retrieve the extra data. Just move all of the modal code inside the AJAX call so you set the values of the modal with the data you retrieved from the AJAX call. Something like:

element.click(function() {    
    $.ajax({
        url: 'ajax.php',
        data: { var_PHP_data : event.id },
        type: "GET"
    }).done(function(data) {
        $('#modalTitle').html(event.title);
        $('#modalBody').html(data.extraDetails); //or whatever fields you are returning
        $('#eventUrl').attr('href',event.url);
        $('#fullCalModal').modal();
    });

3) If your modal window layout is getting too complex to easily manage, then consider templating the layout and return the needed HTML either from an AJAX call, or just make the content of the modal an iFrame and set the iFrame source on the element click event.