如何使用fullcalendar选择回调使用jQuery对话框？ [英] How to use jQuery dialog with fullcalendar select callback?
问题描述
我对jQuery以及javascript可能如何工作有一个基本的困惑。我一直有同样的问题，如何将参数传递给jQuery函数，以便他们的方法可以使用这些变量调用函数。这是我最近的例子：
我正在使用fullcalendar插件。如果我点击日历，它会触发一个回调方法'select'。 select回调会自动给出一些参数：'startDate''endDate'等。我想要的是打开一个jQuery对话框来收集附加信息，然后将新事件发布到服务器。沿着这条线：
$（'calendar'）。fullcalendar（{
...
select：function（startDate，endDate）{
$（'＃newEventPopup'）。dialog（'open'）;
在html中我有这样的内容：
< div title ='这个事件？'id ='newEventPopup'>
< select id ='coolness'>
< option value ='super'> Super！< / option>
< option value ='cool'>酷< / option>
< option value ='dorky'> Dorky< / option>
< option value ='lame'> Lame！ < / option>
< / select>
< / div>
p>最后，我想在对话框中添加一个按钮来将fullcalendar变量以及新变量发送到服务器：
$（'＃newEventPopup'）。dialog（{
modal： true，
autoOpen：false，
...
按钮：{
保存：function（）{
$ .ajax（{
url：' sample.php'
type：'POST'
data：{
'start'：startDate，
'end'：endDate，
'coolness'：coolness
}
成功：$（'calendar'）。fullCalendar（'refetchEvents'）
}
}
}
}）;
我根本不明白如何构建它，或者在何处放置代码，以便对话框'保存'按钮'知道'变量'startDate''endDate'和'coolness'意味着什么。我应该提到，我最初是一名Java程序员，并且仍在努力使用基于JavaScript功能的变量作用域。
我遇到过很多这种jQuery方法的问题，其中I想要一个方法指向一些外部函数（如调用$ .dialog的select回调方法），然后执行另一个方法（如调用$ .ajax函数的按钮回调方法），但是如何将参数传递给$ .ajax或$ .dialog，所以他们自己的方法可以使用这些值？
谢谢，
从小提琴：
$（document）.ready（function（）{$ myCalendar = $（'＃myCalendar'）。fullCalendar（{header：{left：'prev，next today'，center：'tit le'，right：''}，theme：true，selectable：true，selectHelper：true，height：500，select：function（start，end，allDay）{$（'＃eventStart'）。datepicker（setDate，新日期（开始））; $（'＃eventEnd'）。datepicker（setDate，new Date（end））; $（＃calEventDialog）对话框中（开放）。 }，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）; （'checked'，true）; // $（'＃allday [value ='+ calEvent.className ==gbcs-halfday-event？1：2+']'）。 $（'＃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： 删除，点击：function（）{$（this）.dialog（close）;}}，{text：取消，点击：function（）{$（this）.dialog（close）; }}]）; $（＃calEventDialog）。dialog（option，title，Edit Event）; $（＃calEventDialog）对话框（开放）。 }，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 = （）=＃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 //使事件stick）;} $ myCalendar.fullCalendar（取消选择）; $（本）.dialog（关闭）; }，取消：function（）{$（this）.dialog（'close'）; }}}）;}）;
< div id = calEventDialog > <形式> <字段集> < label for =eventTitle>标题< / label> < input type =textname =eventTitleid =eventTitle/>< br> < label for =eventStart>开始日期< / label> < input type =textname =eventStartid =eventStart/>< br> < label for =eventEnd>结束日期< / label> < input type =textname =eventEndid =eventEnd/>< br> < input type =radioid =alldayname =alldayvalue =1>半天< input type =radioid =alldayname =alldayvalue =2>全天< / fieldset> < / form>< / div>< div style =border：solid 2px red;> < div id ='myCalendar'>< / div>< / div>
我已经创建了这个用于回答另一个问题，但是这清楚地演示了如何使用选择回调的对话框。
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,
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.
这篇关于如何使用fullcalendar选择回调使用jQuery对话框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
