2

我正在尝试使用 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">');
        }

}

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

<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();


}

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

4

1 回答 1

12

您将要使用 AJAX 来完成此操作。您在 JS 中遇到错误的原因<cfinclude>是因为 CF 在代码接近 JavaScript 之前正在评估该代码。

最简单的方法是更换你的

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

像这样：

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

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

您的路径可能不同，因此您可能需要稍微调整一下传递给load方法的模板名称。这将需要您运行 JS 的模板的相对路径。

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

$("#test").load("Report_ExcelSummaryReport.cfm", function() {
    $("#test").empty();
});
于 2012-10-15T22:43:55.847 回答