drgdrg
asked on
Update CFDIV when Dropdown is Dynamically Updated
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 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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
OK. I will play with it too.
ASKER
I've got to change the logic around a bit, but I tested & including the button click in the bind will do the trick. Thanks
You're welcome! Thanks for the points! Have a nice week-end!
ASKER
What I'm doing is using JS to change the selected item in a < SELECT > statement when a BUTTON is clicked on screen.
What I want to happen is have the CFDIV's that are bound to that SELECT re-trigger their CFC (contained in the BIND of the CFDIV) when the SELECT is changed. One of the parameters of the BIND is that SELECT variable. If I change the select using the mouse or keyboard, the bind works fine. If, however, I change it using Javascript, the bind isn't "listening" for that.
So I'm looking for one of these possible solutions:
1 - a way to use the JS block that updates the SELECT to then trigger the BIND to refresh, or
2 - have the BIND "listen" to the change that is triggered not by keyboard or mouse but by JS
Actually, as I write this, I wonder if I can do something like this in the BIND of the CFDIV... add in to the parameters of the BIND: ........,{button1@click},{
Hmmmmm.....
See, you did help! I will test over the weekend & post a solution for all, if it works :)