Jak korzystać z okna dialogowego jQuery z funkcją fullcalendar wybierz oddzwanianie?

Question

Mam podstawowe wątpliwości dotyczące tego, jak działa jQuery i prawdopodobnie javascript. Wciąż mam ten sam problem, jak przekazywać parametry do funkcji jQuery, aby ich metody mogły wywoływać funkcje za pomocą tych zmiennych. Oto mój najnowszy przykład:

Używam wtyczki fullcalendar. Jeśli kliknę w kalendarz, uruchomi on metodę zwrotną "wybierz". Wybrane wywołanie zwrotne automatycznie otrzymuje określone parametry: "startDate" "endDate", itp. Chcę otworzyć okno dialogowe jQuery, aby zebrać dodatkowe informacje, a następnie opublikować nowe zdarzenie na serwerze. Wzdłuż linii to:

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

w html mam coś takiego:

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

końcu chciałbym dodać przycisk do okna aby umieścić zmienne fullcalendar jak również nowa zmienna na serwerze:

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') 
      } 
     } 
    } 
}); 

ja po prostu nie rozumiem, jak zbudować to, czy gdzie umieścić kod tak, że okno dialogowe przycisku „Zapisz” „wie”, co zmienne „startDate” „endDate” i "chłód "wszystko znaczy. Powinienem wspomnieć, że jestem pierwotnie programistą Java i wciąż mam problem z zakresem zmiennym opartym na funkcji JavaScript.

Miałem ten problem z wieloma takimi metodami jQuery, gdzie chcę jedną metodę wskazać na jakąś zewnętrzną funkcję (np. Wybraną metodę wywołania zwrotnego wywołującą $ .dialog), która z kolei wykonuje inną metodę (np. Jak wywołanie metody wywołania zwrotnego przycisku funkcja $ .ajax), ale w jaki sposób przekazujesz parametry do $ .ajax lub $ .dialog, aby ich własne metody mogły korzystać z tych wartości?

Dzięki,

Answer 1

Od 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 stworzył to za odpowiadanie kolejne pytanie, ale ten wyraźnie pokazuje, jak korzystać z okien dialogowych z select zwrotnego.

Answer 2

Rozwiązałem mój problem, w dużej mierze dzięki przykładowi ganeshka. Elementy DOM są dostępne dla wszystkich funkcji jQuery, gdziekolwiek w kodzie mogą być i jakiekolwiek inne zmienne są w ich zasięgu. Rozwiązałem problem, używając ukrytych danych wejściowych do przechowywania wartości wywołania zwrotnego fullCalendar, a następnie uzyskując do nich dostęp za pomocą funkcji $ .ajax(), aby opublikować dane na serwerze.

Zakładam, że tak się zwykle robi, chociaż wydaje się problematyczne. Czuje się tak nieprzyjemnie jak zanieczyszczanie globalnego zasięgu i obawiam się, że inne skrypty na stronie również mogą chcieć manipulować tymi danymi. Szkoda, że ​​nie było lepszego sposobu przekazywania parametrów do funkcji takich jak $ .dialog() i $ .ajax(), aby te wartości mogły być używane przez metody potomne. Jeśli tak, proszę dać mi znać. W przeciwnym razie to zadziała.