Controlling CFINCLUDE files with javascript

Question

I am trying to control cfinclude tags with javascript, never done it before and I am not sure if it is possible to begin with.

This is my code:

<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>

This is my js code:

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 this is how I am outputting the whole thing:

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

My issue is that for some reason it seems that the cfinclude files are trying to run before I submit the form which results in random errors from the include file due to values that are supposed to be passed on when I actually display them.

If I remove the cfinclude code from the options and replace it with random letters/words it works just fine and it is outputting the correct values.

That's my original code:

<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>

When I am selecting an option that outputs html on the page it get stuck on the page and then when I am selecting an excel option (which downloads the same output in an excel file) the previous html code it is still showing. I need that output to clear out when I am changing formats.

This code downloads the excel file of my choice. I need to clear the html output from the screen whenever this code runs

<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>

This is my revised code:

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


}

This is not giving me any errors but it causes the whole thing to stop working.

Answer 1

You're going to want to use AJAX to accomplish this. The reason you are getting errors with the <cfinclude> in your JS is because CF is evaluating that code before it gets anywhere near the JavaScript.

The easiest way to accomplish this is to replace your

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

with something like this:

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

That will fire off an AJAX request back to the server for the CF template and then place the returned HTML into your #test div.

Your paths may be different, so you might need to fiddle around a bit with the template name passed in to the load method. It's going to require a relative path from the template that you are running the JS on.

EDIT: Regarding your revised code - you have two options depending on whether you want to empty the div before or after you make the AJAX call to the Excel template. If you want to empty it prior to making the call, just move your $("#test").empty() above the AJAX call. If you want to empty it after you've received a response, you can pass a callback in to the load method:

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