[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 747
  • Last Modified:

jquery change select option text after binding values to cfml cfc

I have a form select with class="yesno" which I populate by binding to a cfc.  After binding, the options are set as follows:
<select id="FullYear" class="yesno" name="FullYear">
<option value="1">true</option>
<option value="0">false</option>
<option value="?">Uncertain</option>
</select>

Open in new window

I want to use jQuery to change the text of the option values with 1 and 0 from true and false to Yes and No.  I've tried to do this with the following jQuery code:
$('.yesno [value="1"]').text('Yes');	
$('.yesno [value="0"]').text('No');

Open in new window

I've tested this code with a static select option (populated in the html code -- not programatically) and it works, but it does NOT work on the select whose options are populated by binding to the cfc.
I "think" this is because the option tags do not exist immediately when the page loads (so there is nothing yet for jQuery to act upon).
How can I get things to work?
I've read a little about jQuery on() and delegate() but I don't really know how to use them (or if they are the right tools).
0
ShanghaiD
Asked:
ShanghaiD
  • 6
  • 4
  • 4
  • +1
1 Solution
 
Gurvinder Pal SinghCommented:
$("#FullYear option[value='1']").attr("option", "true");

$("#FullYear option[value='0']").attr("option", "false");
0
 
Gurvinder Pal SinghCommented:
sorry, try this

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

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

Open in new window

0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
Gurvinder Pal SinghCommented:
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");

});
0
 
ShanghaiDAuthor Commented:
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).
0
 
_agx_Commented:
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?
0
 
ShanghaiDAuthor Commented:
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>

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>

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).
0
 
Gurvinder Pal SinghCommented:
@ShanghaiD:
Did you tried what i had suggested?
0
 
ShanghaiDAuthor Commented:
gurvinder372:
Yes, I tried it but it also did not work on the bind select.
0
 
ShanghaiDAuthor Commented:
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>

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.
0
 
_agx_Commented:
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"]]}
0
 
ShanghaiDAuthor Commented:
_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?
0
 
_agx_Commented:
$('#y2006 option[value="0"]').text('No');

First I'd make sure the jquery code is even finding the list value in the first place.  The bind returns the list values as "1.0/0.0" not "1/0". So that's one possible issue.

why the jQuery attempt to change the select options after the cfc bind is still not working

Second, assuming it does work you'll almost certainly have timing collisions.  CF uses a different library for binding (extjs) and it's "ready" event is different than jquery's.  If you add an alert via ajaxOnLoad you'll probably see that jquery's ready event fires before CF's. So even if jquery made changes they'd be overwritten by the bind anyway.

You might be able to synchronize the events properly by calling them in ajaxOnLoad instead of ready()... but ultimately there may still be problems. You're using 2 different libraries to do the same thing (ie manipulate a select list's values) .. and they don't always play well together.  So imo you're better off using jquery -OR -extjs, but not both. At least not for this specific task.
0
 
ShanghaiDAuthor Commented:
_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!
0
 
_agx_Commented:
You're welcome :)
0

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 6
  • 4
  • 4
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now