Ajax call to coldfusion component using cfajaxproxy

Question

I´m stuck with the follow code, hope somebody can help or give me some advice: basically what i´m doing is to call a cf function using ajax: when the user write an id in the field "artid" information related to that id will appear in the others cfinput. the above code works fine.

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

i also have the follow code:

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

the above code is just adding text fields depending on the number that the user's entered,it also works fine.

My problem is that i just can´t figure out how to integrate both of them, i mean what i need to do is depending on the number that the user types were deployed text fields and the first one must type an id which will bring the data related to that ID.

Thank you so much!!

Do yourself a favor..stop using `` and <`cfform>` (and any other client slide functionality in ColdFUsion). Rip all thsi stuff out and learn how to do it in JavaScript using jQuery or some other JavaScript library. The ColdFusion client side stuff is nto as robust as it needs to be and you will likely run into issues with it. — Scott Stroz, Aug 14 '13 at 16:02
Seconded. Especially if you are just starting with this stuff now (as opposed to doing legacy maintenance stuff), just stop, and use HTML and a decent JS UI library. The ColdFusion UI stuff is not really fit for anything other than proof of concept, and for Adobe to sell CF licences to IT Managers. — Adam Cameron, Aug 14 '13 at 16:07
thank you for your advices, I had never used cfajaxproxy I did it because I found it easy, could you tell me about some tutorials or examples related to what i need, i would really appreciate it, i´m out of time with this problem. — user2683052, Aug 14 '13 at 17:27
Considering you are asking for help on this issue, I would argue your assertion that `cfajaxproxy` is 'easy'. Here is a good place to get started learning jQuery and its .ajax() methos. - http://api.jquery.com/jQuery.ajax/ — Scott Stroz, Aug 14 '13 at 17:29
@user2683052 - If I am understanding the goal correctly, it involves binding to *dynamically* added form fields on-the-fly. In which case you probably cannot use cfjaxproxy anyway. — Leigh, Aug 14 '13 at 21:25
Cfajaxproxy sis essentially training wheels for someone who doesnt know any jquery — Jay Rizzi, Aug 14 '13 at 22:10
Thank you all! I'm a newbie in these things and all were very helpful advice — user2683052, Aug 15 '13 at 13:01

score 4 · Accepted Answer · answered Aug 14 '13 at 21:44

Here's a example using jquery that covers everything you want to do.

i changed the ajax request to fire on change of the input field instead of keyup but you could change that easily if required.

The cfc might need changing if you using cf < 9 and I've only tested it in firefox but it should work in other browsers.

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>

OMG! you're so cool! thank you soo much!!! you have no idea how much time i've been trying to make this code to work. really really thank you so much! that's just exactly what i need!! — user2683052, Aug 15 '13 at 12:55
sorry for bother but could you help me with one more thing? instead cfscript at the test.cfc i need cfquery, well i do know how to do that, what i don´t know is how to make the text fields receive the information within a cfquery. thanks! — user2683052, Aug 15 '13 at 14:27
i've modified .cfc and here´s the result: `myQry = new Query(); qryRes = myQry.execute(sql="select * from art where artid = '#id#'").getResult(); ret["testInput"] = #qryRes.artname#; ret["testArea"] = #qryRes.description#; return ret;` but it is not working. — user2683052, Aug 15 '13 at 15:44
Without seeing the error message i can't tell for certain but it might be because your missing datasource ie `local.myQry = new Query(datasource: "SOME_DATASOURCE"); local.qryRes = myQry.execute(sql="SQL").getResult();` — Snipzwolf, Aug 17 '13 at 11:32

Ajax call to coldfusion component using cfajaxproxy

1 Answers1

index.cfm

test.cfc