jQuery Programmatically Select Value - Odd Issue

Question

У меня возник интересный вопрос, который я не могу решить, используя Select2 и FullCalendar.

щелчкнуть событие, я пытаюсь предварительно выбрать выпадающее меню Select2 с тем, что в базе данных:

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

Вот что я не могу понять: Когда я eventClick в первый время, не предварительно заполнить информацией.

Однако, когда я eventClick во второй раз (или eventClick любое другое событие в календаре по этому вопросу) он работает правильно выбирает и показывает правильное значение.

Answer 1

(он должен быть комментарий, но до сих пор у меня нет этой способности)

Я думаю, вы должны инициализировать ВЫБ.2 в $(document).ready, а не внутри «eventClick». Внутри "eventClick" вы должны иметь только вторую строчку $("#client_list_edit").select2("val", calEvent.ClientID);

Answer 2

Я думаю, что это работает, как вы хотите:

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

Я добавил модальные бутстраповской, тем библиотеку JS версии являются:

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

Answer 3

Не знаете, какую модальную библиотеку вы имеете в виду, но если она открывает и загружает контент с помощью setTimeout, тогда ваш код выполняется до того, как будет содержимое в модальном формате. Вы можете попробовать это, чтобы увидеть, если это так:

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

Может быть, это имеет API, похожий на https://github.com/tkirda/modal-box, так что код может быть выполнен после того, как содержание по окончании загрузки.

Answer 4

попробовать

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

похож на проблемы я имел ..