Come utilizzare la finestra di dialogo jQuery con fullcalendar selezionare la richiamata?

Question

Ho una confusione fondamentale su come jQuery e probabilmente lavoro JavaScript. Continuo ad avere lo stesso problema, come passare i parametri alle funzioni jQuery in modo che i loro metodi a loro volta possano chiamare funzioni utilizzando tali variabili. Ecco il mio esempio più recente:

Sto utilizzando il plug-in fullcalendar. Se clicco sul calendario, si attiva un metodo di callback 'seleziona'. Il callback selezionato riceve automaticamente determinati parametri: 'startDate' 'endDate', ecc. Quello che voglio è aprire una finestra di dialogo jQuery per raccogliere ulteriori informazioni e quindi postare il nuovo evento sul server. Lungo le linee di questo:

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

in html ho qualcosa di simile:

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

infine, vorrei aggiungere un pulsante alla finestra di dialogo per l'invio delle variabili fullcalendar così come il nuova variabile al 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') 
      } 
     } 
    } 
}); 

ho semplicemente non capisco come costruire questo, o dove posizionare il codice in modo che la finestra di dialogo 'Salva' pulsante 'sa' che cosa le variabili 'startDate' 'endDate' e 'fresco 'tutto dire. Devo dire che sono originariamente un programmatore Java e sto ancora lottando con l'ambito delle variabili basate sulla funzione JavaScript.

Ho riscontrato questo problema con molti di questi metodi jQuery in cui voglio che un metodo faccia riferimento ad alcune funzioni esterne (come il metodo select callback che richiama $ .dialog) che a sua volta esegue un altro metodo (come il metodo di callback del pulsante invocando la funzione $ .ajax) ma come si passano i parametri a $ .ajax o $ .dialog in modo che i propri metodi possano utilizzare tali valori?

Grazie,

Answer 1

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

avevo creato questo per rispondere a un'altra domanda, ma questo dimostra chiaramente come utilizzare le finestre di dialogo con il select callback.

Answer 2

Ho risolto il mio problema, grazie in gran parte all'esempio di ganeshk. Gli elementi DOM sono disponibili per tutte le funzioni jQuery, ovunque nel codice che possono essere e qualunque altra variabile sia compresa nel loro ambito. Ho risolto il problema utilizzando gli input nascosti per conservare i valori del callback fullCalendar e quindi accedervi dalla funzione $ .ajax() per inviare i dati al server.

Suppongo che questo è come è fatto di solito, anche se sembra problematico. Questo mi sembra spiacevole come inquinare l'ambito globale e temo che altri script sulla pagina possano voler manipolare anche questi dati. Vorrei che ci fosse un modo migliore per passare parametri a funzioni come $ .dialog() e $ .ajax() in modo che quei valori potessero essere usati dai metodi figli. Se c'è, per favore fatemelo sapere. Altrimenti, funzionerà.