jQuery Programmatically Select Value - Odd Issue

Question

I've got an interesting issue occurring which I cannot seem to resolve using Select2 and FullCalendar.

Upon clicking an event, I am trying to pre-select the Select2 dropdown with what's in the database:

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

Here's what I can't figure out: When I eventClick the first time, it does not pre-populate with the information.

However, when I eventClick a second time (or eventClick any other event on the calendar for that matter) it works properly selects and displays the proper value.

Derisive

Answer 1

I think this is working as you want:

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

I've added a Bootstrap's modal, the js library versions are:

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

Umberto

Many thanks Coma, this solved the same issue I was having as the OP. The code is simpler than others I have seen. – Borlow

Answer 2

try

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

looks similar to a problem i had..

Clearance

Answer 3

(it should be a comment but still I don't have this ability)

I think you should initialize the select2 in $(document).ready and not inside "eventClick". Inside "eventClick" you should only have the second line $("#client_list_edit").select2("val", calEvent.ClientID);

Devito

Thanks for the answer. But, the select2 is already initialized in $(document).ready. I have tried both initializing the select2 and leaving it out inside the "eventClick" but it still produces the same result. – Derisive

Answer 4

Not sure what modal library you are referring to, but if it is opening and loading content using setTimeout then your code executes before there is content in the modal. You may try this to see if that is the case:

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

Maybe it has an API similar to https://github.com/tkirda/modal-box, so that code can be executed after content has finished loading.

Javier