jquery - 如何将 jQuery 对话框与 fullcalendar 选择回调一起使用？

Question

我对 jQuery 以及 javascript 的工作原理有一个根本性的困惑。我一直遇到同样的问题，如何将参数传递给 jQuery 函数，以便它们的方法可以使用这些变量调用函数。这是我最近的例子:

我正在使用 fullcalendar 插件。如果我单击日历，它会触发回调方法“选择”。选择回调会自动给出某些参数:“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

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

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