jQuery Programowo wybierz wartość - niepoprawny problem

Question

Występuje ciekawy problem, którego nie mogę rozwiązać za pomocą Select2 i FullCalendar.

Po kliknięciu zdarzenie, próbuję pre-wybierz rozwijaną Select2 z tym, co znajduje się w bazie danych:

$('#calendar').fullCalendar({ 
    eventClick: function(calEvent, jsEvent, view) { 
      $("#view_event").modal(); //launches bootstrap modal 
      $("#client_list_edit").select2(); 
      $("#client_list_edit").select2("val", calEvent.ClientID); 
     } 
}); 

Oto czego nie można dowiedzieć się: Kiedy eventClick z pierwszy Czas, to , a nie wstępnie wypełnić informacje.

Jednak, kiedy eventClick po raz drugi (lub eventClick jakiekolwiek inne zdarzenie w kalendarzu dla tej sprawy) działa właściwie wybiera i wyświetla odpowiednią wartość.

Answer 1

(powinien to być komentarz, ale nadal nie mam tę umiejętność)

myślę, że należy zainicjować select2 w $(document).ready a nie wewnątrz „eventClick”. Wewnątrz "eventClick" powinna mieć tylko drugą linię $("#client_list_edit").select2("val", calEvent.ClientID);

Answer 2

myślę, że to działa, jak chcesz:

http://jsfiddle.net/bU7wj/10/

HTML

<select id="events"> 
    <option>??????</option> 
    <option value="00001">All Day Event</option> 
    <option value="00002">Long Event</option> 
    <option value="00003">Repeating Event</option> 
    <option value="00004">Repeating Event x</option> 
    <option value="00005">Meeting</option> 
    <option value="00006">Lunch</option> 
    <option value="00007">Birthday Party</option> 
    <option value="00008">Click for Google</option> 
</select> 
<div id="calendar"></div> 
<div id="view_event" class="modal hide fade" tabindex="-1" role="dialog"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
     <h3>Modal header</h3> 
    </div> 
    <div class="modal-body"> 
     <p>More info here…</p> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Ok</button> 
    </div> 
</div> 

JS

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

}); 

UPDATE

Dodałem modal Bootstrap, The wersje bibliotek js to:

• jQuery 1.9.1
• Selecr2 3.3.2
• fullCalendar 1.6.1
• jQuery UI 1.10.2
• Bootstrap 2.3.1

Answer 3

Nie jestem pewien, do której biblioteki modalnej się odwołujesz, ale jeśli otwierasz i ładujesz zawartość za pomocą funkcji setTimeout, to Twój kod jest wykonywany, zanim pojawi się zawartość w modalu. Możesz spróbować tego, aby sprawdzić, czy tak jest w istocie:

$('#calendar').fullCalendar({ 
    eventClick: function(calEvent, jsEvent, view) { 
      $("#view_event").modal(); //launches bootstrap modal 
      setTimeout(function(){ 
       $("#client_list_edit").select2(); 
       $("#client_list_edit").select2("val", calEvent.ClientID); 
      }, 1000); 
     } 
}); 

Może ma API podobny do https://github.com/tkirda/modal-box tak, że kod może być wykonywane po zakończeniu ładowania treści.

Answer 4

spróbować

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

wygląda podobnie do problemu miałem ..