Solved

Passing value from Popup back to Parent Window

Posted on 2008-10-30
17
2,181 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
 

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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
This article discusses how to create an extensible mechanism for linked drop downs.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to dynamically set the form action using jQuery.

747 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

13 Experts available now in Live!

Get 1:1 Help Now