Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

Troubleshooting
Research
Professional Opinions
Ask a Question
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

troubleshooting Question

Update CFDIV when Dropdown is Dynamically Updated

Avatar of drgdrg
drgdrg asked on
ColdFusion LanguageJScriptAJAX
5 Comments1 Solution1243 ViewsLast Modified:
I have a page with a select and three CFDIV's.  The CFDIV's all have a bind statement that updates the CFDIV when a different option is chosen in the HTML SELECT

This works fine.

I am now dynamically removing items from the SELECT using javascript, and selecting another option in the SELECT list, which also works fine.

However, this does NOT trigger the BIND and the CFDIVs do not update.  The CFDIV's are all bound to the SELECT field and invoke a CFC that is using the ID number from the select to do its next step.

How can I force this to update (likely in the javascript block, but I'm not sure how).

I've seen Coldfusion.location (or something similar, my apologies if I have this wrong) but I don't think that's what I'm trying to do here (I could be wrong).  in all cases, I'm calling a CFC, not loading a CFM script inside the DIVs

Thanks
   
<!--- This javascript is used to remove an option from the Select ------------------>
<Script language="javascript">
function removeOptions(selectbox)
{
	var i;
	var j;
	for(i=selectbox.options.length-1;i>=0;i--)
		{
			if(selectbox.options[i].selected)
				{
					selectbox.remove(i);
					j = i-1;
					if(j>0)
						{
							selectbox.options[j].selected = true;
							break;
						}
				}
		}
}
</SCRIPT>

<!--- Start of the form --->
<CFFORM id="theform">
	<TABLE>
		<TR>
			<TD valign=top>
				<SELECT id="PID" name="PID" size="7" style="width: 350px;" onchange="document.theframe.location.href='calc.cfm';">
					<CFLOOP Query="q">
						<option value="#q.PID#" <CFIF q.CurrentRow eq 1>selected</CFIF>> #q.P#
					</CFLOOP>
				</SELECT>
			</TD>
			<TD valign=top>
				<!--- This dynamically loads a block of HTML that contain HTML buttons, with JS attached, to update content of the iframe below --->
				<!--- it is essentially loading different buttons that do different things, but all end with the onclick example below, which works fine:
						<button name="x" id="x" onclick="removeOptions(PID);"></button>
				--->
				<CFDIV bind="cfc:C.showbuttons({PID})" id="buttons"></cfdiv>
			</TD>
		</TR>
	</TABLE>
	<TABLE>
		<TR>
			<TD valign=top colspan=3>
				<CFDIV bind="cfc:C.showheading({PID})" id="bottomheading"></cfdiv>
			</TD>
		</TR>
		<TR>
			<TD valign=top><CFDIV style="width: 550px; overflow: auto;" bind="cfc:C.showdetails({PID})" id="bottom"></cfdiv></TD>
			<TD valign=top style="width: 20px;"></TD>
			<TD valign=top><iframe width="550" height="400" scrolling=no src="calc.cfm" name="theframe" id="theframe"></TD>
		</TR>
	</TABLE>
</CFFORM>
ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971Flag of Guadeloupe imageMultitechnician
Commented:
This problem has been solved!
Unlock 1 Answer and 5 Comments.
See Answers