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来完成此任务。您在JS中遇到<cfinclude>错误的原因是因为CF在它到达JavaScript附近之前正在评估该代码。

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

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

有这样的事情：

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

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

您的路径可能不同，因此您可能需要使用传递到load方法的模板名称来摆弄一下。它将需要您运行JS的模板的相对路径。

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

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

使用javascript控制CFINCLUDE文件

1 个答案: