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: 2191
  • Last Modified:

Passing value from Popup back to Parent Window

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
rurth24
Asked:
rurth24
  • 9
  • 5
  • 3
1 Solution
 
silemoneCommented:
would a query string work?
0
 
rurth24Author Commented:
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
 
silemoneCommented:
Sting = String?
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
rurth24Author Commented:
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
 
silemoneCommented:
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
 
Tomarse111Commented:
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
 
rurth24Author Commented:
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
 
Tomarse111Commented:
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
 
Tomarse111Commented:
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
 
rurth24Author Commented:
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
 
rurth24Author Commented:
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
 
rurth24Author Commented:
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
 
Tomarse111Commented:
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
 
rurth24Author Commented:
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
 
rurth24Author Commented:
I can open a new question to give you points... up to you.
0
 
Tomarse111Commented:
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
 
rurth24Author Commented:
Thanks Tomarse111... I'll give it a whirl tomorrow... and let you know if I ran into any problems.
0

Featured Post

Get expert help—faster!

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

  • 9
  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now