Help Passing Variables to/from Popup Window

This site is best viewed in a modern browser with JavaScript enabled.

Help Passing Variables to/from Popup Window

BobbyKline

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:

win=window.open(cnfpage,cnfname,settings);

I would like the popup window to look like this:

<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>

The values of rate and final 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.

ShrineDesigns

window.open() 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/';

try {
    alert(sWin.document.title); // cannot access this...
} catch (e) {
    alert('Cannot access document.title in other window.');
}
}

deathshadow

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?

BobbyKline

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 rateand final.

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

Kevin2

For what it's worth.....

<!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>

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 rate and final are calculated it's pretty much impossible to give you more. Hopefully this code can integrate with yours.

deathshadow

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 + ").\n\nPlease click the OK button to authorize this charge.\n\nOtherwise click the CANCEL button.")) {
  // they clicked ok
} else {
  // they clicked cancel
}

Or do you want it custom styled?

BobbyKline

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.

deathshadow

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.

deathshadow

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

BobbyKline

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?

deathshadow

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.

deathshadow

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.

BobbyKline

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?

deathshadow

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.

BobbyKline

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.

deathshadow

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?', 
	'<p>There will be a ' + rate + '% surcharge for using PayPal.</p><p><span class="keepTogether"><b>Product Total:</b> $' + total.toFixed(2) + '</span> &bull; <span class="keepTogether"><b>Total Charge:</b> $' + (total * (rate + 100) / 100).toFixed(2) + '</b></span></p><p>Please click the Accept button to authorize this charge.<br />Otherwise click the Decline button.</p>',
	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.

BobbyKline

Got it! Thanks. Works fine now. Appreciate all your help.

BobbyKline

BTW, what's the purpose of the two 'true' parameters at the end of the handlerAdd function?

deathshadow

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.

BobbyKline

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