Calendar opens twice when invoked async + does not load events
I maintain a site which loads all it's pages asynchroneously through a $(element).load. This works fine. The page containing the calendar works nicelly upon first load. When I use the select or eventClick functions, these should invoke a new $.load, scrapping the calendar and opening a new page. The problem comes when I return to the calendar. The calendar will suddenly render twice. Once when the page loads, and the second time when the events are loaded. The events will no longer be displayed in the calendar as well.

This is not a problem when I navigate my site back and forth using my async triggers elsewhere. Only when page load is invoked through select or eventClick. If someone could please point out what I am doing wrong, I would greatly apreciate it. Thank you.

This is my code:

            <div class="one-column-layout">
              <h2>Reservasjoner</h2>
    		<script type="text/javascript">
              $('#content').bind('update', function(evt) { 
                loadLib('javascript/lib/jquery-ui-1.8.11.custom.min.js', "themes/lib/jquery-ui-1.8.11.custom.css", "$.datepicker", null);
                loadLib('javascript/lib/fullcalendar.js', 'themes/lib/fullcalendar.css', "$.fn.fullCalendar",
                    function() { 
                        var date = new Date();
                		var d = date.getDate();
                  		var m = date.getMonth();
                  		var y = date.getFullYear();
                  		
                  		$('#calendar').fullCalendar({
                  			header: {
                  				left: 'prev,next today',
                  				center: 'title',
                  				right: 'month,agendaWeek,agendaDay'
                  			},
                    		buttonText: { today: 'idag', month: 'måned', week: 'uke', day: 'dag' },
                      	    monthNames: ['Januar', 'Februar', 'Mars', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Desember'],
                      	    monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Des'],
                      	    dayNames: ['Søndag', 'Mandag', 'Tirsdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lørdag'],
                      	    dayNamesShort: ['Søn', 'Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør'],
                      	    firstDay: 1,
                      	    weekMode: 'variable',
                  			selectable: true,
                  			select: function(start, end, allDay) {
                    			loadInto($('#content'), '<?=$PAGE->buildUrl()?>&date='+$.datepicker.formatDate("dd.mm.yy", start));
                  			},
                  			eventClick: function(event, jsEvent, view) {
                    			loadInto($('#content'), '<?=$PAGE->buildUrl()?>&r='+event.id);
                  			},
                  			events: '<?=Booking::buildPageUrl() ?>&xhr=true&allDates=true'
                  		});
                    }
                );
              });
    		</script>
              <div id='calendar'></div>
            </div>

loadLib is a custom function of mine to include libraries to the page dynamically when needed, instead of keeping all libs in the header. It uses the jQuery $.getScript function.

loadInto is another custom function which performs the actual async loading of the different pages. This is the code:

    function loadInto(element, args)	{
    	$(element).trigger('beforeUpdate');
    	if (args.substring(0,1) == "?") args = args.substring(1, args.length);
    	addToHistory(args);
    
    	// Remove all listeners which might be set
    	$(element).unbind('update');
    	$(element).unbind('beforeUpdate');
    	$("#topIconGroup a").unbind("click");
    	$(window).unbind("click");
    	
    	// Clean up DOM
    	$('*', element).remove();
    	$('#breadCrumb').empty(); 
    	$('#topIconGroup').empty();
        $("meta[name='description']").attr("content", "Førre ungdomslag");
    	
    	// Apply load mask and load the shit
    	$(element).append('<div id="loadMask"><img src="images/loading.gif"></div>');
    	$(element).load('?xhr=true&' + args, function()	{
    		$('#breadCrumb').html((args == "p=1" || args == "") ? "" : "<a href='' class='xhr'>"+entity['LINK']+" Tilbake til forsiden</a>");
    		$(element).bind("update", function() {
              addXhr($('a.xhr', element));
              addXhr($('#breadCrumb a.xhr, #topIconGroup a.xhr'));
    		});
    		$(element).trigger('update');
        });
    }


Calendar opens twice when invoked async + does not load events
===

I maintain a site which loads all it's pages asynchroneously through a $(element).load. This works fine. The page containing the calendar works nicelly upon first load. When I use the select or eventClick functions, these should invoke a new $.load, scrapping the calendar and opening a new page. The problem comes when I return to the calendar. The calendar will suddenly render twice. Once when the page loads, and the second time when the events are loaded. The events will no longer be displayed in the calendar as well.

This is not a problem when I navigate my site back and forth using my async triggers elsewhere. Only when page load is invoked through select or eventClick. If someone could please point out what I am doing wrong, I would greatly apreciate it. Thank you.

This is my code:

            <div class="one-column-layout">
              <h2>Reservasjoner</h2>
    		<script type="text/javascript">
              $('#content').bind('update', function(evt) { 
                loadLib('javascript/lib/jquery-ui-1.8.11.custom.min.js', "themes/lib/jquery-ui-1.8.11.custom.css", "$.datepicker", null);
                loadLib('javascript/lib/fullcalendar.js', 'themes/lib/fullcalendar.css', "$.fn.fullCalendar",
                    function() { 
                        var date = new Date();
                		var d = date.getDate();
                  		var m = date.getMonth();
                  		var y = date.getFullYear();
                  		
                  		$('#calendar').fullCalendar({
                  			header: {
                  				left: 'prev,next today',
                  				center: 'title',
                  				right: 'month,agendaWeek,agendaDay'
                  			},
                    		buttonText: { today: 'idag', month: 'måned', week: 'uke', day: 'dag' },
                      	    monthNames: ['Januar', 'Februar', 'Mars', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Desember'],
                      	    monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Des'],
                      	    dayNames: ['Søndag', 'Mandag', 'Tirsdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lørdag'],
                      	    dayNamesShort: ['Søn', 'Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør'],
                      	    firstDay: 1,
                      	    weekMode: 'variable',
                  			selectable: true,
                  			select: function(start, end, allDay) {
                    			loadInto($('#content'), '<?=$PAGE->buildUrl()?>&date='+$.datepicker.formatDate("dd.mm.yy", start));
                  			},
                  			eventClick: function(event, jsEvent, view) {
                    			loadInto($('#content'), '<?=$PAGE->buildUrl()?>&r='+event.id);
                  			},
                  			events: '<?=Booking::buildPageUrl() ?>&xhr=true&allDates=true'
                  		});
                    }
                );
              });
    		</script>
              <div id='calendar'></div>
            </div>

loadLib is a custom function of mine to include libraries to the page dynamically when needed, instead of keeping all libs in the header. It uses the jQuery $.getScript function.

loadInto is another custom function which performs the actual async loading of the different pages. This is the code:

    function loadInto(element, args)	{
    	$(element).trigger('beforeUpdate');
    	if (args.substring(0,1) == "?") args = args.substring(1, args.length);
    	addToHistory(args);
    
    	// Remove all listeners which might be set
    	$(element).unbind('update');
    	$(element).unbind('beforeUpdate');
    	$("#topIconGroup a").unbind("click");
    	$(window).unbind("click");
    	
    	// Clean up DOM
    	$('*', element).remove();
    	$('#breadCrumb').empty(); 
    	$('#topIconGroup').empty();
        $("meta[name='description']").attr("content", "Førre ungdomslag");
    	
    	// Apply load mask and load the shit
    	$(element).append('<div id="loadMask"><img src="images/loading.gif"></div>');
    	$(element).load('?xhr=true&' + args, function()	{
    		$('#breadCrumb').html((args == "p=1" || args == "") ? "" : "<a href='' class='xhr'>"+entity['LINK']+" Tilbake til forsiden</a>");
    		$(element).bind("update", function() {
              addXhr($('a.xhr', element));
              addXhr($('#breadCrumb a.xhr, #topIconGroup a.xhr'));
    		});
    		$(element).trigger('update');
        });
    }

