Solved

Passing value from Popup back to Parent Window

Posted on 2008-10-30
17
2,186 Views
Last Modified: 2012-06-27
Good Afternoon,

I'm currently building a theme picker for a E-card template.

Before somebody sends an ecard one of the options is to pick a background theme. I have a small link that popups up a window and shows them a Basic Grid of Background images. I want them to have the ability to pick the image right there, close the window and updates the form on the Main window with the Path to the Background image. So I guess my question is how to pass that information along to the main window also without a refresh of the window.


Theme Picker
<input type="text" id="ecardBg" size="43" class="gcBackground2" name="{g->formVar var="form[ecardBG]"}" value="{$form.ecardBG}" onfocus="this.className=''" onblur="this.className='gcBackground2'" /> 
<a href="javascript:void(0);" onclick="window.open('theme-picker.php','themepicker','width=333,height=490,toolbar=no,scrollbars=yes')">View Themes</a>

Open in new window

0
Comment
Question by:rurth24
  • 9
  • 5
  • 3
17 Comments
 
LVL 21

Expert Comment

by:silemone
ID: 22842406
would a query string work?
0
 

Author Comment

by:rurth24
ID: 22842439
I'm assuming it could.. As long as the info gets passed from the child window to the parent..
We'd have to pass the Image path info... would that work in Sting?
0
 
LVL 21

Expert Comment

by:silemone
ID: 22842539
Sting = String?
0
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:rurth24
ID: 22842627
yeah sorry.. that's what I meant. String..


I've attached a very basic A Href.

The actual image path for the ECard would be

/www/ecards/images/halloween-001-Large.jpg

So how would we close the window and updated the form on the Main Window with the correct image path?
<a href="#"><img src="/www/ecards/images/halloween-001.jpg" width="122" height="132" border="0" /></a>

Open in new window

0
 
LVL 21

Expert Comment

by:silemone
ID: 22843250
yep...pass the image page...i.e.

theme-picker.php?imagePage=www.images.com/pag/dafd/.....should work...
however a  better way would be to have your site organized where all images are in same location and you could only pass the folder...

i.e.

since all photos are kept in "www.site.com/images/photos/

you could just pass folder name in query string (anything that's pass photos folder...i'm saying do this more so for security reasons as you can store www.site.com in webconfig...and retrieve it and concatenate rest to the string portion that all the files will always have...



stringFromWebConfig + requestString("folderLOcation")  where folderlocation is the key in querystring and holds only folder relative path instead of absolute path...
0
 
LVL 15

Expert Comment

by:Tomarse111
ID: 22843319
You could also do this through slightly simpler if I understand the problem correctly. If you are using window.open to create the popup you can write back to the original page using window.opener. see below for an example:
//This would be your original page that would fire the popup. Note the blank span.
 
<html>
    <body>
    <form>
        <input type="button" onClick="window.open('popup.htm')">
        <span id="image"></span>
    </form>
    </body>
</html>
 
//This would be the code in popup.htm
<script>
function ImagePopup(idSel){
	window.opener.document.getElementById('image').innerHTML='<img src="'+idSel+'">';
	window.close();
}
</script>
<html>
    <body>
        <img id="/www/ecards/images/halloween-001-Large.jpg" src="/www/ecards/images/halloween-001.jpg" width="122" height="132" border="0" onClick="ImagePopup(this.id)"/>
    </body>
</html>
 
//clicking on your image would then populate the empty span on the original initial page with the new large image and then close the popup.

Open in new window

0
 

Author Comment

by:rurth24
ID: 22843918
Very nice...

Let me ask you...

Just a small tweak.. Let me see if I can get this straight.

What I want is to pass the Image Path to a hidden form field but show the Image Name to the user.


//This would be your original page that would fire the popup. Note the blank span.
 
<html>
    <body>
    <form>
        <input type="button" onClick="window.open('popup.htm')">
        <span id="imageName"></span>
        <input type="hidden" name="form[themedBackground]" id="imagePath" value="" />
    </form>
    </body>
</html>
 
//This would be the code in popup.htm
<script>
function ImagePopup(idSel){
        window.opener.document.getElementById('image').innerHTML='idSel;
        window.close();
}
</script>
<html>
    <body>
        <img id="/www/ecards/images/halloween-001-Large.jpg" src="/www/ecards/images/halloween-001.jpg" width="122" height="132" border="0" onClick="ImagePopup(this.id)" name="Halloween-001"/>
    </body>
</html>
 
//clicking on your image would then populate the empty span on the original initial page with the new large image and then close the popup.

Open in new window

0
 
LVL 15

Expert Comment

by:Tomarse111
ID: 22844072
OK then we just ammend what we return via the window.opener:
//This would be your original page that would fire the popup with the blank span and the hidden element
 
<html>
    <body>
    <form>
        <input type="button" onClick="window.open('popup.htm')">
        <span id="imageName"></span>
        <input type="hidden" name="form[themedBackground]" id="imagePath" value="" />
    </form>
    </body>
</html>
 
//This would be the code in popup.htm
<script>
function ImagePopup(srcSel,nameSel){
        window.opener.document.getElementById('imageName').innerHTML=nameSel;
window.opener.document.getElementById('imagePath').value=srcSel;
        window.close();
}
</script>
<html>
    <body>
        <img id="/www/ecards/images/halloween-001-Large.jpg" src="/www/ecards/images/halloween-001.jpg" width="122" height="132" border="0" onClick="ImagePopup(this.src,this.name)" name="Halloween-001"/>
    </body>
</html>
 
//clicking on your image would then populate the empty span with the name of the image and the hidden form element with the src and then close the popup.

Open in new window

0
 
LVL 15

Accepted Solution

by:
Tomarse111 earned 500 total points
ID: 22844096
actually sorry you would still pass the ID over through the onClick as i forgot you are after the large image's src, not the actual img src. So the image is would be:

<img id="/www/ecards/images/halloween-001-Large.jpg" src="/www/ecards/images/halloween-001.jpg" width="122" height="132" border="0" onClick="ImagePopup(this.id,this.name)" name="Halloween-001"/>
0
 

Author Comment

by:rurth24
ID: 22844231
Thanks Tomarse111

I get the idea.. I almost got the second part myself but didn't realize you could put two variables seperated by commas.

Thanks again.
0
 

Author Comment

by:rurth24
ID: 22845061
Hey Tomarse111,

How would I pass a Text Color Value also? I tried something like this but it didn't work.


<script>
function ImagePopup(srcSel,nameSel,colorSel){
        window.opener.document.getElementById('imageName').innerHTML=nameSel;
		window.opener.document.getElementById('imagePath').value=srcSel;
		window.opener.document.getElementById('ecardtxt').object.style.color=colorSel;
        window.close();
}
</script>
 
<form id="form" name="form" method="post" action="">
    <span id="imageName" style="color: #000000; font-weight:bold"></span><BR />
    <a href="#" onClick="window.open('popup.html')">View Themes</a>
	<input type="hidden" name="form[themedBackground]" id="imagePath" value="" />
        <input type="hidden" name="form[themedBackground]" id="ecardtext" style="" value="" />
</form>
 
 
<img id="/www/ecards/images/halloween-001-Large.jpg" src="images/halloween-1.jpg" width="122" height="132" border="0" onClick="ImagePopup(this.id,this.name,this.style)" style="color: #ffffff" name="Halloween-001"/>

Open in new window

0
 

Author Comment

by:rurth24
ID: 22867695
Hey Tomarse111,

Not sure if you noticed my last comment.

I wanted the ability to add certain other elements.

A bunch of CSS styles.

0
 
LVL 15

Expert Comment

by:Tomarse111
ID: 22867842
Sorry rurth, I didn't see your follow up comment.

Do you actually want it to pass back the physical style to populate the hidden elemen'ts value or do you want to actually use that style used on that hidden elements styles?
0
 

Author Comment

by:rurth24
ID: 22868138
At the moment I'm trying to control styles for an ECARD. What we worked on before was the Background Picker. I realized that when I change the background I'm going to also have to also change other styles like Font Color and Background Color.

So that means each Background image should have a properties that follow the image.
*Background Image
Font Color
Background Color
Link Color

What are your thoughts on this?



<!-- FORM: form[background] passes the background value to the ecard -->
<form id="form" name="form" method="post" action="">
    <span id="imageName" style="color: #000000; font-weight:bold"></span><BR />
    <a href="#" onClick="window.open('popup.html')">View Themes</a>
	<input type="hidden" name="form[themedBackground]" id="imagePath" value="" />
    <input type="hidden" name="form[themedBackground]" id="ecardtext" value="" />
</form>
------------------------------------------------
 
<!-- ECARD -->
<table width="535" cellpadding="0" cellspacing="0"  style="border: 2px solid #006699; background-image:url('%backgroundImage%'); background-repeat: no-repeat; background-position:bottom;">
------------------------------------------------
 
<!-- THEME SELECTOR-->
<img id="/modules/ecards/images/halloween/spider-web-large.jpg" src="/www/ecards/images/halloween/spider-web-thumbnail.jpg" width="122" height="132" border="0" onClick="ImagePopup(this.id,this.name)" name="Spider Web"/>

Open in new window

0
 

Author Comment

by:rurth24
ID: 22868148
I can open a new question to give you points... up to you.
0
 
LVL 15

Expert Comment

by:Tomarse111
ID: 22868216
You can pass back the styles from the main image as you're doing i.e. using this.style

Then to assign them to the parents box (you're nearly there):

As long as the style are inline you pick any you assign.

Font colour would be - inlineStyles.color;
bg colour would be - inlineStyles.backgroundColor;
bg image would be - inlineStyles.backgroundImage;
 
etc




<script>
function ImagePopup(srcSel,nameSel,inlineStyles){
        window.opener.document.getElementById('imageName').innerHTML=nameSel;
                window.opener.document.getElementById('imagePath').value=srcSel;
                window.opener.document.getElementById('ecardtxt').style.color=inlineStyles.color;
        window.close();
}
</script>
 
<form id="form" name="form" method="post" action="">
    <span id="imageName" style="color: #000000; font-weight:bold"></span><BR />
    <a href="#" onClick="window.open('popup.html')">View Themes</a>
        <input type="hidden" name="form[themedBackground]" id="imagePath" value="" />
        <input type="hidden" name="form[themedBackground]" id="ecardtext" style="" value="" />
</form>
 
 
<img id="/www/ecards/images/halloween-001-Large.jpg" src="images/halloween-1.jpg" width="122" height="132" border="0" onClick="ImagePopup(this.id,this.name,this.style)" style="color: #ffffff" name="Halloween-001"/>

Open in new window

0
 

Author Comment

by:rurth24
ID: 22871560
Thanks Tomarse111... I'll give it a whirl tomorrow... and let you know if I ran into any problems.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question