Solved

Passing value from Popup back to Parent Window

Posted on 2008-10-30
17
2,185 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
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 

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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Browser Chrome downloads colored link 5 40
php string detection problem 7 32
Eloquent ORM manual paginator defaults to simple 2 19
JavaScript let vs var 5 20
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

816 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now