jquery change select option text after binding values to cfml cfc

$("#FullYear option[value='1']").attr("option", "true");

$("#FullYear option[value='0']").attr("option", "false");

sorry, try this

$("#FullYear option[value='1']").html("Yes");

$("#FullYear option[value='0']").html("No");

$('#FullYear').load(function() {
$('#FullYear option[value="1"]').text('Yes');
$('#FullYear option[value="2"]').text('No');
});

Select all Open in new window

also try putting the code i have shared above in document.ready() event, or in the success event of an ajax call if these values are populated through ajax call

something like

$(document).ready(function(){

$("#FullYear option[value='1']").html("Yes");

$("#FullYear option[value='0']").html("No");

});

buggyCoder:
I'm not in the office now (it's night time in Shanghai) so I'll need to wait till tomorrow to test your solution (but I think it will work as it will not fire till after the load of the option elements has completed). I'll confirm further tomorrow (and award points).

which I populate by binding to a cfc


Just curious, why not simply change the bind results? I think the above will work, but ... some binds are triggered multiple times meaning the jquery changes may be overwritten.  What kind of bind is it?

BuggyCoder:
"not quite" and still very strange (and help still needed).
I tried your .load(function() -- but it did not work.  However, when I changed .load to .ready it did then work -- but again only on the html populated select options and not on the bind populated select options, so I am still without a solution.

_agx_:
My cfc bind only loads once on page load (and there is probably a simpler way of doing things without calling the cfc -- but I would like to understand why things are not working under my current code (before I explore alternative coding).

To enable you to reproduce things fully, here is code for my two files: selectqueries.cfc is used to bind the cfselect id="y2006" and the select id="y2007" is hard coded.  The jQuery code works on #y2007 but fails on #y2006:

selectqueries.cfc

<cfcomponent output="false">
 <cffunction name="getYesNoUncertain" access="remote" output="no" returntype="query" description="I am used on details.cfm to populate cfselects">
  <cfset q=QueryNew("V,D","VarChar,VarChar")>
  <cfset QueryAddRow(q,3)>
   <cfset q.V[1]="1">
   <cfset q.D[1]="Yes">
   <cfset q.V[2]="0">
   <cfset q.D[2]="No">
   <cfset q.V[3]="?">
   <cfset q.D[3]="Uncertain">
  <cfreturn q>
 </cffunction>
</cfcomponent>

Select all Open in new window

details.cfm

<cfform>
<label>y2006</label>
<cfselect id="y2006" name="y2006" bind="cfc:selectqueries.getYesNoUncertain()" value="V" display="D" bindonload="yes" selected="" class="yesno"></cfselect>
</cfform>

<form>
<label>y2007</label>
<select id="y2007" name="y2007">
<option value="1">true</option>
<option value="0">false</option>
<option value="?">Uncertain</option>
</select>
</form>

<script src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

$('#y2006').ready(function() {
$('#y2006 option[value="1"]').text('Yes');	
$('#y2006 option[value="0"]').text('No');
});

$('#y2007').ready(function() {
$('#y2007 option[value="1"]').text('Yes');	
$('#y2007 option[value="0"]').text('No');
});

});	
</script>

Select all Open in new window

I'm also curious why coldfusion gives "true" and "false" for the bound cfselect options when my cfc specifically shows "Yes" and "No" as display values and "1" and "0" -- VarChar text, not boolean -- as display values.  (This treatment by coldfusion was the whole reason why I started on this jQuery "solution" to my problem in the first place).

@ShanghaiD:
Did you tried what i had suggested?

gurvinder372:
Yes, I tried it but it also did not work on the bind select.

All:

I appreciate your help in trying to solve my original problem.

I have found a workaround alternative solution which avoids binding to the cfc and which uses jQuery only, as follows:

<cfselect id="y2008" name="y2008" />

<script type="text/javascript">
$(document).ready(function() {
$('#y2008').append('<option value="1">Yes</option><option value="0">No</option><option value="?">Uncertain</option>');
});	
</script>

Select all Open in new window

However, I am still interested in a solution to the original code problem -- so I can learn more -- and so I will leave this question open for now to award points later.

but I would like to understand why things are not working under my current code

Oh, now I see the problem. There's nothing wrong with your code. When the bind is triggered, CF returns the results as JSON. In the process its making some assumptions and always converts yes/no to boolean (ie true/false), no matter the data type of the query column. The only way around it is a hack, like adding a space to the end ie "Yes(space)" or "No(space)".

If you enable the ajax debugger you'll see the results:

* wrong (no a trailing space)
info:http: CFC invocation response: {"COLUMNS":["V","D"],"DATA":[[1.0,true],[0.0,false],["?","Uncertain"]]}

* correct (WITH a trailing space)
info:http: CFC invocation response: {"COLUMNS":["V","D"],"DATA":[[1.0,"Yes "],[0.0,"No "],["?","Uncertain"]]}

_agx_;
Thank you for the clear explanation of why CF returns boolean, and the hack to force Yes/No (with spaces).  I think those spaces can then be removed after the bind using Trim function (although the trailing space probably could stay attached in most cases).

As I have noted above, I found a more elegant jQuery solution to populate the select options (without the bind). (In fact there are multiple related selects to populate, which I achieve by making them all the same class).

Before I close this question out and award points, I would still like (if possible) to understand why the jQuery attempt to change the select options after the cfc bind is still not working, see above:

BuggyCoder:
"not quite" and still very strange (and help still needed).
I tried your .load(function() -- but it did not work.  However, when I changed .load to .ready it did then work -- but again only on the html populated select options and not on the bind populated select options.....

and my selectqueries.cfc and details.cfm code to reperform this.  
Any further insight by anyone on how to make things work properly with jQuery?

_agx_:

The 1/0 or 1.0/0.0 was not the issue.  Timing collisions (extjs and jQuery) makes sense to me.  I'll switch the CF bind to the pure jQuery alternative (and now things work).  I've learned a lot from your constructive feedback -- thank you!

You're welcome :)