Connected CFSELECT, JQuery and Javascripts

Hi

I am starting out with Ajax and JQuery and need some help here.
I have a page that has 7 CFSELECT drop downs interconnected.
First one is populated onload and, the rest are populated depending on selection of previously selected.

Everything works well when I click with mouse except for one component.

All cfselect's are multi select except first one. I added Select All checkboxes with javascript. When I check that Select All checkbox, it highlights all entries in related drop down box just as intended but, next cfselect that suppose to be populated is not populated, obviously because I have no javascirpt event associated to it.

That is what I need help with.

Otherwise, when I click within the cfselect drop down with the mouse, everything works great selecting one or all entries.

Version CF9.

Here is the snippet:
<script type="text/javascript">
	jQuery(document).ready(function(){
		$('#planenrolldate_id').change(function(){
			clearBenefits();
		});

		$('#sellallplans').click(			
			function () {
				clearBenefits();
				if ($('#sellallplans').is(":checked")){
					$('#plan_id option').attr('selected', 'selected');
					populateEnrollments();
				}
				else {
					$('#plan_id option').attr('selected', false);
					//clearEnrollments();
				}
			}
		)
		
		
		function populateEnrollments(){

			//event to add??????????????????

		}
				
	});
</script>

....................
<cfselect name="plan_id" bind="cfc:somedir.dir.somefile.GetPlans(#REQUEST.SESS.lang_id#,{sponsor_id},0)" display="name" value="plan_id" multiple="yes" />
<input type="checkbox" name="sellallplans" id="sellallplans">Select All
.....................

<cfselect name="planenrolldate_id" bind="cfc:somedir.dir.somefile.GetPlanEnrollments({sponsor_id},{plan_id})" display="enroll_period" value="planenrolldate_id" multiple="yes" />
<input type="checkbox" name="sellallplanenrolls" id="sellallplanenrolls">Select All
............................

<cfselect name="bill_id" bind="cfc:somedir.dir.somefile.GetBills({sponsor_id},{plan_id},{planenrolldate_id})" display="bill_period" value="bill_id" multiple="yes" />

Open in new window


Any help greatly appreciated.
Thanks
jmergulhaoAsked:
Who is Participating?
 
ZvonkoConnect With a Mentor Systems architectCommented:
This lines do work:
		$('#sellallplans').click(			
			function () {
				clearBenefits();
				if ($('#sellallplans').is(":checked")){
					$('#plan_id option').attr('selected', 'selected');
				}
				else {
					$('#plan_id option').attr('selected', false);
				}
				ColdFusion.bindHandlerCache['planenrolldate_id'].call(); 
				ColdFusion.bindHandlerCache['bill_id'].call(); 
			}
		)

Open in new window

0
 
ZvonkoSystems architectCommented:
You have to fire this event:
$('#plan_id').onchange();

Open in new window

0
 
jmergulhaoAuthor Commented:
I did this and it doesnt work:

$('#plan_id').onchange(
   populateEnrollments();
)

function populateEnrollments(){
alert('just a test')
}
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
jmergulhaoAuthor Commented:
I added this event and getting alert() from error part of the function.

function populateEnrollments(){
			
			alert('event is not programmed yet')
			var pID = $('#plan_id').val(); 
			var sID = $('#sponsor_id').val(); 
			
			$.ajax({
				type:"POST",
				url:"../somedir/dir/somefile.cfc?method=GetPlanEnrollments&plan_id=" + pID + "&sponsor_id=" + sID,
				dataType: "json",          
				success: 
					function(data){                  
						$.each(data, function(index, item) {
							var option = $('<option />'); 
	     					option.attr('value', item.planenrolldate_id).text(item.enroll_period);  
							$('#planenrolldate_id').append(option); 
					});					
						
				},	//end the error function
				error: 
					function(){
						alert("An error has occurred while fetching enrollments");
					}	//end the error function
			});			
		}

Open in new window



Here is the output from Firebug
59.059.059.059.059.059.059.059.059.059.059.059.059.059.059.059.059.059.059.0177.0243.0177.0177.0243.0177.0177.0114.0114.0177.0114.0177.0114.0177.0114.0177.0114.0114.0114.0564.0561.0559.0524.0523.0517.0459.0460.0439.0438.0403.0402.0391.0390.0351.0359.0346.0262.0240.001/07/2012 - 31/05/2013 [177]01/06/2012 - 31/05/2013 [243]01/06/2012 - 30/06/2012 [177]01/08/2011 - 31/05/2012 [177]01/06/2011 - 31/05/2012 [243]01/06/2011 - 31/07/2011 [177]01/04/2010 - 31/05/2011 [177]01/04/2010 - 31/12/2010 [114]01/12/2009 - 31/03/2010 [114]01/12/2009 - 31/03/2010 [177]01/03/2009 - 30/11/2009 [114]01/03/2009 - 30/11/2009 [177]01/12/2008 - 28/02/2009 [114]01/12/2008 - 28/02/2009 [177]01/03/2008 - 30/11/2008 [114]01/03/2008 - 30/11/2008 [177]01/12/2007 - 29/02/2008 [114]01/12/2006 - 30/11/2007 [114]01/12/2005 - 30/11/2006 [114]

Open in new window


Should be getting
IDs:
564
561
559
524
523
517
459
460
439
438
403
402
391
390
351
359
346
262
240

enroll_periods
01/07/2012 - 31/05/2013 [177]
01/06/2012 - 31/05/2013 [243]
01/06/2012 - 30/06/2012 [177]
01/08/2011 - 31/05/2012 [177]
01/06/2011 - 31/05/2012 [243]
01/06/2011 - 31/07/2011 [177]
01/04/2010 - 31/05/2011 [177]
01/04/2010 - 31/12/2010 [114]
01/12/2009 - 31/03/2010 [114]
01/12/2009 - 31/03/2010 [177]
01/03/2009 - 30/11/2009 [114]
01/03/2009 - 30/11/2009 [177]
01/12/2008 - 28/02/2009 [114]
01/12/2008 - 28/02/2009 [177]
01/03/2008 - 30/11/2008 [114]
01/03/2008 - 30/11/2008 [177]
01/12/2007 - 29/02/2008 [114]
01/12/2006 - 30/11/2007 [114]
01/12/2005 - 30/11/2006 [114]
0
 
ZvonkoSystems architectCommented:
Check this:
		$('#sellallplans').click(			
			function () {
				clearBenefits();
				if ($('#sellallplans').is(":checked")){
					$('#plan_id option').attr('selected', 'selected');
					$('#plan_id').onchange();
				}
				else {
					$('#plan_id option').attr('selected', false);
					$('#plan_id').onchange();
				}
			}
		)
		

Open in new window

0
 
jmergulhaoAuthor Commented:
doesnt work

Check this:
$('#sellallplans').click(			
			function () {
				clearBenefits();
				if ($('#sellallplans').is(":checked")){
					$('#plan_id option').attr('selected', 'selected');
					$('#plan_id').onchange();
				}
				else {
					$('#plan_id option').attr('selected', false);
					$('#plan_id').onchange();
				}
			}
		)

Open in new window

0
 
ZvonkoSystems architectCommented:
What does the last posted version do?
Does it nothing when checkbox sellallplans is clicked?
Or does it select all options corectly in the plan_id but not the depending subselects?

Tell me what the effects are?
0
 
jmergulhaoAuthor Commented:
it selects all plans correctly but, does nothing in the dependant enrollments box
0
 
ZvonkoSystems architectCommented:
What CF version do you use?

Check this:
		$('#sellallplans').click(			
			function () {
				clearBenefits();
				if ($('#sellallplans').is(":checked")){
					$('#plan_id option').attr('selected', 'selected');
				}
				else {
					$('#plan_id option').attr('selected', false);
				}
				ColdFusion.Ajax.initSelect('planenrolldate_id','PLANENROLLDATE_ID','ENROLL_PERIOD');
				ColdFusion.Ajax.initSelect('bill_id','BILL_ID','BILL_PERIOD');
			}
		)
		

Open in new window

0
 
jmergulhaoAuthor Commented:
CF9
0
 
jmergulhaoAuthor Commented:
these lines dont work
ColdFusion.Ajax.initSelect('planenrolldate_id','PLANENROLLDATE_ID','ENROLL_PERIOD');
ColdFusion.Ajax.initSelect('bill_id','BILL_ID','BILL_PERIOD');

Open in new window

0
 
jmergulhaoAuthor Commented:
Thanks, Zvonko. Works great. How did you go about finding solution? I was checking jQuery documentation and did not find and never cross my mind to look at the CF documentation. I was not sure what I was looking for.
Thanks again!
Gena
0
 
ZvonkoSystems architectCommented:
At the end it depends all on sharing the knowling and not hiding it.
I learned that undocumented CF function call yesterday night from this site:
http://cfsearching.blogspot.de/2010/02/coldfusion-9-yet-another-way-to-refresh.html

By the way,  it works still in CF10.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.