FullCalendar pour charger le fichier externe dans la boîte de dialogue modale de l'interface utilisateur jQuery

Question

J'essaie donc d'utiliser la boîte de dialogue FullCalendar et jQuery UI. Et je ne suis pas sûr de savoir comment placer les 2 ensemble très bien.

Lorsque je sélectionne ou clique sur un événement de jour vide, je veux que la boîte de dialogue jQuery Modal apparaisse. BIEN QUE je voudrais le charger un fichier interne (php include). Mais la chute avec ceci est que je ne peux pas l'obtenir pour fermer la boîte de dialogue quand je reçois le formulaire pour soumettre

Aussi, en utilisant cette méthode je ne peux pas l'obtenir pour tirer la date que j'ai cliqué sur remplir automatiquement le champ date de début.

Quelle est la meilleure façon de mixer dans la boîte de dialogue modale de l'interface jQuery avec fullCalendar?

Toute aide serait appréciée. Si possible, existe-t-il une bonne méthode en chargeant un fichier externe?

Ceci est actuellement ce que j'ai:

select: function(start, end, date, allDay, jsEvent, view, calEvent) { 
    $("#addEventDialog").dialog("open"); 

$("#addEventDialog").load('dialog.CalendarNewEvent.php').dialog({ 
    title: 'Add Event', 
    modal: true, 
    buttons: { 
     "Save": function() { 
      $("#calendarWidget2").ajaxSubmit({ 
       target: "#calendarResponse", 
       dataType: 'json', 
       clearForm: true, 
       success: function(response, event) { 
        //If the widget says it's okay to refresh, refresh otherwise, consider it done 
        if(response.refreshEvents == '1') { 
         $("#calendar").fullCalendar("refetchEvents"); 
        } 
        // Close the dialog box when it has saved successfully 
        $("#addEventDialog").dialog("destroy"); 
        // Update the page with the reponse from the server 
        $("#calendarResponse").append("Successfully Added: "+ response.title +"<br />"); 

       }, 
       error: function() { 
        alert("Oops... Looks like we're having some difficulties.");  
       } 
      }); // Close ajax submit 
     }, 
     "Cancel": function() { $(this).dialog("close"); } 
    }, //End buttons 
}); 

//alert("The inputs will work if i un-comment this alert"); 

/* UPDATE ALL THE VALUES IN THE DIALOG BOX */ 
$("#startDate").val($.fullCalendar.formatDate(start, 'yyyy/MM/dd')); 
$("#endDate").val($.fullCalendar.formatDate(end, 'yyyy/MM/dd')); 

},

Donc, comme mon code mentionne, quand j'utiliser ce code, rien est mis à jour ... mais encore lorsque j'utilise une fonction d'alerte où je l'ai placé en ce moment, et le fait réellement vivre ... les valeurs d'entrée seront mises à jour pour une raison quelconque. C'est presque comme si la fonction agissait rapidement pour que les valeurs s'appliquent, alors quand l'alerte s'arrête là-dedans, ça fait fonctionner ... des pensées?

Answer 1

Voilà comment j'appelle le dialogue et le remplir:

$('#calendar').fullCalendar({ 
dayClick: function (date, allDay, jsEvent, view) { 
      $("#dialog").dialog('open');  
      $("#name").val("(event name)"); 
      $("#date-start").val($.fullCalendar.formatDate(date, 'MM/dd/yyyy')); 
      $("#date-end").val($.fullCalendar.formatDate(date, 'MM/dd/yyyy')); 
      $("#time-start").val($.fullCalendar.formatDate(date, 'hh:mmtt')); 
      $("#time-end").val($.fullCalendar.formatDate(date, 'hh:mmtt')); 
    }, 
}); 

    $("#dialog").dialog({ 
     autoOpen: false, 
     height: 350, 
     width: 700, 
     modal: true, 
     buttons: { 
      'Create event': function() { 
       $(this).dialog('close'); 
      }, 
      Cancel: function() { 
       $(this).dialog('close'); 
      } 
     }, 

     close: function() { 
     } 

    }); 

html

  <div id="dialog" class="event-dialog" title="Event"> 
      <div id="dialog-inner"> 
       <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all title"><br> 
       <span class="inline"><input type="text" name="date-start" id="date-start" class="text ui-widget-content ui-corner-all"></span> 
       <span class="inline"><input type="text" name="time" id="time-start" class="text ui-widget-content ui-corner-all"></span> 
       <span class="inline">To:</span> <span class="inline"><input type="text" name="date" id="date-end" class="text ui-widget-content ui-corner-all"></span> 
       <span class="inline"><input type="text" name="time" id="time-end" class="text ui-widget-content ui-corner-all"></span> 
       <span class="inline">&nbsp;All day <input id="all-day" type="checkbox"></span> 
       <!--<label for="description">Description:</label> 
       <textarea name="description" id="description" class="text ui-widget-content ui-corner-all" rows="8" cols="73">  
</textarea> 
      </div> 
     </div> 
     <div id="calendar"></div> 

Je ne peux pas parler à la substance php sans le voir, mais il devrait fonctionner en théorie. Vous pouvez voir que cet exemple est un travail en cours et pas entièrement fonctionnel (post, get, etc).

Answer 2

Peut-être essayer d'appeler dialogue en fonction de .load():

$("#addEventDialog").load("'dialog.CalendarNewEvent.php'", function() { 
      $("#addEventDialog").dialog({ 
title: 'Add Event', 
    modal: true, 
    buttons: { 
     "Save": function() { 
      $("#calendarWidget2").ajaxSubmit({ 
       target: "#calendarResponse", 
       dataType: 'json', 
       clearForm: true, 
       success: function(response, event) { 
        //If the widget says it's okay to refresh, refresh otherwise, consider it done 
        if(response.refreshEvents == '1') { 
         $("#calendar").fullCalendar("refetchEvents"); 
        } 
        // Close the dialog box when it has saved successfully 
        $("#addEventDialog").dialog("destroy"); 
        // Update the page with the reponse from the server 
        $("#calendarResponse").append("Successfully Added: "+ response.title +"<br />"); 

       }, 
       error: function() { 
        alert("Oops... Looks like we're having some difficulties.");  
       } 
      }); // Close ajax submit 
     }, 
     "Cancel": function() { $(this).dialog("close"); } 
    }, //End buttons 

}); 

Je ne suis pas sûr que ce soit tout à fait raison, mais cela pourrait aider. Et un chapeau pointe à ceci: http://www.coderanch.com/t/122420/HTML-JavaScript/JQuery-UI-Dialog-load-JavaScript