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.

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.

• javascript
• jquery
• coldfusion
• coldfusion-9

• 2 I don't know much about CD, but I think you are fundamentally mistaken here - ColdFusion runs on server side; JavaScript runs in the browser. What you are trying to do can't be done this way. You will probably need to look into Ajax. – Pekka Commented Oct 15, 2012 at 21:55
• I thought about that as well. I was just trying different things and I was wondering if that is even possible. – Geo Commented Oct 15, 2012 at 21:57
• Thanks @JasonDean. Can you give me an insight of another way to do this? I added more code and description of what I'm trying to acplish. – Geo Commented Oct 15, 2012 at 22:22
• none of this will work without submitting the form via ajax to avoid a page redirect . You don't seem to have a submit handler for ajax. submit() will block all the other code from running as is – charlietfl Commented Oct 15, 2012 at 23:19
• Check your browser's console for errors (i.e. Firebug/Dragonfly/DevTools/etc) – Peter Boughton Commented Oct 16, 2012 at 17:38

1 Answer 1

You're going to want to use AJAX to acplish 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 acplish 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();
});