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

これにより、CFテンプレートのAJAXリクエストがサーバーに返され、返されたHTMLが#testdivに配置されます。

パスが異なる場合があるため、loadメソッドに渡されたテンプレート名を少しいじる必要がある場合があります。JSを実行しているテンプレートからの相対パスが必要になります。

編集：改訂されたコードに関して-ExcelテンプレートへのAJAX呼び出しを行う前または後にdivを空にするかどうかに応じて2つのオプションがあります。呼び出しを行う前に空にしたい場合は$("#test").empty()、AJAX呼び出しの上に移動するだけです。応答を受信した後でそれを空にしたい場合は、loadメソッドにコールバックを渡すことができます。

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