How to use jQuery dialog with fullcalendar select callback?

Question

I have a fundamental confusion about how jQuery, and probably javascript work. I keep having the same issue, how to pass parameters to jQuery functions so that their methods in turn can call functions using those variables. Here is my most recent example:

I am using fullcalendar plugin. If I click on the calendar, it fires a callback method 'select'. The select callback is automatically given certain parameters: 'startDate' 'endDate', etc. What I want is to open a jQuery dialog to gather additional information and then post the new event to the server. Along the lines of this:

$('calendar').fullcalendar({
...
select: function (startDate, endDate) {
    $('#newEventPopup').dialog('open');

in the html I have something like this:

<div title = 'How cool is this event?' id='newEventPopup'>
    <select id='coolness'>
        <option value = 'super'>Super!</option>
        <option value = 'cool'>Cool</option>
        <option value = 'dorky'>Dorky</option>
        <option value = 'lame'>Lame!</option>
    </select>
</div>

finally, I would like to add a button to the dialog to post the fullcalendar variables as well as the new variable to the server:

var coolness = $('#coolness');
$('#newEventPopup').dialog({
    modal: true,
    autoOpen: false,
    ...
    button: {
        Save : function (){
            $.ajax({
                url: 'sample.php'
                type: 'POST'
                data: {
                    'start' : startDate,
                    'end' : endDate,
                    'coolness' : coolness
                 }
                 success: $('calendar').fullCalendar('refetchEvents')
             }
         }
     }
});

I simply don't understand how to build this, or where to place the code so that the dialog 'save' button 'knows' what the variables 'startDate' 'endDate' and 'coolness' all mean. I should mention that I am originally a Java programmer, and I am still struggling with JavaScript function based variable scope.

I have had this problem with many such jQuery methods where I want one method to point to some external function (like the select callback method invoking $.dialog) which in turn executes another method (like like the button callback method invoking the $.ajax function) but how do you pass parameters to $.ajax or $.dialog so their own methods can use those values?

Thanks,

Answer 1

From fiddle:

$(document).ready(function() {
    $myCalendar = $('#myCalendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: ''
        },
        theme: true,
        selectable: true,
        selectHelper: true,
        height: 500,
        select: function(start, end, allDay) {
            $('#eventStart').datepicker("setDate", new Date(start));
            $('#eventEnd').datepicker("setDate", new Date(end));
            $('#calEventDialog').dialog('open');
        },
        eventClick: function(calEvent, jsEvent, view) {
            $('#eventStart').datepicker("setDate", new Date(calEvent.start));
            $('#eventEnd').datepicker("setDate", new Date(calEvent.end));
            $('#calEventDialog #eventTitle').val(calEvent.title);
            //                    alert(calEvent.className);
            //                alert(calEvent.className=="gbcs-halfday-event"?"1":"2");
            //                    $('#allday[value="' + calEvent.className=="gbcs-halfday-event"?"1":"2" + '"]').prop('checked', true);
            $('#calEventDialog #allday').val([calEvent.className == "gbcs-halfday-event" ? "1" : "2"]).prop('checked', true);
            $("#calEventDialog").dialog("option", "buttons", [
                {
                text: "Save",
                click: function() {
                    $(this).dialog("close");
                }},
            {
                text: "Delete",
                click: function() {
                    $(this).dialog("close");
                }},
            {
                text: "Cancel",
                click: function() {
                    $(this).dialog("close");
                }}
            ]);
            $("#calEventDialog").dialog("option", "title", "Edit Event");
            $('#calEventDialog').dialog('open');
        },
        editable: true
    });
    
    var title = $('#eventTitle');
    var start = $('#eventStart');
    var end = $('#eventEnd');
    var eventClass, color;
    $('#calEventDialog').dialog({
        resizable: false,
        autoOpen: false,
        title: 'Add Event',
        width: 400,
        buttons: {
            Save: function() {
                if ($('input:radio[name=allday]:checked').val() == "1") {
                    eventClass = "gbcs-halfday-event";
                    color = "#9E6320";
                    end.val(start.val());
                }
                else {
                    eventClass = "gbcs-allday-event";
                    color = "#875DA8";
                }
                if (title.val() !== '') {
                    $myCalendar.fullCalendar('renderEvent', {
                        title: title.val(),
                        start: start.val(),
                        end: end.val(),
                        allDay: true,
                        className: eventClass,
                        color: color
                    }, true // make the event "stick"
                    );
                }
                $myCalendar.fullCalendar('unselect');
                $(this).dialog('close');
            },
            Cancel: function() {
                $(this).dialog('close');
            }
        }
    });
});

<div id="calEventDialog">
    <form>
        <fieldset>
        <label for="eventTitle">Title</label>
        <input type="text" name="eventTitle" id="eventTitle" /><br>
        <label for="eventStart">Start Date</label>
        <input type="text" name="eventStart" id="eventStart" /><br>
        <label for="eventEnd">End Date</label>
        <input type="text" name="eventEnd" id="eventEnd" /><br>
        <input type="radio" id="allday" name="allday" value="1">
        Half Day
        <input type="radio" id="allday" name="allday" value="2">
        All Day
        </fieldset>
    </form>
</div>
<div style="border:solid 2px red;">
        <div id='myCalendar'></div>
</div>

I had created this for answering another question, but this clearly demonstrates how to use dialogs with the select callback.

Answer 2

I have solved my problem, thanks in large part to ganeshk's example. The DOM elements are available to all jQuery functions, wherever in the code they may be and whatever other variables are within their scope. I have solved the problem by using hidden inputs to hold the values of fullCalendar callback, and then accessing them from the $.ajax() function to post the data to the server.

I assume this is how it is usually done, although it seems problematic. This feels uncomfortably like polluting the global scope and I worry that other scripts on the page might want to manipulate this data as well. I wish there was a better way of passing parameters to functions like $.dialog() and $.ajax() so that those values could be used by child methods. If there is, please let me know. Otherwise, this will work.