asked on

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

Zvonko

You have to fire this event:

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

Open in new window

jmergulhao

ASKER

I did this and it doesnt work:

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

function populateEnrollments(){
alert('just a test')
}

jmergulhao

ASKER

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]

Zvonko

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

jmergulhao

ASKER

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

Zvonko

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?

jmergulhao

ASKER

it selects all plans correctly but, does nothing in the dependant enrollments box

Zvonko

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

jmergulhao

ASKER

CF9

jmergulhao

ASKER

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

ASKER CERTIFIED SOLUTION

Zvonko

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

jmergulhao

ASKER

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

Zvonko

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.