FullCalendar to load external file inside jQuery UI modal dialog box

Question

So I am trying to use FullCalendar and jQuery UI dialog box. And i'm not sure to sure how to go about placing the 2 together very well.

When I select or click on an empty day event, I want the jQuery Modal Dialog Box to pop up. ALTHOUGH I would like to have it load an internal file (php include). But the downfall with this is that I can't get it to close the dialog box when I get the form to submit

Also, by using this method I can't get it to pull the date that I clicked on to automatically fill in the start-date field.

What's the best route to go about mixing in the jQuery UI modal Dialog box with fullCalendar?

Any help would be appreciated. If possible is there a good method by loading an external file?

This is currently what I have:

select: function(start, end, date, allDay, jsEvent, view, calEvent) {
    $("#addEventDialog").dialog("open");

$("#addEventDialog").load('dialog.CalendarNewEvent.php').dialog({
    title: 'Add Event',
    modal: true,
    buttons: {
        "Save": function() {
           $("#calendarWidget2").ajaxSubmit({
                target: "#calendarResponse",
                dataType: 'json',
                clearForm: true,
                success: function(response, event) {
                    //If the widget says it's okay to refresh, refresh otherwise, consider it done
                    if(response.refreshEvents == '1') {
                      $("#calendar").fullCalendar("refetchEvents");
                    }
                    // Close the dialog box when it has saved successfully
                    $("#addEventDialog").dialog("destroy");
                    // Update the page with the reponse from the server
                    $("#calendarResponse").append("Successfully Added: "+ response.title +"<br />"); 

                },
                error: function() {
                    alert("Oops... Looks like we're having some difficulties.");    
                }
          }); // Close ajax submit
        },
        "Cancel": function() { $(this).dialog("close"); } 
    }, //End buttons
});

//alert("The inputs will work if i un-comment this alert");

/* UPDATE ALL THE VALUES IN THE DIALOG BOX */
$("#startDate").val($.fullCalendar.formatDate(start, 'yyyy/MM/dd'));
$("#endDate").val($.fullCalendar.formatDate(end, 'yyyy/MM/dd'));

},

So like my code mentions, when I use this code, nothing gets updated... but yet when I use an ALERT function where I have it placed right now, and make it actually live... the input values will get updated for some reason. It's almost as if the function is acting to fast to make the values apply, so when I have the alert stop in there, it makes it work.... any thoughts?

Answer 1

Here's how I call the dialog and populate it:

    $('#calendar').fullCalendar({ 
dayClick: function (date, allDay, jsEvent, view) {  
            $("#dialog").dialog('open');     
            $("#name").val("(event name)");
            $("#date-start").val($.fullCalendar.formatDate(date, 'MM/dd/yyyy'));
            $("#date-end").val($.fullCalendar.formatDate(date, 'MM/dd/yyyy'));
            $("#time-start").val($.fullCalendar.formatDate(date, 'hh:mmtt'));
            $("#time-end").val($.fullCalendar.formatDate(date, 'hh:mmtt')); 
    }, 
});

    $("#dialog").dialog({
        autoOpen: false,
        height: 350,
        width: 700,
        modal: true,
        buttons: {
            'Create event': function () {
                $(this).dialog('close');
            },
            Cancel: function () {
                $(this).dialog('close');
            }
        },

        close: function () {
        }

    });   

html

            <div id="dialog" class="event-dialog" title="Event">
            <div id="dialog-inner">
                <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all title"><br>
                <span class="inline"><input type="text" name="date-start" id="date-start" class="text ui-widget-content ui-corner-all"></span>
                <span class="inline"><input type="text" name="time" id="time-start" class="text ui-widget-content ui-corner-all"></span>
                <span class="inline">To:</span> <span class="inline"><input type="text" name="date" id="date-end" class="text ui-widget-content ui-corner-all"></span>
                <span class="inline"><input type="text" name="time" id="time-end" class="text ui-widget-content ui-corner-all"></span>
                <span class="inline">&nbsp;All day <input id="all-day" type="checkbox"></span> 
                <!--<label for="description">Description:</label> 
                <textarea name="description" id="description" class="text ui-widget-content ui-corner-all" rows="8" cols="73">       
</textarea>
            </div>
        </div>
        <div id="calendar"></div>

I can't speak to the php stuff without seeing it but it should work in theory. You can see that this example is a work in progress and not fully functional (post, get, etc).

Answer 2

Maybe try calling dialog as a function of .load():

 $("#addEventDialog").load("'dialog.CalendarNewEvent.php'", function() {  
          $("#addEventDialog").dialog({  
 title: 'Add Event',
    modal: true,
    buttons: {
        "Save": function() {
           $("#calendarWidget2").ajaxSubmit({
                target: "#calendarResponse",
                dataType: 'json',
                clearForm: true,
                success: function(response, event) {
                    //If the widget says it's okay to refresh, refresh otherwise, consider it done
                    if(response.refreshEvents == '1') {
                      $("#calendar").fullCalendar("refetchEvents");
                    }
                    // Close the dialog box when it has saved successfully
                    $("#addEventDialog").dialog("destroy");
                    // Update the page with the reponse from the server
                    $("#calendarResponse").append("Successfully Added: "+ response.title +"<br />"); 

                },
                error: function() {
                    alert("Oops... Looks like we're having some difficulties.");    
                }
          }); // Close ajax submit
        },
        "Cancel": function() { $(this).dialog("close"); } 
    }, //End buttons

});

I'm not sure if that's quite right but it might help. And a hat tip to this: http://www.coderanch.com/t/122420/HTML-JavaScript/JQuery-UI-Dialog-load-JavaScript