0

这是一个棘手的问题，所以我会尽可能提供信息。我在外部页面“calendar_summary.cfm”上作为 JS 日历插件运行FullCalendar.js，该页面被称为一系列其他页面的一部分，这些页面在单个页面上的不同时间段内重新加载。此日历摘要页面包含通过 ColdFusion 调用到 JS 对象中的数据，以将数据提供给 FullCalendar.js。其结果通过 AJAX 进行，以显示在主页上的 DIV 中（我们将其称为“main_page.cfm”）。

问题是，日历调用并不总是在调用“calendar_summary.cfm”时一直触发，导致“main_page.cfm”的现在填充的“content2”DIV 中的“日历”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>


我错过了什么导致日历功能不经常触发的任何想法？

提前谢谢了...

〜埃利塞奥

4

1 回答 1

1

您应该将日历初始化代码放在onload函数或 jQuery 中$(document).ready(function(){});

这很可能是为什么有时它会“触发”而有时不会。这取决于浏览器如何加载您的代码。您可能会很幸运，并且在执行 JS 时会加载 DOM 的相关部分，而其他时候它可能会在 DOM 完全加载之前触发，并且由于<div>不存在，它似乎不会触发。所以，如果你把它移到一个加载函数中，你可以确保它在 DOM 完全加载之前不会触发。 更多关于 jQuery 的 API 文档的信息

于 2013-09-19T13:02:58.837 回答