PDA

View Full Version : JavaScript Popup Window Return Value?

influxer
06-15-2005, 09:57 AM
Hey all,

I am looking to build a website for my school to host blog-type websites and am almost done and basically have this one last thing to do.

There is an 'alter blog' section for the members at my site to alter the colors of their pages, and to do so...they click a button next to an input textbox that leads them to this page: http://www.schoolrack.com/members/alter/color_popup.php

Upon clicking on a color from that page, I want to return the respective HEX color code (i.e:#FF9900) back to the textbox automatically.

What steps do I need to take to do this..it seems simple but I am fairly new to JavaScript...to start off, imagine this being the textbox being considered:

<input type="text" id="header_color">



Thanks in advance!
-influx3r
Kor
06-15-2005, 11:41 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function showColor(){
var allC = document.getElementById('col').getElementsByTagName('td');
for(var i=0;i<allC.length;i++){
allC[i].onclick=function(){
document.getElementById('txt').value = this.getAttribute('bgColor');
}
}
}
onload=showColor;
</script>
</head>
<body>
<table id="col" width="100" border="0" cellspacing="1" cellpadding="1">
<tr>
<td bgcolor="#990000">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#0099CC">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#FFFF33">&nbsp;</td>
</tr>
</table>
<br>
<br>
<input id="txt" type="text">
</body>
</html>
influxer
06-16-2005, 07:00 AM
Great example, Kor.

Now, I forgot to clarify, that the color popup will be a POPUP, meaning when they click a link...it will open a popup window with a bunch of different colors listed. Once they click a color, it will automatically close the window and insert the HEX code for the color into a textbox.

How would I go about doing this?
glenngv
06-16-2005, 07:51 AM
function setColor(color){
if (opener && !opener.closed){
opener.document.theForm.theField.value = color;
opener.focus();
}
window.close();
}
...
<td width="30" bgcolor="#FFFF00" onclick="setColor(this.bgColor)">&nbsp;</td>
influxer
06-16-2005, 08:12 AM
Works like a charm, thanks Glenn!

Now, one last question:

Since I have about 12 fields for different aspects of the page and I don't want 12 field-specific functions, could I somehow pass the name of the textfield when the user clicks on the link to open the popup?

Here is my window open statement, how would I modify it?:


<a href="#" onClick="javascript:window.open('color_popup.php','color_popup','width=610,height=550,scrollbars=1'); return false;">change color</a>
glenngv
06-16-2005, 11:54 AM
Main page:
function openColorPicker(targetField){
var w = window.open('dot2.htm','color_popup','width=610,height=550,scrollbars=1');
w.targetField = targetField; //create target field variable in popup window with the passed targetField as value
w.focus();
return false;
}

//callback function
function setTargetField(targetField, color){
if (targetField){
targetField.value = color;
}
window.focus();
}
...
<form name="theForm">
<input type="text" name="color1" /><a href="#" onclick="return openColorPicker(document.theForm.color1)">change color</a><br />
<input type="text" name="color2" /><a href="#" onclick="return openColorPicker(document.theForm.color2)">change color</a>
</form>

Popup page:
function setColor(color){
if (opener && !opener.closed && opener.setTargetField){
opener.setTargetField(targetField, color);
}
window.close();
}
...
<td width="30" bgcolor="#FF0000" onclick="setColor(this.bgColor)">
influxer
06-17-2005, 03:03 AM
Once again, works like a charm.

I just wrote another function for my page called updatePreview()..what it does is it has a preview of the user's blog on the same page, and every time I call updatePreview(fieldName), it will update the preview on the user's alter-blog page.

Basically, if I pass updatePreview(header_background), it will automatically change the background color of the header.

How come when I alter your function it doesn't work?:

MAIN PAGE:

function openColorPicker(targetField)
{
var w = window.open('color_popup.php','color_popup','width=610,height=550,scrollbars=1');
w.targetField = targetField; //create target field variable in popup window with the passed targetField as value
w.focus();
return false;
}

function setTargetField(targetField, color)
{
if (targetField)
{
targetField.value = color;
}
window.focus();
}

function updatePreview(elementChanged)
{
var newValue = document.getElementById(elementChanged).value;
switch(elementChanged)
{
case "page_bg":
{ document.getElementById('headernetherbg').style.backgroundColor=newValue;
break;
}

case "header_interior_bg":
{
document.getElementById('headerinteriorbg').style.backgroundColor=newValue;
break;
}
}
}




POPUP PAGE:

function setColor(color)
{
if (opener && !opener.closed && opener.setTargetField && opener.updatePreview)
{
color=color.toUpperCase();
opener.setTargetField(targetField, color);
opener.updatePreview(targetField);
}
window.close();
}



Notice how I call updatePreview in the popup page function with opener.updatePreview(targetField); but it doesn't work!

What could be wrong?

Thanks!
glenngv
06-17-2005, 04:24 AM
Can you post the link to your main page?
influxer
06-17-2005, 04:32 AM
Here is a link to the page I'm working on:
http://www.schoolrack.com/members/alter/alter_advanced.php


All of the textfields for the colors have images next to them...click the image to get the color popup. When you click the color, it successfully puts the color code in the textbox but it should also change the PREVIEW of the header...but it doesnt.

-influxer
glenngv
06-17-2005, 09:21 AM
function setTargetField(targetField, color)
{
if (targetField)
{
targetField.value = color;

//calling targetField.onchange() directly works in IE only
//there is a script in CodingForums that enables event handler call in Gecko but can't find it.
//so for now we just manually call what's in onchange handler.
updatePreview(targetField);
}
window.focus();
}

function updatePreview(elementChanged)
{
var newValue = elementChanged.value;
switch(elementChanged.id)
{
case "page_bg":
{
document.getElementById('headernetherbg').style.backgroundColor = (newValue!="") ? newValue : "#FFFFFF";
break;
}
...
}
}

Then change all calls to updatePreview() function by simply passing this instead of the field's id.
<input type="text" id="header_interior_bg" name="header_interior_bg" onKeyUp="updatePreview(this);" onChange="updatePreview(this);">

Then in the popup page:

function setColor(color)
{
if (opener && !opener.closed && opener.setTargetField)
{
opener.setTargetField(targetField, color.toUpperCase());
}
window.close();
}