ColdFusion Struct and Ajax

4
votes

I have a simple form with a select and a text box. Using the change function, I call a cfc that runs a query and returns a result: right now, as a struct. As odd as this may sound, I need help getting the data out of that struct and into the text box.

Below is what I have for the cfm and the cfc. Any help would be REALLY appreciated.

test.cfm (this is just a simple form)

<cfquery name="getHRSpecialists" datasource="AOO">
    SELECT * FROM [52PrepHRSpecialists]    
</cfquery>

<script src="jquery-2.2.3.min.js"></script>
<script>
$(document).ready(function() {
    $textBox6 = $("#textBox6");
    $("#textBox5").change(function(e) {
        var selected = $(this).val();
        console.log('change:', selected);
        if(selected === '') return;
        $.get("getHRPhone.cfc?method=getPhone", {textBox5:selected}, function(res) {
            $textBox6.html(res);
        });
    });
});
</script>

<cfform>
    <cfselect name="textBox5" id="textBox5" title="Select You Human Resource Specialist's Name" class="headerFields">
       <option value="">Choose a Specialist</option>
       <cfoutput query="getHRSpecialists">
           <option value="#hrSpecName#">#hrSpecName#</option>
       </cfoutput>    
    </cfselect>

    HRS's Phone #: 
    <cfinput id="textBox6" 
           name="textBox6" 
           type="text" 
           title="Your Human Resource Specialist's Phone ##"
           readonly>

</cfform>

getHRPhone.cfc (this is the cfc that gets referenced from the ajax call)

<cfcomponent output="false"> 
    <cffunction name="getPhone" access="remote" output="true" returntype="struct" returnformat="json">
        <cfargument name="textBox5" type="string" required="true" >

        <cfquery name="getPhone" datasource="AOO">
            SELECT hrSpecPhone
            FROM   [52PrepHRSpecialists]
            WHERE  hrSpecName = '#arguments.textBox5#'
        </cfquery>

        <cfset local.obj =  {phone = getPhone.hrSpecPhone} >        

        <cfreturn local.obj>
    </cffunction>
</cfcomponent>

Data (this is the data I get back)

{"PHONE":"123-456-7890"}

All I need is the actual phone number in the input box based on whoever is selected.

3
jqueryajaxcoldfusion
res.PHONE might be the answer. Care for correct caseing. When Coldfusion serializes the data in a structure it might alter upper/lower caseing. Use the F12 tool of your browser (Firebug maybe also in Mozilla Browser). there's a network tab, you should see the serialized response there. - Bernhard Döbler
I have the proper response back. And, I can load onto the page...just not into the text field. Which is where I am stumped. - John Eubanks
(Edit) Did you try Bernhard's suggestion to set the text box val()? Nothing to do with the question, but A) there is no need for any of the CF form controls in the above code, and it may even cause problems down the road. Instead, use plain html controls ie <form>, <select>, etectera and B) Do not forget to use cfqueryparam. - Leigh
Bernhard, works like a charm. Many thanks from a fairly new jquery newb. - John Eubanks
@BernhardDöbler - You should post that as an "answer". - Leigh

3 Answers

1
votes

Here is the complete working code. and you only need to change test.cfm and the getHRPhone.cfc is working as expected.

<cfquery name="getHRSpecialists" datasource="AOO">
    SELECT * FROM [52PrepHRSpecialists]    
</cfquery>


<script src="jquery-2.2.3.min.js"></script>


<script>
$(document).ready(function() {
    $textBox6 = $("#textBox6");
    $("#textBox5").change(function(e) {
        var selected = $(this).val();
        console.log('change:', selected);
        if(selected === '') return;
        $.get("getHRPhone.cfc?method=getPhone", {textBox5:selected}, function(res) {

            var $hr = $.parseJSON(res);
            $textBox6.val($hr.PHONE);
        });
    });
});
</script>

<cfform>
    <cfselect name="textBox5" id="textBox5" title="Select You Human Resource Specialist's Name" class="headerFields">
       <option value="">Choose a Specialist</option>
       <cfoutput query="getHRSpecialists">
           <option value="#hrSpecName#">#hrSpecName#</option>
       </cfoutput>    
    </cfselect>

    HRS's Phone #: 
    <cfinput id="textBox6" 
           name="textBox6" 
           type="text" 
           title="Your Human Resource Specialist's Phone ##"
           readonly>

</cfform>
1
votes

res.PHONE might be the answer. Care for correct caseing. When Coldfusion serializes the data in a structure it might alter upper/lower caseing. Use the F12 tool of your browser (Firebug maybe also in Mozilla Browser). there's a network tab, you should see the serialized response there.

0
votes

You're almost there, just need to get the phone number from the JSON object returned.

replace this:

    $textBox6.html(res);

with this:

    var data = $.parseJSON(res);
    // console.log(data);
    $textBox6.val(data.PHONE);