我被以下代码困住了，希望有人可以帮助我或给我一些建议: 基本上我正在做的是使用ajax调用cf函数:当用户在“artid”字段中写入id时 与该 id 相关的信息将出现在其他 cfinput 中。上面的代码工作正常。
<cfajaxproxy bind="cfc:portal_dgmu.pruebas.addPerson.test.getData({artid@keyup})" onsuccess="showData">
<script>
function showData(d) {
var data = {}
for(var i=0; i < d.COLUMNS.length; i++) {
data[d.COLUMNS[i]] = d.DATA[0][i]
}
document.getElementById('artname').value = data["ARTNAME"]
document.getElementById('description').value = data["DESCRIPTION"]
document.getElementById('price').value = data["PRIZE"]
}
</script>
<html>
<cfform>
id: <cfinput type="text" name="artid" id="artid"><br/>
nombre: <cfinput type="text" name="artname" id="artname" readonly="true"><br/>
descripcion: <cftextarea name="description" id="description" readonly="true"></cftextarea><br/>
precio: <cfinput type="text" name="price" id="price" readonly="true"><br/>
</cfform>
</html>
我还有以下代码:
<script>
function addFields(){
var number = document.getElementById("member").value;
var container = document.getElementById("container");
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
for (i=0;i<number;i++){
container.appendChild(document.createTextNode(i+1));
var input = document.createElement("input");
input.type = "text";
input.name = "member" + i;
var boton = document.createElement("input");
boton.name = "boton" + i;
container.appendChild(input);
container.appendChild(boton);
container.appendChild(document.createElement("br"));
}
}
</script>
<html>
Enter a number of persons: (max. 10)<input type="text" id="member" size="3" name="member" value="">
<a href="#" id="filldetails" onclick="addFields()">Agregar</a>
<div id="container"/>
</html>
上面的代码只是根据用户输入的数字添加文本字段，它也可以正常工作。
我的问题是我只是不知道如何集成它们，我的意思是我需要做的是取决于用户输入的部署文本字段的数量，并且第一个必须输入一个 id将带来与该 ID 相关的数据。
非常感谢!!
最佳答案
这是一个使用 jquery 的示例，涵盖了您想要执行的所有操作。
我将 ajax 请求更改为在输入字段更改时触发，而不是在键盘上触发，但如果需要，您可以轻松更改。
如果您使用 cf < 9，则 cfc 可能需要更改，并且我仅在 Firefox 中测试了它，但它应该可以在其他浏览器中工作。
index.cfm
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var formToCopy = $('<form/>')
.append($('<input/>', {'name': 'dataId', 'type': 'text', 'placeholder': 'Some Id Here'}))
.append($('<input/>', {'name': 'testInput', 'type': 'text', 'readonly': 'readonly'}))
.append($('<textarea/>', {'name': 'testArea', 'readonly': 'readonly'}));
$('#howMany').on('change', null, null, function(e){
var numToAdd = $(this).val();
if(isNaN(numToAdd)){
return;
}
$('#container').html('');
for(var i=0; i < numToAdd; i++){
$(formToCopy).clone().appendTo('#container');
}
});
$('#moar').on('click', null, null, function(e){
$(formToCopy).clone().appendTo('#container');
});
$('#less').on('click', null, null, function(e){
$('#container form:last').remove();
});
$(document).on('change', '#container form input[name="dataId"]', null, function(e){
if($(this).val().length === 0){
return;
}
var $formToFill = $(this).closest('form');
var ajaxSuccessFunc = function(data){
for(var key in data){
var item = data[key];
var $field = $formToFill.find('input[name="'+key+'"], textarea[name="'+key+'"]');
if($field.length === 1){
$field.val(item);
}
}
};
$.ajax({
'url': '/test.cfc',
'dataType': 'json',
'data': {
'method': 'getData',
'id': $(this).val()
},
'success': ajaxSuccessFunc
})
});
});
</script>
</head>
<body>
<label>How Many? <input type="text" id="howMany" /></label>
<p><a href="#zzz" id="moar">+</a> / <a href="#zzz" id="less">-</a></p>
<div id="container">
</div>
</body>
</html>
测试.cfc
<cfcomponent output="false">
<cffunction name="getData" access="remote" output="false" returnformat="json">
<cfargument name="id" type="string" required="true">
<cfscript>
local.ret = {};
ret["testInput"] = rand();
ret["testArea"] = "blah blah";
return ret;
</cfscript>
</cffunction>
</cfcomponent>
关于javascript - 使用 cfajaxproxy Ajax 调用 Coldfusion 组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18235988/