javascript - FullCalendar.js が JS/Ajax/ColdFusion で一貫して起動しない

Question

これはトリッキーなものなので、できる限り情報を提供します。外部ページ「calendar_summary.cfm」でJSカレンダープラグインとしてFullCalendar.jsを実行しています。これは、単一のページでさまざまな期間にわたってリロードする一連の他のページの一部として呼び出されます。このカレンダーの概要ページには、データを FullCalendar.js にフィードするために ColdFusion を介して JS オブジェクトに呼び出されるデータがあります。その結果は AJAX を介して引き継がれ、メイン ページ (「main_page.cfm」と呼びます) の DIV に表示されます。

問題は、「calendar_summary.cfm」が呼び出されたときに常にカレンダー呼び出しが起動するとは限らないため、「main_page.cfm」の現在入力されている「content2」DIV 内の「calendar」DIV 内に空白スペースが生じることです。 $("#calendar").fullCalendar() 呼び出しが発生し、素敵なカレンダーが表示されます。私が間違っているかもしれないアイデアはありますか？以下のコード:

main_page.cfm (ColdFusion/JS/jQuery) から:

<script>
function jsAjax(theUrl,theClass) {
    $.ajax({
        url: theUrl,
        context: document.body,
        success: function(responseText) {
            $("."+theClass).html(responseText);
            $("."+theClass).find("script").each(function(i) {
                eval($(this).text());
            });
        }
    });
};

function ajax(){
    try{
        xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
        return xmlHttp;
    }
    catch (e){
        try{
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
            return xmlHttp;
        }
        catch (e){
            try{
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                return xmlHttp;
            }
            catch (e){
                alert("Your browser does not support AJAX.");
                return false;
            }
        }
    }
}

function fetch_unix_timestamp()
{
    return parseInt(new Date().getTime().toString().substring(0, 10));
}
function ref_kr_status(){
    var divid = "content2";
    var url = "calendar_summary.cfm";

    var xml3 = ajax();
    var timestamp = fetch_unix_timestamp();
    var nocacheurl = url+"?t="+timestamp;

    xml3.onreadystatechange=function(){
        if(xml3.readyState==4){
            document.getElementById(divid).innerHTML=xml3.responseText;
            setTimeout('ref_kr_status();jsAjax("calendar_summary.cfm","content2");',60e3);
        }
    }
    xml3.open("GET",nocacheurl,true);
    xml3.send(null);
}

window.onload = function startrefresh(){
    setTimeout('ref_kr_status();',60e3);
}
</script>
<div class="content2" id="content2"></div>
<script type="text/javascript">
ref_kr_status();jsAjax("calendar_summary.cfm","content2");
</script>

「calendar_summary.cfm」から (ColdFusion/JS/jQuery も)

<cfoutput>
<table width="100%" cellpadding="0" cellspacing="0">
    <tr style="color: white; background: -moz-linear-gradient(top, rgba(0,88,138,1) 0%, rgba(0,60,94,1) 50%, rgba(0,88,138,1) 100%);"><th colspan="5">Calendar for #DateFormat(Now(),"mmmm, yyyy")#</th></tr><tr><td><cfquery name="qJobs" datasource="kxxxxs">SELECT j.*, IFNULL(c.color_hex, 'FF00FF') AS color_hex, s.job_status_desc as status
        FROM jobs j
        LEFT OUTER JOIN installers i
            ON i.installer_id = j.job_installer
        LEFT OUTER JOIN colors c
            ON c.color_id = i.installer_color
        LEFT OUTER JOIN job_status s
            ON s.job_status_id = j.job_status
        WHERE j.job_install_date_start IS NOT NULL
        AND j.job_install_date_end IS NOT NULL
        AND j.job_active = 1
</cfquery>
<cfsavecontent variable="theCal">
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();
    $("##calendar").html("");
    while ($("##calendar").html()==""){
        $("##calendar").fullCalendar(
            {height: 400, 
            header: {left: "",center: " ",right: ""},
            editable: false,
            events: [
            <cfloop query="qJobs">
                <cfset dateStart = qJobs.job_install_date_start />
                <cftry>
                    <cfset dateEnd = qJobs.job_install_date_end />
                    <cfcatch type="any">
                        <cfset dateEnd = qJobs.job_install_date_start />
                    </cfcatch>
                </cftry>
                <cfset _year1 = Year(dateStart) />
                <cfset _month1 = Month(dateStart) />
                <cfset _day1 = Day(dateStart) />
                <cfset _hour1 = Hour(dateStart) />
                <cfset _minute1 = Minute(dateStart) />
                <cfset _year2 = Year(dateEnd) />
                <cfset _month2 = Month(dateEnd) />
                <cfset _day2 = Day(dateEnd) />
                <cfset _hour2 = Hour(dateEnd) />
                <cfset _minute2 = Minute(dateEnd) />
                <cfset backgroundColorText = 'backgroundColor: "###qJobs.color_hex#",' />
                <cfset titleText = 'title: "#qJobs.job_name#",' />
                {id: "#qJobs.job_id#", 
                    #titleText#
                    start: new Date(#_year1#, #(_month1-1)#, #_day1#, #_hour1#, #_minute1#),
                    end: new Date(#_year2#, #(_month2-1)#, #_day2#, #_hour2#, #_minute2#),
                    allDay: <cfif (DateDiff("s", dateEnd, dateStart) GE 86400)>true<cfelse>false</cfif>,
                    <cfif job_completed EQ 0>#backgroundColorText#<cfelse>backgroundColor: "##999999",</cfif>
                    borderColor: "##000000",
                    textColor: "##ffffff"}
                    <cfif qJobs.CurrentRow NEQ qJobs.RecordCount>,</cfif>
            </cfloop>]
            }
        );
    }
</cfsavecontent>

<table style="width: 725px; font-size: 12px !important;">
    <tr style="width: 100%;">
        <td>
            <div id="calendar"></div>
        </td>
<script type='text/javascript' id="doThat">
    #theCal#
</script>
    </tr>
</table>

そのカレンダー機能が頻繁に起動しない原因となる、私が見逃しているアイデアはありますか?

よろしくお願いします...

〜エリセオ