Link to home
Start Free TrialLog in
Avatar of sulzener
sulzenerFlag for United States of America

asked on

CF/Javascript Popup/Select logic wont work in FireFox

I am trying to get all my IE ColdFusion code to work in Firefox.  My popups that contain Javascript will not work in Firefox.  Basiccally, I've done a fair amount of popups that allow users to select from a list and then it places the selection in an INPUT box from the calling form.  Can someone look at this and determine why it wont work?  Thanks, sulzener
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>Select List</title>
	<script language="JavaScript">
	function setValue() {
	     window.opener.document.getElementById('AssignedTo').value = document.getElementById('ValueSelect').value;
		 window.close(); /* added to close the window after selection */
	}
	</script>	
</head>
 
<body onblur="window.setFocus()" onunload="setValue()">
 
<cfoutput>
<cfquery name="SelectList" datasource="#Request.UserDSN#">
	Select Description From tblLogin
	Where 	Location = '#Session.Location#'
	Order by Description
</cfquery>
<TABLE ALIGN="center">
<TR>
<TD>
	<select name="ValueSelect" size="10" ondblclick="setValue();" style="font-size:10px">
		<option value=""></option>		
		<cfloop query="SelectList">
	      	<option value="#Description#">#Description#</option>				
		</cfloop>	
	</select>	
</TD>
</TR>	
<TR ALIGN="center">		
<TD>
	<input type="button" value="Select" onClick="setValue()">
	<input type="button" name="Close" value="Close" onClick="window.close()">						
</TD>
</TR>
</TABLE>
 
</body>
</html>
</cfoutput>

Open in new window

Avatar of Andrew Maurer
Andrew Maurer
Flag of United States of America image

Try...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
        <title>Select List</title>
        <script language="JavaScript">
        function setValue() {
             window.opener.document.getElementById('AssignedTo').value = document.getElementById('ValueSelect').value;
                 window.close(); /* added to close the window after selection */
        }
        </script>       
</head>
 
<body onblur="window.setFocus()" onunload="setValue()">
 
<cfoutput>
<cfquery name="SelectList" datasource="#Request.UserDSN#">
        Select Description From tblLogin
        Where   Location = '#Session.Location#'
        Order by Description
</cfquery>
<TABLE ALIGN="center">
<TR>
<TD>
        <select name="ValueSelect" size="10" onchange="setValue();" style="font-size:10px">
                <option value=""></option>              
                <cfloop query="SelectList">
                <option value="#Description#">#Description#</option>                            
                </cfloop>       
        </select>       
</TD>
</TR>   
<TR ALIGN="center">             
<TD>
        <input type="button" value="Select" onClick="setValue()">
        <input type="button" name="Close" value="Close" onClick="window.close()">                                               
</TD>
</TR>
</TABLE>
 
</body>
</html>
</cfoutput>

Open in new window

Avatar of sulzener

ASKER

zadoc, thanks, but what is different?  I cannot tell.
<select name="ValueSelect" size="10" onchange="setValue();" style="font-size:10px">
Okay, that did not work.  It appears the SetValue function is not working.  Even if I click "Select", nothing happens at all.  The only thing that works is the "Close" button.
I haven't used the opener property... but here is what I found about it....

The opener Property

The opener property sets or retrieves a reference to the window that created the current window. When a source document opens a destination window by calling the open() method, the opener property (of the destination window's window object) specifies the window of the source document. This property persists across document unload in the opened window, so it can be accessed even if the URL in the new window is changed.


Are you using open() ? or just target="newwindowname" ?
Also... I dont see an "ID" on your "ValueSelect" dropdown box... you'll need one for getElementsById() to work
I read some other post mentioning the ID.  I tried this, but it still did not work:
<select ID="ValueSelect" name="ValueSelect" size="10" onchange="setValue();" style="font-size:10px">
<option value=""></option>            
<cfloop query="SelectList">
<option value="#Description#">#Description#</option>                        
</cfloop>      
</select>      
Not sure how to code the ID?
Here is the code that opens the popup:
<INPUT TYPE="button" VALUE="..." CLASS="buttonSelect" onclick="javascript:popupTechSelect()">

<script language="JavaScript">
<!--
function popupTechSelect() {
var winStateInputBox;
winStateInputBox = window.open('SelectTech.cfm', 'namTechSelect','toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=300,height=380');
}
//-->
</script>      
make sure that in your opener window the element you are setting a value of from popup has a correct ID attribute (id="AssignedTo").

IE has a bug that makes it still return an element using getElementById() even if that element only has a NAME attribute set. FF does not have this bug and the element you are referencing must have a correct ID attribute.
Thanks azadisaryev, I'm still confused.  Do I put the (id="AssignedTo") on the Select inside the popup screen.  Or on Input button that initiates the popup, or on the Input text to receive the value from the popup.  Or where?  I've tried all three, still does not work.  Thanks again
id="AssignedTo" should be added to the input field that will receive data from the popup.
And ONLY on that field - if you have sane ID on several fields that would cause problems.

also, what type of form field is the one receiving value from the pop-up? for different field types you need different js code to set their value...

Azadi
Here is the text box that receives the data:
<INPUT TYPE="text" ID="AssignedTo" NAME="AssignedTo" VALUE="" SIZE=30 MAXLENGTH=100>
Here is the button that opens the popup:
<INPUT TYPE="button" VALUE="..." CLASS="buttonSelect" onclick="javascript:popupTechSelect()">

The strange this is that ALL of my popups work in IE.  None of them work in FF.  I also have some Date Select popups that will not work in FF.  They windows appear, but will not allow me to select the values.
ASKER CERTIFIED SOLUTION
Avatar of azadisaryev
azadisaryev
Flag of Hong Kong image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thank you. Thank you. Your sample worked.  I removed the (id="AssignedTo") from the Select after reading this comment you posted ... (id="AssignedTo" should be added to the input field that will receive data from the popup.).  After reviewing your sample, I placed the ID attribute on both the Input & Select and it worked.    Also, I just learned of the date chooser available in CF8.  So I will replace my date popups with that.  Wish I could give more you more points.

Also, a few afterthought questions.  1)  Is there some new CF8 tag that works like the date chooser that will allow me to select the AssignedTo value instead of generating a popup?  2) If not, is there a way to always position the popup in the middle of the screen?  No matter what screen size.
yes, cf8 has <cfwindow> tag and related functions: ColdFusion.window.create(), ColdFusion.window.show(), ColdFusion.window.hide(), ColdFusion.window.destroy()

all details are in the cfml reference - download pdf from adobe.com if you do not have one.

it basically creates a floated <div>, which means the 'window' you see is not a separate window, but an element in the page which created it.  it may take you a bit of time to figure out how to pass values from cfwindow to a control on the page - search EE / adobe cf forums and cf-talk list on houseoffusion.com for good code samples and explanations.

glad i could help.

Azadi
Thanks again.