文章/答案/技术大牛

发布

社区首页 >问答首页 >使用cfajaxproxy对coldfusion组件的Ajax调用

问使用cfajaxproxy对coldfusion组件的Ajax调用
EN

Stack Overflow用户

提问于 2013-08-14 15:31:24

回答 1查看 3.9K关注 0票数 2

我被困在下面的代码中，希望有人能帮我或者给我一些建议:基本上，我所做的是使用ajax调用一个cf函数:当用户在字段中写一个id时，与该id相关的"artid“信息将出现在其他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相关的数据。

非常感谢！

javascript

ajax

coldfusion

cfajaxproxy

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-08-14 21:44:24

下面是一个使用jquery的示例，它涵盖了您想要做的一切。

我将ajax请求更改为在更改输入字段时触发，而不是keyup，但如果需要，您可以轻松地更改该请求。

如果您使用cf <9，并且我只在firefox中测试过它，那么cfc可能需要更改，但它应该可以在其他浏览器中工作。

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>

test.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>

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/18235988

复制

相似问题

问使用cfajaxproxy对coldfusion组件的Ajax调用
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用cfajaxproxy对coldfusion组件的Ajax调用EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用cfajaxproxy对coldfusion组件的Ajax调用
EN