javascript - 使用 javascript 控制 CFINCLUDE 文件

Question

我正在尝试使用 javascript 控制 cfinclude 标签，以前从未这样做过，我不确定是否可以开始。

这是我的代码:

<form name="form" id="form" action="survey_sounding_geo.cfm" method="post">
   <input type="hidden" name="isPost" value="1" />
   <select name="format" id="format" onChange="showDiv(this.value);">
      <option value="SurveyList" <cfif format eq 'SurveyList'>selected</cfif>>List surveys</option>
      <option value="testimonial"<cfif format eq 'testimonial'>selected</cfif>>List Testimonials</option>
      <option value="html_lsbg"<cfif format eq 'html_lsbg'>selected</cfif>>List Survey Ratings by Group</option>
      <option value="excel1"<cfif format eq 'excel1'>selected</cfif>>Export Survey Summary</option>
      <option value="excel_esd"<cfif format eq 'excel_esd'>selected</cfif>>Export Survey Details</option>
      <option value="excel_esc"<cfif format eq 'excel_esc'>selected</cfif>>Export Survey Comments</option>
   </select>
   <input type="button" name="btn_1" value="Generate" onClick="submitForm();">
</form>

这是我的js代码:

function submitForm()
{
        document.form.submit();

        var res = document.getElementById('format').value;

        if(res ==  'testimonial'){
        $("#test").html('<cfinclude template="Report_testimonials.cfm">');
        }
        if(res == 'SurveyList'){
        $("#test").html('<cfinclude template="Report_SurveyList.cfm">');
        }
        if(res ==  'excel1'){
        $("#test").html('<cfinclude template="Report_ExcelSummaryExport.cfm">');
        }
        if(res ==  'html_lsbg'){
        $("#test").html('<cfinclude template="Report_SummaryList.cfm">');
        }
        if(res ==  'excel_esd'){
        $("#test").html('<cfinclude template="Report_ExcelDetailExport.cfm">');
        }
        if(res ==  'excel_esc'){
        $("#test").html('<cfinclude template="Report_ExcelCommentsExport.cfm">');
        }

}

这就是我输出整个内容的方式:

<div id="test"></div>

我的问题是，由于某种原因，cfinclude 文件似乎在我提交表单之前尝试运行，这导致包含文件中出现随机错误，因为当我实际显示它们时应该传递值。

如果我从选项中删除 cfinclude 代码并将其替换为随机字母/单词，它就可以正常工作并且输出正确的值。

这是我原来的代码:

<cfif isDefined('isPost')>

    <cfif form.format eq 'testimonial'>
        <cfinclude template="Report_testimonials.cfm">
    <cfelseif form.format eq 'SurveyList'>
        <cfinclude template="Report_SurveyList.cfm">
    <cfelseif form.format eq 'excel1'>
        <cfinclude template="Report_ExcelSummaryExport.cfm">        
    <cfelseif form.format eq 'html_lsbg'>
        <cfinclude template="Report_SummaryList.cfm">
    <cfelseif form.format eq 'excel_esd'>
        <cfinclude template="Report_ExcelDetailExport.cfm">

    <cfelse>
        <cfinclude template="Report_ExcelCommentsExport.cfm">
    </cfif>
</cfif>

当我选择在页面上输出 html 的选项时，它会卡在页面上，然后当我选择 Excel 选项时(在 Excel 文件中下载相同的输出) 之前的 html 代码仍然显示。当我更改格式时，我需要清除该输出。

此代码下载我选择的 Excel 文件。每当此代码运行时，我需要清除屏幕上的 html 输出

<cfif SurveyCommentsData.recordcount gt 0>
     <cfcontent type="application/msexcel">
       <cfheader name="content-disposition" value="attachment;filename=report.xls">
       <cfoutput>#report#</cfoutput>
<cfelse>
     Sorry no records found.
</cfif>

这是我修改后的代码:

function submitForm()
{


        var res = document.getElementById('format').value;


        if(res ==  'testimonial'){
        $("#test").load("Report_testimonials.cfm");

        }
        if(res == 'SurveyList'){
        $("#test").load("Report_SurveyList.cfm");

        }
        if(res ==  'excel1'){
        $("#test").load("Report_ExcelSummaryExport.cfm");
       $("#test").empty();
        }
        if(res ==  'html_lsbg'){
        $("#test").load("Report_SummaryList.cfm");

        }
        if(res ==  'excel_esd'){
        $("#test").load("Report_ExcelDetailExport.cfm");
 $("#test").empty();
        }
        if(res ==  'excel_esc'){
        $("#test").load("Report_ExcelCommentsExport.cfm");
 $("#test").empty();
        }

        submit();


}

这不会给我任何错误，但会导致整个事情停止工作。

Answer 1

您将需要使用 AJAX 来完成此任务。您收到 <cfinclude> 错误的原因在你的 JS 中是因为 CF 在代码接近 JavaScript 之前对其进行评估。

实现此目的的最简单方法是替换您的

$("#test").html('<cfinclude template="Report_testimonials.cfm">')

像这样:

$("#test").load("Report_testimonials.cfm");

这将向服务器发出一个 AJAX 请求以获取 CF 模板，然后将返回的 HTML 放入您的 #test 中。分区。

您的路径可能不同，因此您可能需要稍微修改一下传入 load 的模板名称。方法。它将需要您运行 JS 的模板的相对路径。

编辑:关于修改后的代码 - 您有两个选择，具体取决于您是否要在创建之前或之后清空 div对 Excel 模板的 AJAX 调用。如果您想在调用电话之前清空它，只需移动您的 $("#test").empty()位于 AJAX 调用上方。如果您想在收到响应后清空它，可以将回调传递给 load方法:

$("#test").load("Report_ExcelSummaryReport.cfm", function() {
    $("#test").empty();
});