Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 568
  • Last Modified:

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

0
sulzener
Asked:
sulzener
  • 8
  • 4
  • 4
1 Solution
 
Andrew MaurerCommented:
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

0
 
sulzenerAuthor Commented:
zadoc, thanks, but what is different?  I cannot tell.
0
 
Andrew MaurerCommented:
<select name="ValueSelect" size="10" onchange="setValue();" style="font-size:10px">
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
sulzenerAuthor Commented:
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.
0
 
Andrew MaurerCommented:
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" ?
0
 
Andrew MaurerCommented:
Also... I dont see an "ID" on your "ValueSelect" dropdown box... you'll need one for getElementsById() to work
0
 
sulzenerAuthor Commented:
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?
0
 
sulzenerAuthor Commented:
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>      
0
 
azadisaryevCommented:
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.
0
 
sulzenerAuthor Commented:
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
0
 
azadisaryevCommented:
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
0
 
sulzenerAuthor Commented:
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.
0
 
azadisaryevCommented:
i have just tested all the code you have posted so far and it works just fine in FF.
your problem must be elsewhere...

just for checking, see my test code attached

couple of general thing about your code:
1)  do not use language="Javascript" in your <script> tags - that is pretty much obsolete now. you should, however, include type="text/javascript" in there.

2) there is no setFocus() function. the function is called focus() - change that in the onBlur event of the body in the pop-up window.  i, though, fail to see why you would need an onblur event there at all...

3) there is no need to specify javascript: in onClick events - script language specification is not needed there, it is only useful in HREF attribute of A tag and ACTION attribute of FORM tag

Azadi
<!--- page1 - opener page - t51.cfm --->
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
<!--
function popupTechSelect() {
var winStateInputBox;
winStateInputBox = window.open('t52.cfm', 'namTechSelect','toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=300,height=380');
}
//-->
</script>
</head>
 
<body>
<input id="AssignedTo" type="text" /><br />
<INPUT TYPE="button" VALUE="..." CLASS="buttonSelect" onclick="popupTechSelect();"> 
</body>
</html>
 
<!--- pop-up page - t52.cfm --->
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Select List</title>
<script type="text/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.focus();" onunload="setValue()">
 
<TABLE ALIGN="center">
<TR>
<TD>
	<select id="ValueSelect" name="ValueSelect" size="10" ondblclick="setValue();" style="font-size:10px">
					<option value=""></option>              
					<option value="Description">Description</option>                            
	</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>

Open in new window

0
 
sulzenerAuthor Commented:
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.
0
 
azadisaryevCommented:
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
0
 
sulzenerAuthor Commented:
Thanks again.
0

Featured Post

[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

  • 8
  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now