www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 25

Thread: Help Passing Variables to/from Popup Window

  1. #1
    Join Date
    Apr 2013
    Posts
    21

    Help Passing Variables to/from Popup Window

    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);
    I would like the popup window to look like this:
    HTML Code:
    <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.

  2. #2
    Join Date
    Dec 2002
    Location
    Seattle, WA
    Posts
    1,843
    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.
    Code:
    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.');
        }
    }

  3. #3
    Join Date
    May 2014
    Posts
    630
    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?

  4. #4
    Join Date
    Apr 2013
    Posts
    21
    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.

  5. #5
    Join Date
    Oct 2013
    Posts
    397
    For what it's worth.....

    HTML Code:
    <!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.

  6. #6
    Join Date
    May 2014
    Posts
    630
    You know, something silly occurred to me about all this...

    Why not just use Confirm?

    Code:
    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?

  7. #7
    Join Date
    Apr 2013
    Posts
    21
    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.

  8. #8
    Join Date
    May 2014
    Posts
    630
    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.
    Java is to JavaScript as Ham is to Hamburger.

  9. #9
    Join Date
    May 2014
    Posts
    630
    Here we go. I used my 'elementals' library to do this:
    http://www.cutcodedown.com/for_other.../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
    Java is to JavaScript as Ham is to Hamburger.

  10. #10
    Join Date
    Apr 2013
    Posts
    21
    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?

  11. #11
    Join Date
    May 2014
    Posts
    630
    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.
    Java is to JavaScript as Ham is to Hamburger.

  12. #12
    Join Date
    May 2014
    Posts
    630
    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.
    Last edited by deathshadow; 05-14-2014 at 02:49 PM.
    Java is to JavaScript as Ham is to Hamburger.

  13. #13
    Join Date
    Apr 2013
    Posts
    21
    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?

  14. #14
    Join Date
    May 2014
    Posts
    630
    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.
    Java is to JavaScript as Ham is to Hamburger.

  15. #15
    Join Date
    Apr 2013
    Posts
    21
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles