[英]jQuery Programmatically Select Value - Odd Issue
我有一個有趣的問題,我似乎無法解決使用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
在日歷上為此事任何其他活動) 它工作正常選擇,並顯示正確的值。
我認為這是你想要的:
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
我添加了一個Bootstrap的模態,js庫版本是:
嘗試
$('#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);
}
});
看起來類似於我遇到的問題..
(它應該是評論,但我仍然沒有這種能力)
我認為你應該在$(document).ready
初始化select2而不是在“eventClick”里面。 在“eventClick”里面你應該只有第二行$("#client_list_edit").select2("val", calEvent.ClientID);
不確定你指的是什么模態庫,但如果它是使用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);
}
});
也許它有一個類似於https://github.com/tkirda/modal-box的API,因此代碼可以在內容加載完成后執行。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.