fullcalendar selectコールバックでjQueryダイアログを使用するには？

Question

私はjQuery、おそらくjavascriptの動作について根本的な混乱があります。同じ問題、jQuery関数にパラメータを渡す方法、そのメソッドがこれらの変数を使って関数を呼び出すことができるようにしています。ここに私の最新の例があります：

私はfullcalendarプラグインを使用しています。カレンダーをクリックすると、コールバックメソッド 'select'が発生します。 selectコールバックには自動的に特定のパラメータが与えられます： 'startDate' 'endDate'などです。私が望むのは、jQueryダイアログを開いて追加情報を収集し、新しいイベントをサーバーにポストすることです。この線に沿って：

<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変数と同様に投稿するダイアログにボタンを追加したいと思います。HTMLで

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

私はこのような何かを持っていますサーバーへの新しい変数：

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に」「を知っている」ようにコードを配置しますとクールネス'すべての意味。もともと私はJavaプログラマであり、私はまだJavaScript関数ベースの変数スコープに苦しんでいると言及する必要があります。

このようなjQueryメソッドでは、（コールバックメソッドが$ .dialogを呼び出すような）いくつかの外部関数を指し示し、別のメソッドを実行するようなメソッドが必要になりました（ボタンコールバックメソッドのように$ .ajax関数）、どのように$ .ajaxや$ .dialogにパラメータを渡して、独自のメソッドでそれらの値を使用できるのでしょうか？

おかげで、fiddleから

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コールバックでダイアログを使用する方法を示します。

Answer 2

ガネーシュクの例のおかげで、私は私の問題を解決しました。 DOM要素は、コード内のどこにあっても、またスコープ内にある他の変数があれば、すべてのjQuery関数で使用できます。私は、隠された入力を使用してfullCalendarコールバックの値を保持し、$ .ajax（）関数からアクセスしてデータをサーバーにポストすることで問題を解決しました。

問題があるように見えますが、これは通常どのように行われているかを想定しています。これは地球規模の範囲を汚染するような不快感を感じています。私は、ページ上の他のスクリプトもこのデータを操作したいと思うかもしれないと心配しています。私は、$ .dialog（）や$ .ajax（）のような関数にパラメータを渡すより良い方法があって、それらの値が子メソッドで使用できるようにしたいと考えています。もしあれば教えてください。それ以外の場合、これは動作します。