Ajax call to coldfusion component using cfajaxproxy

2
votes

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

1
javascriptajaxcoldfusioncfajaxproxy
Do yourself a favor..stop using <cfajaxproxy> 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
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
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
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. - api.jquery.com/jQuery.ajax - Scott Stroz
@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

1 Answers

4
votes

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>