?
Solved

Connected CFSELECT, JQuery and Javascripts

Posted on 2012-08-29
13
Medium Priority
?
903 Views
Last Modified: 2012-08-29
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
0
Comment
Question by:jmergulhao
  • 7
  • 6
13 Comments
 
LVL 63

Expert Comment

by:Zvonko
ID: 38347106
You have to fire this event:
$('#plan_id').onchange();

Open in new window

0
 

Author Comment

by:jmergulhao
ID: 38347176
I did this and it doesnt work:

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

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

Author Comment

by:jmergulhao
ID: 38347271
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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 63

Expert Comment

by:Zvonko
ID: 38347369
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
 

Author Comment

by:jmergulhao
ID: 38347406
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 38347537
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
 

Author Comment

by:jmergulhao
ID: 38347548
it selects all plans correctly but, does nothing in the dependant enrollments box
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 38347901
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
 

Author Comment

by:jmergulhao
ID: 38347944
CF9
0
 

Author Comment

by:jmergulhao
ID: 38348076
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
 
LVL 63

Accepted Solution

by:
Zvonko earned 2000 total points
ID: 38348337
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
 

Author Closing Comment

by:jmergulhao
ID: 38348359
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 38348918
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

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is an updated version of a post made on my blog over 3 years ago. It is unfortunately, still very relevant as we continue to see both SQLi (SQL injection) and XSS (cross site scripting) attacks hitting some of the most recognizable website and …
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…
In a question here at Experts Exchange (https://www.experts-exchange.com/questions/29062564/Adobe-acrobat-reader-DC.html), a member asked how to create a signature in Adobe Acrobat Reader DC (the free Reader product, not the paid, full Acrobat produ…
Look below the covers at a subform control , and the form that is inside it. Explore properties and see how easy it is to aggregate, get statistics, and synchronize results for your data. A Microsoft Access subform is used to show relevant calcul…
Suggested Courses

862 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