如何编写Javascript函数来更新Coldfusion表单显示

Question

我正在开发一个具有2个Cfform元素的应用程序，这些元素显示了DB表的结果。我想更新数据库表的内容，并在不进行页面刷新的情况下更新cfform元素。如何在我的代码中加入javascript来处理异步刷新显示组件而无需在浏览器中刷新整页？

Answer 1

您只需要通过JQuery进行JSON调用。函数是$ .ajax，$ .post或$ .get。

有一个whole example of AJAX with Coldfusion HERE

$.ajax({
  dataType: "json",
  url: url,
  data: data, // This is the request data
  done: function(json) {
    console.log(json);
    // Work with data
  }
}); 

Answer 2

解决方法如下：

1. 将表单类型从Flash更改为HTML。消除CFformlayout标签，因为它们只会造成比必要更大的麻烦。

2. 以下代码提供了一个有效的coldfusion函数和javascript调用：

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>