Close a child page and refresh parent page

[getmea]

Hey, I have a "how to" question.

On my site, visitors are able to view a larger-sized image (a popup) of a product by clicking on the image. Clicking on the "add to cart" button allows them to add the item to their cart from the popup. I currently have it programmed to redirect to the cart page (of which I don't mind changing). It doesn't look good when the cart page appears in the same 300x400 child page.

I'd like to have the popup add the item to the cart, close the page, and issue a "refresh" of the parent page -- so the cart $$$ can be updated. Most of the site is PHP driven.

Any ideas?

John

[Uncle Dog]

I've just been experimenting and have a solution.

The form currently embedded in the popup window needs to be moved to the main page and hidden. Remove the submit button and also remove the forms action attribute which currently calls update-cart.php with the appended sku.

In the main page - write a javascript function that accepts a variable passed to it - BuyItem(sku)?
In this function
close the popup window
read the sku that's been passed
define and set the action attribute of the hidden form to call update-cart.php plus the sku etc
submit the form

In the popup window
set the Buy Now button to call the parent windows BuyItem function with the sku of the product.
clue - window.opener.BuyItem(sku)

Hope this helps - ask for more if needed.

[getmea]

Hi, Uncle Dog...

Great tip! Thanks...

I've implemented the changes but nothing happens when I click on the "Add to cart" button. I set Add To Cart as an anchor:

<a onClick="javascript:window.opener.fnAddToCart('BDG C11C',1);" href="javascript:void(1)">

<img alt="Add to your personal shopping cart image" src="../img/add-to-cart.gif" width="60" height="20" />

</a>

Something wrong?

John

[williamc]

why not just have ajax submit the item to the cart, refresh the parent, close the popup upon clicking to add?

[Uncle Dog]

getmea - something wrong? Yes. It should be

<a href="javascript:window.opener.fnAddToCart('BDG C11C',1);">

EDIT: apologies. on closer inspection - your way was OK. I knee-jerked to a personal preference.

[Uncle Dog]

Originally Posted by williamc

why not just have ajax submit the item to the cart, refresh the parent, close the popup upon clicking to add?

Why use AJAX when I only need to use J?

[williamc]

Your way works as well. I just prefer ajax's background processing and no need of multiple output pages in the popup.

[Uncle Dog]

getmea - in your new function you are trying to close productpreviewwindow (it doesn't exist). It should be productPreviewWindow. That's where your code is hanging.

EDIT - hope you don't mind me revisiting your dev' site. I guessed that's where you'd be testing.

[Uncle Dog]

Just spotted it working. What's next?

[getmea]

Sorry, U Dog...I was so excited that it worked that I wound up testing (in IE) every single pic and anchor. I've yet to test it in FF.

Yes, I found the discrepancy between productPreviewWindow/productPreviewWin/productpreviewwindow and corrected it.

What's next? Now I will implement in every single page which calls out to the Closer Look (sku2.php) page.

THANKS VERY MUCH FOR YOUR ASSISTANCE!!!!

Regards,
John

[getmea]

Isn't it like 3:15 in the morning in Scotland???

[getmea]

Originally Posted by williamc

Your way works as well. I just prefer ajax's background processing and no need of multiple output pages in the popup.

Hey, WilliamC...

Thanks for the tip.

Unfortunately, I am AJAX illiterate.

Someday, I'll pick up an Ajax for Dummies book and learn.

Regards,
John

[Uncle Dog]

getmea - yes my last post was at 2:51 am. Glad to have been of help.

You're not AJAX illiterate - it's basically a mish mash of web technologies usually revolving around JavaScript on the client ,which you obviously understand. Wikipedia describe it beautifully, warts and all - Ajax (programming) - Wikipedia, the free encyclopedia

I think there is a tendency to think of AJAX as a tool when it's actually a toolbox.

[DaveSawers]

Whilst AJAX isn't perfect, it's biggest advantage is that you can go back to the server to do stuff and then refresh only part of the page.

Problem with doing a full refresh is the whole page disappears and rebuilds. This is both annoying for users and time consuming. I would always recommend using AJAX over refreshing a full screen. Just take the W3Schools AJAX primer and away you go. Nothing complicated to it at all. It shouldn't take you more than 15 minutes to do the tutorial and get your first AJAX thingy working.

[getmea]

Good tip, Dave...I'll check out the Ajax Primer...

Thanks.

[smo]

Refreshing parent main window from child small window