How to write a Javascript function to update a Coldfusion form display

Question

I'm working on an app which has 2 Cfform elements that display the results from DB table. I'm wanting to update the content of the DB table and have the cfform elements update without doing a page refresh. How do I incorporate javascript into my code to handle asynchronously refreshing the display components without a full page refresh in the browser?

Answer 1

The solution to this is as follows:

1. Change the form type from Flash to HTML. Eliminate the CFformlayout tags as they will just create a bigger headache than necessary.

2. The following code provides a working coldfusion function and javascript call:

AJAX:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script language="javascript">

    $(document).ready(function() {
        $("#createReport").click(function(f) {
            var getReportName = $("input#reportName").val();
            var getReportPath = $("input#reportPath").val();
            var getReportDesc = $("input#reportDescrip").val();
            //var getCategory   = $("input#categoryBox").val();


            $.ajax({
                type:"POST",
                url: "http://10.11.2.60/testFolder/bidirectionalreporting/codetest/components/coldfusionFunction.cfc?method=testFunc&returnformat=json",
                dataType: "JSON",
                data:{ 
                        reportName: getReportName,
                        reportPath: getReportPath,
                        reportDescrip: getReportDesc
                        //categoryBox: getCategory

                },
                success: function(result){
                    alert("You successfully added a new report to the system") } 
    });
        });
    });     
</script>

Coldfusion:

 <!--- CF AJAX function to create new report in DB--->
 <cffunction name="testFunc"  access="remote" description="tests the AJAX functionality and query">     
    <!--- Function takes in variables from CF page and AJAX call --->
    <cfargument name="mathVariable" default="8978" type="any">                                             

    <!--- This is just a test argument to verify ajax works before adding new fields--->
    <cfargument name="reportName" default="" type="any">                                                   
    <!--- This argument maps to the like named form field and is passed through AJAX call--->               
    <cfargument name="reportPath" default="" type="any">                                                   
    <!--- This argument maps to the like named form field and is passed through AJAX call--->
    <cfargument name="reportDescrip"  default="" type="any" >                                              
    <!--- This argument maps to the like named form field and is passed through AJAX call--->
    <cfargument name="categoryBox" default="Vendor Management" type="any">
    <!--- This argument maps to the like named form field and is passed through AJAX call--->

    <cfquery name="qryTest" datasource="First_Title_Main_Dev">                                                  <!--- Query creates a new report in the master report list table--->
     INSERT INTO Report_Master_List (Report_Name, URL, Report_Desc, Category)

     VALUES (
        <cfqueryparam cfsqltype="cf_sql_varchar" value="#arguments.reportName#">,                   
        <!--- report name form field references Report_Name column--->
        <cfqueryparam cfsqltype="cf_sql_varchar" value="#arguments.reportPath#">,                   
        <!--- report path form field references ReportPath column--->
        <cfqueryparam cfsqltype="cf_sql_varchar" value="#arguments.reportDescrip#">,                
        <!--- report descrip form field references ReportDescrip column --->
        <cfqueryparam cfsqltype="cf_sql_varchar" value="#arguments.categoryBox#">
     )                  
     <!--- categoryBox form field references Category column --->
    </cfquery>

    <cfquery name="updateReportList" datasource="First_Title_Main_Dev">
    SELECT rid, Report_Name                                                                                   <!---Get updated Report Name--->
    FROM Report_Master_List                                                                           <!---Table referenced is Report_Master_List--->
    </cfquery>
    <cfreturn updateReportList>
</cffunction>