如何使用带有fullcalendar select回调的jQuery对话框？

Question

我对jQuery以及javascript的运行方式有一个基本的困惑.我一直有同样的问题,如何将参数传递给jQuery函数,以便他们的方法可以使用这些变量调用函数.这是我最近的例子:

我正在使用fullcalendar插件.如果我点击日历,它会触发一个回调方法'select'.select回调会自动给出一些参数:'startDate''endDate'等.我想要的是打开一个jQuery对话框来收集其他信息,然后将新事件发布到服务器.沿着这个方向:

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

在HTML中我有这样的事情:

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

最后,我想在对话框中添加一个按钮,将fullcalendar变量以及新变量发布到服务器:

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

我根本不明白如何构建它,或者放置代码的位置,以便对话框"保存"按钮"知道"变量'startDate''endDate'和'coolness'都意味着什么.我应该提一下,我原来是一名Java程序员,而且我仍在努力使用基于JavaScript函数的变量范围.

我有很多这样的jQuery方法存在这个问题,我想要一个方法指向一些外部函数(比如调用$ .dialog的select回调方法),然后执行另一个方法(比如调用$ .ajax的按钮回调方法)如何将参数传递给$ .ajax或$ .dialog,以便他们自己的方法可以使用这些值？

谢谢,

Answer 1

来自小提琴：

$(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>

我创建这个是为了回答另一个问题，但这清楚地演示了如何使用带有select回调的对话框。