tags:

views:

217

answers:

1

Within a form I have a button that launches a cfwindow, then presents a search screen for the user to make a selection. Once selection is made, the cfwindow closes and the selected content shows in the main page by being bound to a cfdiv. This all works fine in FF but the cfdiv doesn't show at all in IE. In IE, the cfwindow works, the select works, but then no bound page. I have tried setting bindonload and that made no difference (and I need it to be true if there is content that is pulled in via a query when it loads). All I have been able to find so far regarding this issue is setting bindonload to false and putting the cfdiv outside of the form but that's not possible in my current design.

*4/21 update This works as expected in FF 3.6.3 and Safari 4, but does not work in multiple IE versions. In IE, the cfwindow works, the select works, but when the window closes and it tries to load the page into the div it just spins.

This is the main page, test.cfm:

<cfajaximport tags="cfwindow, cfform, cfdiv, cftextarea, cfinput-datefield">        
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
<body>
<cfset i = 1>
<cfform>
<table>
    <cfloop from="1" to="4" index="n">
        <tr>
            <td class="left" style="white-space:nowrap;">
                <cfoutput>#n#</cfoutput>.&nbsp;<cfinput type="button" value="Select #n#" name="x#n#Select#i#" onClick="ColdFusion.Window.create('x#n#Select#i#', 'Exercise Lookup', 'xSelect/xSelect2.cfm?xNameVar=x#n#S#i#&window=x#n#Select#i#&workout=workout#i#', {x:100,y:100,height:500,width:720,modal:true,closable:true,draggable:true,resizable:true,center:true,initshow:true,minheight:200,minwidth:200 })" />
                &nbsp;      
                <cfdiv bind="url:xSelect/x2.cfm" ID="x#n#S#i#" tagName="span" bindonload="false" />
                <cfinput type="hidden" ID="x#n#s#i#" name="x#n#s#i#" value="#n#" />
            </td>
        </tr>
    </cfloop>
</table>
</cfform>
</body>
</html>

This is the cfwindow, xSelect2.cfm:

<cfparam name="form.xSelected" default="0">         
<cfoutput>
<a href="javascript:ColdFusion.navigate('xSelect/x2.cfm?xNameVar=#url.xNameVar#&xID=1&xName=1', '#xNameVar#');ColdFusion.Window.hide('#url.window#')">1</a><br />
<a href="javascript:ColdFusion.navigate('xSelect/x2.cfm?xNameVar=#url.xNameVar#&xID=2&xName=2', '#xNameVar#');ColdFusion.Window.hide('#url.window#')">2</a><br />
<a href="javascript:ColdFusion.navigate('xSelect/x2.cfm?xNameVar=#url.xNameVar#&xID=3&xName=3', '#xNameVar#');ColdFusion.Window.hide('#url.window#')">3</a><br />
<a href="javascript:ColdFusion.navigate('xSelect/x2.cfm?xNameVar=#url.xNameVar#&xID=4&xName=4', '#xNameVar#');ColdFusion.Window.hide('#url.window#')">4</a><br />
</cfoutput>

This is the page bound to the cfdiv, x2.cfm:

<cfajaximport tags="cfwindow, cfform, cfdiv, cftextarea, cfinput-datefield">

<cfparam name="url.xName" default="">
<cfparam name="url.xNameVar" default="">
<cfparam name="url.xID" default=0>
<form>
<cfoutput>
<input type="text" id="xName" name="xName" value="#url.xName#" size="27" disabled="true" />
<input type="hidden" id="xNameVar" name="xNameVar" value="#url.xNameVar#" />
<input type="hidden" id="#url.xNameVar#xID" name="#url.xNameVar#xID" value="#url.xID#" />
</cfoutput>
</form>

I am significantly stuck so any help is greatly appreciated.

AND OF COURSE IF ANYONE HAS A BETTER IDEA OF HOW TO ACHIEVE THE SAME FUNCTIONALITY PLEASE SHARE!

Thanks!

A: 

The answer was very, very simple. I got the clue from Mathijs' Weblog on whitehorsez.com (thank you!!).

Evidently IE doesn't like nested forms so all I needed to do in the end was remove the form tags from x2.cfm above. It makes that page incorrect, but when read into the cfdiv it works and posts all the correct values to the form. I finished one other rough solution using getElementById which eliminated the extra page but the problem with it was that you had to save before you could change the value if there were multiple options. Here is the new and simple x2.cfm:

<cfoutput>
<input type="text" name="xName" value="#url.xName#" size="27" disabled="true" />
<input type="hidden" name="xNameVar" value="#url.xNameVar#" /> 
<input type="hidden" name="#url.xNameVar#xID" value="#url.xID#" />
</cfoutput> 
JS