Turn Coldfusion Query Results Into X-Editable Data-Source

Question

I'm using the plugin x-editable and I'm trying to figure out how to load a list of State names into a select list for inline editing.

Basically, I've queried the database:

<cfquery datasource="#application.dsn.recAppTest#" name="states">
    SELECT * FROM dbo.states ORDER BY StateName ASC
</cfquery>

And I set the HTML:

<label class="control-label" for="state">State:
    <a href="##" id="state" data-source="#states#">#session.state#</a>
</label>

And here is the jQuery:

$('#state').editable({
    name: 'state',
    type: 'select',
    placement: 'right',
    url: 'update-session.cfm',
    send: 'always'
});

Note, this does not work, it yields this error:

The expression has requested a variable or an intermediate expression result as a simple     
value, however, the result cannot be converted to a simple value. Simple values are   
strings, numbers, boolean values, and date/time values. Queries, arrays, and COM objects 
are examples of complex values. <p> The most likely cause of the error is that you are 
trying to use a complex value as a simple one. For example, you might be trying to use a 
query variable in a cfif tag.

The data-source attribute for this plugin only accepts arrays, or objects (arrays preferred because objects can lose ordering).

So how do I turn my coldfusion query into a "javascript array" to use as a datasource?

My only thought is to "construct" a string that matches the array syntax, but Im trying to avoid something like that

Answer 1

you need to pass JSON into your data-source attribute

<label class="control-label" for="state">State:
  <a href="##" id="state" data-source="#serializeJSON(states)#">#session.state#</a>
</label>

You may need to do more manipulation to the query to get it working how you want, but at a minimum the data-source attribute needs JSON