Bootstrap预先调用ColdFusion

时间:2014-05-08 19:38:11

标签: javascript twitter-bootstrap coldfusion typeahead.js

我正在尝试使用Typeahead.js进行简单测试,该测试从coldfusion组件获取其数据,该组件返回带有数据的简单JSON字符串。

这是我的AjaxCtrl.cfc

<cfcomponent output="false">
    <cffunction name="GetParams" access="remote" output="false">
        <cfset objData = [
            {   PARAMCODE = "SYSTEM_PARAM_1", 
                PARAMVAL = "FALSE" 
            },
            {   PARAMCODE = "SYSTEM_PARAM_2",            
                PARAMVAL = true 
            },
            {   PARAMCODE = "SYSTEM_PARAM3",             
                PARAMVAL = "1003" 
            },
            {   PARAMCODE = "SYSTEM_PARAM4",             
                PARAMVAL = 1004 
            }
        ] />
        <cfreturn objData >
    </cffunction>
</cfcomponent>

因此,当我尝试在浏览器中访问http://localhost/foo/bar/AjaxCtrl.cfc?method=GetParams时,我会按预期获得以下输出:

[{"PARAMCODE":"SYSTEM_PARAM_1","PARAMVAL":false},{"PARAMCODE":"SYSTEM_PARAM_2","PARAMVAL":true},{"PARAMCODE":"SYSTEM_PARAM_3","PARAMVAL":1003},{"PARAMCODE":"SYSTEM_PARAM_4","PARAMVAL":1004}]

然后这是我的javascript文件

// constructs the suggestion engine
var engine = new Bloodhound({
  datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.PARAMCODE); },
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  prefetch: "http://localhost/dev/test/djb/AjaxCtrl.cfc?method=GetParams"
  }
);

// kicks off the loading/processing of `local` and `prefetch`
engine.initialize();

$( "input.typeahead" ).typeahead({
  hint: true,
  highlight: true,
  minLength: 1
},
{
  name: 'parameters',
  displayKey: 'PARAMCODE',
  source: engine.ttAdapter()
});

到目前为止,我只能使用LOCAL硬编码数据示例。对于我尝试的所有示例,无论是预取还是远程,都没有任何作用。我做错了什么?

1 个答案:

答案 0 :(得分:6)

我通过向returnFormat="JSON"添加<cffunction>来解决此问题,否则它会通过&#34; wddxpacket&#34;来发送数据。和Typeahead显然无法直接处理。