Question

这是一个棘手的问题，所以我会尽可能地提供信息。我在外部页面“calendar_summary.cfm”上运行了FullCalendar.js作为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>

我缺少的任何想法导致日历功能不会频繁发生？

非常感谢...

~Eliseo

Answer 1

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

中

这很有可能是为什么有时会“开火”，有时则不会。这取决于浏览器如何加载代码。您可能会很幸运，并且在执行JS时会加载DOM的相关部分，而在DOM完全加载之前可能会触发其他部分，因为<div>不存在，看起来好像没有火。因此，如果将其移动到on load函数，则可以确保在DOM完全加载之后才会触发它。 More info on jQuery's API docs

FullCalendar.js不会在JS / Ajax / ColdFusion上持续触发

1 个答案: