6

我对 jQuery 以及可能是 javascript 的工作方式有一个基本的困惑。我一直有同样的问题，如何将参数传递给 jQuery 函数，以便它们的方法反过来可以使用这些变量调用函数。这是我最近的例子：

我正在使用全日历插件。如果我点击日历，它会触发一个回调方法“选择”。选择回调会自动给出某些参数：'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 的选择回调方法），而后者又执行另一种方法（例如调用 $.ajax 的按钮回调方法）函数）但是如何将参数传递给 $.ajax 或 $.dialog 以便他们自己的方法可以使用这些值？

谢谢，

4

2 回答 2

2

从小提琴：

$(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回调的对话框。

于 2012-09-18T20:55:46.477 回答
1

我已经解决了我的问题，这在很大程度上要归功于 ganeshk 的示例。DOM 元素可用于所有 jQuery 函数，无论它们在代码中的什么位置，以及它们范围内的任何其他变量。我通过使用隐藏输入来保存 fullCalendar 回调的值，然后从 $.ajax() 函数访问它们以将数据发布到服务器，从而解决了这个问题。

我认为这是通常的做法，尽管它似乎有问题。这感觉就像污染全局范围一样不舒服，我担心页面上的其他脚本也可能想要操纵这些数据。我希望有更好的方法将参数传递给 $.dialog() 和 $.ajax() 等函数，以便子方法可以使用这些值。如果有，请告诉我。否则，这将起作用。

于 2012-09-19T17:54:21.817 回答