J'ai un problème intéressant sur lequel je ne peux pas sembler résoudre en utilisant Select2 et < un href = "http://arshaw.com/fullcalendar" rel = "nofollow noreferrer"> FullCalendar .
En cliquant sur un événement, j'essaie de pré-sélectionner la liste déroulante Select2 avec ce qui est dans la base de données : Voici ce que je ne peux pas comprendre: quand i Cependant, lorsque je EventClick le premier Temps, il est pas pré-peupler avec les informations. EventClick une seconde fois (ou EventClick tout autre événement sur le calendrier de cette affaire) Ça fonctionne Sélectionne correctement et affiche la valeur correcte.
4 Réponses :
(ça devrait être un commentaire mais je n'ai toujours pas cette capacité)
Je pense que vous devriez initialiser le Select2 dans $ (document) .Ready et non à l'intérieur "EventClick". Inside "EventClick", vous ne devez avoir la deuxième ligne $ ("# client_list_edit"). SELECT2 ("VAL", CALEFENT.CLIDEID);
Merci d'avoir répondu. Mais, le SELECT2 est déjà initialisé dans $ (document) .Ready . J'ai essayé à la fois d'initialiser le Select2 et de la laisser sortir à l'intérieur de "EventClick", mais elle produit toujours le même résultat.
Je pense que cela fonctionne comme vous le souhaitez:
http://jsfiddle.net/bu7wj/10 / p>
js strong> p> $(function() {
var events = $('#events');
var calendar = $('#calendar');
var modal = $('#view_event');
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
events.select2();
calendar.fullCalendar({
eventClick: function(event, jsEvent, view) {
modal.find('h3').text(event.title);
modal.modal();
events.select2('val', event.ClientID);
},
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1),
ClientID: '00001'
},
{
title: 'Long Event',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2),
ClientID: '00002'
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d-3, 16, 0),
allDay: false,
ClientID: '00003'
},
{
id: 999,
title: 'Repeating Event x',
start: new Date(y, m, d+4, 16, 0),
allDay: false,
ClientID: '00004'
},
{
title: 'Meeting',
start: new Date(y, m, d, 10, 30),
allDay: false,
ClientID: '00005'
},
{
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false,
ClientID: '00006'
},
{
title: 'Birthday Party',
start: new Date(y, m, d+1, 19, 0),
end: new Date(y, m, d+1, 22, 30),
allDay: false,
ClientID: '00007'
},
{
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'http://google.com/',
ClientID: '00008'
}
]
});
});
Merci beaucoup Coma, cela a résolu le même problème que j'avais comme l'op. Le code est plus simple que d'autres que j'ai vu.
Vous ne savez pas quelle bibliothèque modale vous parlez, mais s'il s'agit d'ouverture et de chargement de contenu en utilisant SetTimeOut, votre code s'exécute avant qu'il y a du contenu dans le modal. Vous pouvez essayer ceci pour voir si tel est le cas: peut-être qu'il a une API similaire à https://github.com/tkirda/modal-box , de sorte que le code puisse être exécuté après le chargement terminé.
Essayez
$('#calendar').unbind('click').fullCalendar({
eventClick: function(calEvent, jsEvent, view) {
$("#view_event").modal(); //launches bootstrap modal
$("#client_list_edit").select2();
$("#client_list_edit").select2("val", calEvent.ClientID);
}
});