Solved

jquery change select option text after binding values to cfml cfc

Posted on 2012-03-28
15
648 Views
Last Modified: 2012-06-21
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
Comment
Question by:ShanghaiD
  • 6
  • 4
  • 4
  • +1
15 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 37776043
$("#FullYear option[value='1']").attr("option", "true");

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

Expert Comment

by:gurvinder372
ID: 37776048
sorry, try this

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

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

Expert Comment

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

Open in new window

0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 37776076
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
 

Author Comment

by:ShanghaiD
ID: 37776155
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
 
LVL 52

Expert Comment

by:_agx_
ID: 37777402
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
 

Author Comment

by:ShanghaiD
ID: 37780236
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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 40

Expert Comment

by:gurvinder372
ID: 37780245
@ShanghaiD:
Did you tried what i had suggested?
0
 

Author Comment

by:ShanghaiD
ID: 37780271
gurvinder372:
Yes, I tried it but it also did not work on the bind select.
0
 

Author Comment

by:ShanghaiD
ID: 37780280
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
 
LVL 52

Expert Comment

by:_agx_
ID: 37782903
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
 

Author Comment

by:ShanghaiD
ID: 37785301
_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
 
LVL 52

Accepted Solution

by:
_agx_ earned 500 total points
ID: 37788317
$('#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
 

Author Closing Comment

by:ShanghaiD
ID: 37789887
_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
 
LVL 52

Expert Comment

by:_agx_
ID: 37796792
You're welcome :)
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Hi. There are several upload tutorials using jquery and coldfusion. I found a very interesting one here Upload Your Files using Jquery & ColdFusion and Preview them (http://www.randhawaworld.com/) . I did keep the main js functions but made sever…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now