Help Passing Variables to/from Popup Window

@BobbyKlineMay 10.2014

I have a popup window that I need to display based on the user’s responses in a form. The popup window is called by:

[CODE] win=window.open(cnfpage,cnfname,settings); [/CODE]

I would like the popup window to look like this:

[code=html] <body background=”Graphics/bg-website.gif”> <div id=”customConfirmBox”> <center><p> <script>document.writeln(“There will be a ” + rate + “% surcharge for using PayPal (Total charge = $” + final + “).<p>Please click the Accept button to authorize this charge.<p>Otherwise click the Decline button.<p>”)</script> <p><input type=”button” onclick=”answer(true)” value=”Accept”> <input type=”button” onclick=”answer(false)” value=”Decline”></p> </div> </body> [/code]

The values of ~~[I]~~rate[/I] and ~~[I]~~final[/I] are calculated in a function in the parent window. How do I pass the values to the popup window?

Also, I will need to pass which button is clicked back to the parent.

Can anyone help me with this please.

to post a comment

JavaScript

24 Comments(s) _↴

@ShrineDesignsMay 11.2014 — #[I]window.open()[/I] returns an object that references the window that is opened. If you ever worked with JavaScript and frames, the same principles apply. Note: due to CORS restrictions, you can only read/write to other windows if they are on the same domain.

var sWin;
 
 window.onload = function()
 {
 sWin = window.open('./page.htm');
 alert(sWin.document.title);
 sWin.location.href = 'http://google.com/';
 
 <i>    </i>try {
 <i>    </i>    alert(sWin.document.title); // cannot access this...
 <i>    </i>} catch (e) {
 <i>    </i>    alert('Cannot access document.title in other window.');
 <i>    </i>}
 }

@deathshadowMay 11.2014 — #If your 'popup' is that simple, I'd suggest NOT making it a conventional popup. Create a DIV and position:fixed it over your content. That way popup-blockers can't interfere in it, and passing values is easier since it's all the same page.

Instead of making it, you might be better off faking it.

Of course this is 2014 not 1997, what's with the CENTER tag and non-wrapping use of P? ?

@BobbyKlineauthorMay 11.2014 — #ShrineDesigns & deathshadow:

I haven't done much javascript coding is some time, so maybe I'm missing something, but it doesn't sound like either of you have answered my questions.

I want to use a popup window as it will only be displayed under certain conditions and then the content will be determined by the values of [I]rate[/I]and [I]final[/I].

I apologize if the code is a bit sloppy, it's been a while.

@Kevin2May 12.2014 — #For what it's worth.....

[code=html]<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>Order Form</title>
 <style>
 #customConfirmBox{	/* adjust margins, colors, etc. as necessary */
 position:fixed;
 top:25%;
 left:25%;
 width:350px;
 border:solid 1px #f0e68c;
 padding:5px;
 border-radius:10px;
 box-shadow: 10px 10px 5px #888;
 display:none;
 }
 </style>
 <script>
 function show(box){
 box.style.display='block';
 }
 
 function answer(ans,box){
 // do your other stuff here
 box.style.display="none";
 }
 </script>
 </head>
 
 <body>
 
 <button onclick="show(customConfirmBox)">PayPal info</button>	<!-- this can be triggered from anywhere, not necessarily a button -->
 
 <div id="customConfirmBox">
 <p><script>document.write("There will be a % surcharge for using PayPal.<br>(Total charge = $).")</script></p>	<!-- Add " + rate + " and " + final + " where appropriate. No comment on document.write :) -->
 <p>Please click the Accept button to authorize this charge.
 <p>Otherwise click the Decline button.")</p>
 <p><input type="button" onclick="answer(true,customConfirmBox)" value="Accept">
 <input type="button" onclick="answer(false,customConfirmBox)" value="Decline"></p>
 </div>
 
 </body>
 </html>[/code]

deathshadow gave you a very wise answer. It's a lot easier to deal with variables and values in the same window vs. passing them to a new window and back.

Without the code for how [B]rate[/B] and [B]final[/B] are calculated it's pretty much impossible to give you more. Hopefully this code can integrate with yours.

@deathshadowMay 12.2014 — #You know, something silly occurred to me about all this...

Why not just use Confirm?

if (confirm("There will be a " + rate + "% surcharge for using PayPal (Total charge = $" + final + ").nnPlease click the OK button to authorize this charge.nnOtherwise click the CANCEL button.")) {
 // they clicked ok
 } else {
 // they clicked cancel
 }

Or do you want it custom styled?

@BobbyKlineauthorMay 14.2014 — #Kevin2.

Thanks for the input. I still think I'd like to do it in a separate window as it gives me more versatility, but I will definitely try your suggestion.

Deathshadow.

Yea, I really want to tailor the box to the application.

Thanks to both.

@deathshadowMay 14.2014 — #Actually, it doesn't give you more versatility, it gives you decidedly less, particularly with the number of browsers that block windows.open, and the various problems like cross-site data passing or even just the headaches of passing data between frames/windows.

Besides, you shouldn't be shoving new windows down users throats -- there's a reason TARGET was deprecated a decade and a half ago -- no matter how many halfwits, morons and fools continue to shove new windows down users throats to this day. (mostly to cater to the whims of even bigger halfwits, morons and fools)

Gimme a few and I'll write up a more... robust approach to this; give it a nice simple appearance, maybe a shadowbox effect, media query so it runs full-screen when the screen is too small... etc, etc...

Shouldn't take too long.

@deathshadowMay 14.2014 — #Here we go. I used my 'elementals' library to do this:

http://www.cutcodedown.com/for_others/BobbyKline/template.html

As with all my examples the directory:

http://www.cutcodedown.com/for_others/BobbyKline

... is unlocked for easy access to the gooey bits and pieces.

It uses scripting to make a DIV, hide the DIV, add elements to the DIV on the fly so you could use it for other dialogs, does the "add to the element before you attach it to the DOM" with InnerHTML so as to avoid the performance headaches it can cause. The CSS does a nice little shadowbox effect, z-indexes over the rest of the page (though you'll want to check any other index values to be sure of that), and I even made it go fullscreen without the fancy effects below a certain width using media queries, so it's also responsive... as tested by it being in a very simple semi-fluid, elastic and responsive layout.

The result passed to the <i>handler</i> parameter of the method (in this case I used alert) is a simple boolean, true for accept, false for decline.

If you like I can possibly later on make a version that's standalone instead of relying on elementals.js

@BobbyKlineauthorMay 14.2014 — #Deathshadow.

Thanks for your response. Overall, I like the look and feel of the window. I'll need to look at the code for a bit to see how to best fold it in to my existing page. There's a lot of code, although it looks like much of it is unused for my example. I think a standalone version would help a lot, if you have the time to do it.

One thing I noticed is that it doesn't seem to work in IE. I've checked it out in Foxfire, Chrome, Opera and Safari and it works fine. Did you test it with IE?

@deathshadowMay 14.2014 — #I tested with IE9/newer... I'm assuming your problem is with IE8/earlier?

Bug in my library that was JUST introduced by my (like an idiot) taking advice from other JavaScript developers when I should have known better. Working on fixing it, but for now I'll make a standalone and upload that in it's place. Gimme a few.

@deathshadowMay 14.2014 — #There, I just uploaded a new copy over the old one that is a standalone -- mostly by turning the functions from my library into standalone equivalents, so the ones we aren't using here aren't 'blocking' anything. Should work fine back to IE7 now.

IE6 chokes on the effect because it can't handle position:fixed properly. There are workarounds/shiv's for that if you care; it takes an extra wrapping DIV to provide scrollbars to your content. (royal PITA you ask me). That or you could set them to APO and micro-manage their position in relation to the scrollbars -- which also kinda sucks... but that's IE 6 for you.

Honestly, I'd probably just IE CC out the script for IE6/earlier, and let them have the scripting off fallback that you should also be providing.

@BobbyKlineauthorMay 15.2014 — #deathshadow.

You're right, I'm using IE8. Don't know if anyone is still using version 6. Anyway, the layout works with IE now, but the buttons don't. Not sure if it's my IE or the code, as it works in other browsers.

Also, the stylesheet screws up my form layout. Can the confirm box code be put in its own <div> and the screen stylesheet affect only that?

@deathshadowMay 15.2014 — #Are you copying just the part that makes it work into your stylesheet, or are you using the entire screen.css? Willing to bet my reset and page formatting isn't going to work with yours.

Though I'd have to see the page it's going into to figure that part out.

There's no reason for the buttons not to work in legacy IE -- that part works all the way back to IE 5.5 here, even if the positioning is messed up.

@BobbyKlineauthorMay 15.2014 — #Hey deathshadow.

You were right, I tried it on another computer and the buttons worked fine. The version of IE on my development machine must be wonky. No problem, as long as it works for everyone else.

I played a bit with your stylesheet file (I hope you don't mind) and I've gotten everything pretty much the way I want it.

One thing, you pass the results of the buttons back via an alert handler. I need to be able to test the results in the code. How can I interrogates which button was clicked? Once I have that, I think I'm good to go.

Thanks.

@deathshadowMay 16.2014 — #swap out the alert for whatever function you want it to call... pretty simple. You can put any function as the final parameter of the confirm function.

confirm(
 'Accept Paypal Surcharge?', 
 '&lt;p&gt;There will be a ' + rate + '% surcharge for using PayPal.&lt;/p&gt;&lt;p&gt;&lt;span class="keepTogether"&gt;&lt;b&gt;Product Total:&lt;/b&gt; $' + total.toFixed(2) + '&lt;/span&gt; &amp;bull; &lt;span class="keepTogether"&gt;&lt;b&gt;Total Charge:&lt;/b&gt; $' + (total * (rate + 100) / 100).toFixed(2) + '&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;Please click the Accept button to authorize this charge.&lt;br /&gt;Otherwise click the Decline button.&lt;/p&gt;',
 alert
 );

Just replace 'alert' with whatever function you want to handle the result. Because of how it (or window.open if you went that route) works, you can' t simply 'wait for a result'; the joys of event driven programming.

@BobbyKlineauthorMay 16.2014 — #Got it! Thanks. Works fine now. Appreciate all your help.

@BobbyKlineauthorMay 16.2014 — #BTW, what's the purpose of the two 'true' parameters at the end of the handlerAdd function?

@deathshadowMay 16.2014 — #Oops, you can lose those, that's left-over from when it was using my library. In the library the first one prevents event bubbling, the second one calls a code to make sure nothing gets selected accidentally.

http://www.elementalsjs.com/Element.handlerAdd

The standalone version is far simpler because it doesn't add a wrapping function to automatically do those, or do the e = e || window.event; var t = e.target || e.srcElement for you.

@BobbyKlineauthorMay 16.2014 — #Thanks, I was just wondering. Actually, I had hoped that they somehow controlled the buttons so I could use it as a more generic routine (a customized alert besides a customized confirm). Oh well, you can't have everything.

Again, my thanks for your help.

BK

@deathshadowMay 16.2014 — #I was actually thinking along those lines -- expanding that code to let you specify a list of buttons, returning that button's text as the result instead of true/false.

something like:

dialogBox = function(title, message, buttons, handler)

where buttons is an array of texts to put into the buttons. Might be even better to just pass it a single object:

dialogBox = function(data)

Where:

var data = {
 title : 'dialog title',
 message : '&lt;p&gt;Your message markup&lt;/p&gt;',
 buttons : [ 'Yes', 'No', 'Cancel' ],
 resultFunction
 };

The object would be passed by reference lowering the memory use (in theory) and would be a bit clearer as to what's being declared for values.

I might spend the time to put that together working as it could be useful for some of the stuff I'm working on as well -- both as a standalone, and as an example for my JavaScript library. I've got to fix the bugs my taking bad advice introduced to my library first, but when I get the more versatile version of this up and running I'll post a link to it here.

I've also been playing with the idea of a full-on browser based windowing UI API, just for 'laughs'. Well, not entirely for laughs - I have an... odd idea I've been playing with.

@BobbyKlineauthorMay 16.2014 — #deathshadow.

That would be great. Since I don't seem to be getting emails when you respond, could you please email me ([email protected]) when the stand-alone version is ready? I definitely have a use for it.

BK

@BobbyKlineauthorJun 03.2014 — #Hey deathshadow,

I hope you're still monitoring this thread. I'm using your econfirm script for another project and have run into a minor problem. When the user clicks on one of the "popup window" buttons, they're returned to the top of the invoking webpage. Turns out this was true in the membership form application, but the page was so small, that it was almost unnoticeable. The new project page is much larger and I want the user to be returned to the place on the page where they clicked the link.

The econfirm script is invoked with:

[CODE]Speaker: <a href="" onclick="getPayment();return false" onfocus="this.blur()">Click here</a> to learn about our special speaker.[/CODE]

The javascript looks like this:

[CODE]<script>
 function getPayment(){
 message = "Noted author, lecturer and button collector<p>Peggy Ann Osborne<p>Program will be presented via Skype from her home in Nova Scotiann";
 confirm('Special Guest Presenter',message,getResults);
 }
 function getResults(results){return false}
 </script>
 [/CODE]

I've tried a couple of things, including setting a tag, but it always goes to the top of the page (the page isn't reloaded, it just displays at the top).

Any ideas?

Thanks.

BK

@deathshadowJun 05.2014 — #The only thing that would cause that is the # in the anchor -- which a proper 'prevent' method would stop from propagating.

Right after the 'confirm' function, you'd want to add something like this:

handlerAdd(confirmPaypal, 'click', function(e) {
 confirm(
 'Accept Paypal Surcharge?', 
 /*
 NOTE - this is one of the times JavaScript's lack of whitespace
 neutral strings REALLY pisses me off
 */
 '&lt;p&gt;There will be a ' + rate + '% surcharge for using PayPal.&lt;/p&gt;&lt;p&gt;&lt;span class="keepTogether"&gt;&lt;b&gt;Product Total:&lt;/b&gt; $' + total.toFixed(2) + '&lt;/span&gt; &amp;bull; &lt;span class="keepTogether"&gt;&lt;b&gt;Total Charge:&lt;/b&gt; $' + (total * (rate + 100) / 100).toFixed(2) + '&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;Please click the Accept button to authorize this charge.&lt;br /&gt;Otherwise click the Decline button.&lt;/p&gt;',
 alert
 );
 e.cancelBubble = true;
 if (e.stopPropagation) e.stopPropagation();
 if (e.preventDefault) e.preventDefault();
 e.returnValue = false;
 }, true, true);

though one thing I didn't point out, the href on that anchor should be changed to a verification URL -- so that scripting off the page still works. That's why for something like a FORM you'd attach the confirm to onsubmit, cancel the submit, then manually submit.

Again, unwritten rule of JS - "If you can't make the page work without scripting FIRST, you likely have no business adding scripting to it!"

@rootJun 07.2014 — #Simplest answer really is to do like the majority of sites who trade online do it, you show this information as part of your trading terms and have that amount already added in to the total and have the page with a continue to [I]payment [/I]or [I]cancel order.[/I]

I understand that you are trying to pass on your losses that you make from a paypal trade, you should consider how detrimental this could be and record the number of purchases vs the failures at the checkout stage.

Your alternative is to already build in to your pricing structure a percentage and have no need for any additional costs.

Also in #JavaScript _↴

IE Incompatibility Sending variable when window closes?Anyone have functions for decimal/bcd calculations?

Success!

Help @BobbyKline spread the word by sharing this article on Twitter...

Tweet This

Help Passing Variables to/from Popup Window

24 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Help Passing Variables to/from Popup Window

24 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

24 Comments(s) _↴

Also in #JavaScript _↴