如何使用fullcalendar選擇回調使用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「結束日期」和'涼爽「都是說。我應該提到我最初是一名Java程序員，而且我仍然在努力使用基於JavaScript函數的變量作用域。

我有很多這樣的jQuery方法，我想要一個方法指向一些外部函數（如選擇回調方法調用$ .dialog），然後執行另一個方法（就像按鈕回調方法調用$ .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回調。

Answer 2

我已經解決了我的問題，這在很大程度上歸功於ganeshk的例子。 DOM元素可用於所有jQuery函數，無論它們在哪個代碼中，以及其他變量是否在其範圍內。我通過使用隱藏的輸入來保存fullCalendar回調的值，然後通過$ .ajax（）函數訪問它們以將數據發佈到服務器來解決問題。

我認爲這是通常的做法，雖然它似乎有問題。這種感覺很不舒服，就像污染全球範圍一樣，我擔心頁面上的其他腳本可能也想操縱這些數據。我希望有更好的方法將參數傳遞給像$ .dialog（）和$ .ajax（）這樣的函數，以便這些值可以被子方法使用。如果有，請告訴我。否則，這將起作用。