2

我坚持使用以下代码，希望有人可以帮助或给我一些建议：基本上我正在做的是使用 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 相关的数据。

太感谢了！！

4

1 回答 1

4

这是一个使用 jquery 的示例，它涵盖了您想要做的所有事情。

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

如果您使用 cf < 9，则 cfc 可能需要更改，并且我只在 firefox 中对其进行了测试，但它应该可以在其他浏览器中使用。

索引.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>
于 2013-08-14T21:44:24.027 回答