Bind with CFSelect Not Showing Data

[bfleishman]

I have a CFC that I can access directly and get data. I am binding the cfc to a cfselect like so.

<cfform>

<cfselect name="category" bind="cfc:cfcs.menusdata.getData()" bindonload="true"></cfselect>

</cfform>

My cfc is located in a directory named cfcs at the application root. The name is menudata.cfc and the method is getData. I can access it fine by goign to the URL as so.

http://siteurl/cfcs/menudata.cfc?method=getData

It displays the data fine:
DinnerFridayMondaySaturdaySundayThursdayTuesdayWednesday

However when I try to look at the page the cfselect is on it shows me an empty drop down box with no selections. The function is just a simple query that return the records. Here is my cfc:

<cfcomponent>

<cffunction name="getData" access="remote" returntype="query" output="yes">

    <cfset var q = "">

    <cfquery name="q" datasource="ezpay">

    select description

    from service_descriptions

    </cfquery>

  <cfreturn q>

</cffunction>

</cfcomponent>

I have been banging my head against this one for a few days now so any outside eyes would be helpful. Anybody else run into this issue where the cfc works fine but does not appear to be binding to the cfselect for whatever reason? ColdFusion 8 is my server.

Many thanks.

-Brian

[bfleishman]

Nobody has any suggestions? Come on, there must be something that I can try.

-Brian

[Miguel-F]

Hopefully this is just a typo in your post here but you state that your cfc is named 'menudata.cfc'.  The sample code of your cfselect statement is calling 'menusdata' (with an s).

[bfleishman]

Yes just a typo in my post.

[12Robots]

My usual advice is not to use cfform (for anything), but I'll offer this.

I see in this example from Dan Short (http://www.dansshorts.com/post/cfselect-binding-and-selectedvalues) that he is specifying which columns to use for the "value" and "display" of the list. I don't see you doing that. It looks like since you are only returning a single value you could get away with *just* specifying the value.

<cfselect name="category" bind="cfc:cfcs.menudata.getData()" bindonload="true" value="description"></cfselect>

Hope that helps.

Jason

[bfleishman]

Thanks I'll try that and post my results. What would you use besides <cfform> ?

[12Robots]

HTML forms combined with jQuery or another JS library (prototype, Mootools, Dojo, etc).

jason

[bfleishman]

No change.

Here is my current form code. I added a textarea with a similar bind just to test if the value parameter would work on that field. It just displayed the string "description", no values from my DB.

I also added <cfoutput> tags just in case, but that didn't help either.

<label for="idList">Select A Description:</label>

<cfoutput>

<cftextarea name="description" value="description" bind="cfc:cfcs.menudata.step1()"></cftextarea>

<cfselect name="description" bind="cfc:cfcs.menudata.getData()" bindonload="true" value="description"></cfselect>

</cfoutput>

[bfleishman]

I enabled AJAX debugging and here is the output: You can see the data being present but the first line indicates a syntax error somewhere. Ciould this be the source of the issue? How can I tropubleshoot this?

====================================================================

window:global: SyntaxError: parseJSON (https://www2.jaydien.com/CFIDE/scripts/ajax/package/cfajax.js, line 798)

info:http: CFC invocation response:                   [[1,"Dinner"],[6,"Friday"],[2,"Monday"],[7,"Saturday"],[8,"Sunday"],[5,"Thursday"],[3,"Tuesday"],[4,"Wednesday"]]

info:http: HTTP GET /serviceticket/cfcs/menudata.cfc?method=getData&returnFormat=json&argumentCollection=%7B%7D&_cf_nodebug=true&_cf_nocache=true&_cf_clientid=7FE14AFDFDB53F783206BC158C577ECD&_cf_rc=0

info:http: Invoking CFC: /serviceticket/cfcs/menudata.cfc , function: getData , arguments: {}

info:LogReader: LogReader initialized

info:global: Logger initialized

[bfleishman]

Some more info:

I setup a test VM running CF9  just to test my code out on a different platform. Same result. Cfdebug shows:

window:global: SyntaxError: parseJSON (http://ezpay/CFIDE/scripts/ajax/package/cfajax.js, line 803)

Any suggestions anyone?

[bfleishman]

Anyone? I've been banging my head against my desk for days on this.

-Brian

[12Robots]

I could have rewritten that functionality with jQuery 170 times in so many days.  Just sayin'.

Jason

[bfleishman]

That's real helpful. Thanks.

-Brian

[12Robots]

I tried to help already. Don't get too snotty. The simple fact is that cfforms suck. They really do. I can't recommend using them, ever.

I'm not sure what else to do except encourage you to use a better solution. As far as I am concerned, that *is* helpful.

Jason

[Adam Cameron.]

I concur with Jason, Brian: his suggestion of not using <cfform> *is* the best approach here.

<cfform> has its place if you want to do exactly what it sets out to do, but it quickly gets to be a pain in the butt if one strays outside of a narrow margin of expectations.

<cfform> is not designed to be all things to all people, it's designed to be some things to some people, and - if I'm honest - people whose requirements are generic and simple.

If you stray beyond that fit, you're better off not trying to squeeze its round peg through your oval hole (OK, that sounds inappropriate, but you get my drift hopefully), instead just go and write an oval peg.  Doing all this stuff with JQuery (and probably other JS frameworks... I only have exposure to JQuery) is dead easy.  Easier than coercing a misbehaving CFFORM.

Stop banging yer head, and bin the CFFORM and redo with HTML / JQuery.

--

Adam

[bfleishman]

Ok. Point taken.

I have no real knowledge of jquery but will try. Any good tutorials you coul link?

[12Robots]

There are tutorials all over for jQuery. But to get you started, try this out.  It should work with your remote function based on the output you showed above.

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>jQuery Demo</title>

        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

        <script>

            // When the DOM is ready, this will run

            $(function(){

                // The URL to the remote CFC

               // Replace this value with the path to your CFC if I don't have it right

                var url = "/serviceticket/cfcs/menudata.cfc";

                // The data to be passed along as params to the call

                var params = {

                    method : "getData"

                }

                // make the ajax call

                $.ajax({

                    url: url,

                    data: params,

                    dataType: "json",

                    success: function(data, txt, xhr) {

                        // When the ajax call is successful

                        // Loop over each element of the array

                        $.each(data, function(i, n){

                            // Create an option element

                            var $tempOption = $("<option></option>");

                            //Set the value and display text for the option

                            $tempOption.attr({value:data[0]});

                            $tempOption.html(data[1]);

                            // Append the option to the select element

                            $('#mySelect').append($tempOption);

                        })

                    },

                    error: function(xhr, txt, error) {

                        console.log("Error:" + error);

                    }

                });

            });

        </script>

    </head>

    <body>

        <select id="mySelect"></select>

    </body>

</html>

[bfleishman]

Thank you very much for the example. This will definitely help.

-Brian

[12Robots]

I just realized I forgot an important param. Modify the param code like this:

var params = {

     method : "getData",

     returnFormat : "json"

}

[bfleishman]

Awesome. Will do.

Thanks.

[bfleishman]

I implemented your code, but the select is still empty. Firebug doesn't show any errors and the data is pulled from my CFC I believe:

FROM FIREBUG---> {"COLUMNS":["DESCRIPTION"],"DATA":[["Dinner"],["Friday"],["Monday"],["Saturday"],["Sunday"],["Thursday"],["Tuesday"],["Wednesday"]]}

Do I need to also specify the form name along with the <select> name in the script in order to pass the data ti to the form field?

Thanks

-Brian

[12Robots]

Well now, hold on. That output is *very* different than the output you showed us earlier.

Recall this from your previous post:

info:http: CFC invocation response:                   [[1,"Dinner"],[6,"Friday"],[2,"Monday"],[7,"Saturday"],[8,"Sunday"],[ 5,"Thursday"],[3,"Tuesday"],[4,"Wednesday"]]

I will try to modify the code to work.

jason

[12Robots]

OK, modified.

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>jQuery Demo</title>

        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

        <script>

            // When the DOM is ready, this will run

            $(function(){

                // The URL to the remote CFC

                var url = "/serviceticket/cfcs/menudata.cfc";

                // The data to be passed along as params to the call

                var params = {

                    method : "getData",

                    returnformat : "json"

                }

                // make the ajax call

                $.ajax({

                    url: url,

                    data: params,

                    dataType: "json",

                    success: function(data, txt, xhr) {

                        // When the ajax call is successful

                        // Get the array of values out of the response

                        values = data.DATA;

                        // Loop over each element of the array

                        $.each(values, function(i, n){

                            // Create an option element

                            var $tempOption = $("<option></option>");

                            //Set the value and display text for the option

                            $tempOption.attr({value:values}); 

                            // In This case they value and display text are the same.

                            $tempOption.html(values);

                            // Append the option to the select element

                            $('#mySelect').append($tempOption);

                        })

                    },

                    error: function(xhr, txt, error) {

                        console.log("Error:" + error);

                    }

                });

            });

        </script>

    </head>

    <body>

        <select id="mySelect"></select>

    </body>

</html>

[itisdesign]

Hi Brian,

If there is in fact a bug, then it'd be good to determine what it is.  Could you please verify if the following throws the same error?

index.cfm

-----------

<cfform>

<cfselect name="category" bind="cfc:cfcs.menudata.getData()" bindonload="true" value="description" />

</cfform>

menudata.cfc

-----------

<cfcomponent>

<cffunction name="getData" access="remote" returntype="query" output="yes">

  <cfset var q = "">

  <cfscript>

    q = queryNew("description", "varchar");

    queryAddRow(q, 8);

    querySetCell(q, "description", "Dinner", 1);

    querySetCell(q, "description", "Monday", 2);

    querySetCell(q, "description", "Tuesday", 3);

    querySetCell(q, "description", "Wednesday", 4);

    querySetCell(q, "description", "Thursday", 5);

    querySetCell(q, "description", "Friday", 6);

    querySetCell(q, "description", "Saturday", 7);

    querySetCell(q, "description", "Sunday", 8);

  </cfscript>

  <cfreturn q>

</cffunction>

</cfcomponent>

Just try exactly that.  If these two files still produce the same issue, and if there is an Application.cfm/cfc, then try commenting out the code w/in it and try these two files again.

Thanks,

-Aaron

[bfleishman]

Thanks Aaron,

I tried your initial code exactly and had the same result, empty select.

I then commented out everything in the application.cfm file and had the same result also. HEre is my AJAX debug output:

info:http: CFC invocation response:                 {"COLUMNS":["DESCRIPTION"],"DATA":[["Dinner"],["Monday"],["Tuesday"],["Wednesday"],["Thursday"],["Friday"],["Saturday"],["Sunday"]]}

info:http: HTTP GET /serviceticket/cfcs/menudata.cfc?method=getData&returnFormat=json&argumentCollection=%7B%7D&_cf_nodebug=true&_cf_nocache=true&_cf_rc=0

info:http: Invoking CFC: /serviceticket/cfcs/menudata.cfc , function: getData , arguments: {}

info:LogReader: LogReader initialized

info:global: Logger initialized

-Brian