Cómo usar el diálogo jQuery con fullcalendar ¿seleccionar devolución de llamada?

Question

Tengo una confusión fundamental acerca de cómo jQuery, y probablemente el trabajo de JavaScript. Sigo teniendo el mismo problema, cómo pasar los parámetros a las funciones de jQuery para que sus métodos a su vez puedan llamar a las funciones que usan esas variables. Aquí está mi ejemplo más reciente:

Estoy usando el plugin fullcalendar. Si hago clic en el calendario, se activa un método de devolución de llamada 'seleccionar'. La devolución de llamada selectiva recibe automáticamente ciertos parámetros: 'startDate' 'endDate', etc. Lo que quiero es abrir un cuadro de diálogo jQuery para recopilar información adicional y luego publicar el nuevo evento en el servidor. A lo largo de las líneas de este:

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

en el html tengo algo como esto:

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

por último, me gustaría añadir un botón al cuadro de diálogo para publicar las variables fullcalendar así como la nueva variable con el servidor:

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

simplemente no entiendo cómo construir esto, o dónde colocar el código para que el cuadro de diálogo 'Guardar' botón 'sabe' lo que las variables 'startDate' 'endDate' y 'coolness 'todo significa. Debo mencionar que originalmente soy un programador de Java, y todavía estoy luchando con el alcance variable basado en funciones de JavaScript.

He tenido este problema con muchos de esos métodos jQuery donde quiero que un método apunte a alguna función externa (como el método select callback invocando $ .dialog) que a su vez ejecuta otro método (como el método callback de invocación la función $ .ajax), pero ¿cómo se pasan los parámetros a $ .ajax o $ .dialog para que sus propios métodos puedan usar esos valores?

Gracias,

Answer 1

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

que había creado esto para responder a otra pregunta, pero esto demuestra claramente cómo utilizar los cuadros de diálogo con el select de devolución de llamada.

Answer 2

He resuelto mi problema, en gran parte gracias al ejemplo de ganeshk. Los elementos DOM están disponibles para todas las funciones de jQuery, independientemente del código en el que se encuentren y de cualquier otra variable que esté dentro de su alcance. He resuelto el problema mediante el uso de entradas ocultas para mantener los valores de la devolución de llamada completaCalendar, y luego accediendo a ellos desde la función $ .ajax() para publicar los datos en el servidor.

Supongo que así es como generalmente se hace, aunque parece problemático. Esto se siente incómodamente como la contaminación del alcance global y me preocupa que otros scripts en la página también quieran manipular estos datos. Me gustaría que hubiera una forma mejor de pasar parámetros a funciones como $ .dialog() y $ .ajax() para que esos valores puedan ser utilizados por métodos secundarios. Si hay, házmelo saber. De lo contrario, esto funcionará.