How to change page content from another page

Question

I'm trying to add this functionality to my PHP cart

Let's suppose we have two pages: catalog.php and cart.php

What I would like to do is:

User clicks on "Add to cart" button on catalog.php and triggers an ajax request via jQuery to cart.php sending it info about which product was added (this all works as expected) and makes the cart.php page update itself by including the just added product without a page refresh (this is the part I can't get to work).

If I put the two pages side by side and click "Add to cart" nothing happens, only on page refresh (cart.php) I see that the new product was added.

Is there a way to archieve this?

EDIT: I wasn't clear enough i'm sorry my bad The pages are presented in a standard way, no frames no popups The "app" works as expected and this will unlikely be an issue for users The "side-by-side" thing was just because i would like to know a way to obtain this functionality since i can see myself using it in the future for pretty much anything (DOM manipulation of pageB from pageA, CSS, etc.)

Answer 1

Last I checked, only pages opened with window.open (or opened with a <a target="_blank"> link) can talk to each other.

So in catalog.php call cart = window.open('cart.php'), cart contains the window object of the page that opened it, so you could do:

cart.document.getElementById('whatever').innerHTML = '<p> new content</p>';

To get windows to talk to each other side-by-side w/o one opening the other you can use HTML5 local storage, but that takes some more advanced wizardry.

Answer 2

You can simulate this by having an AJAX call on Cart.php which checks the (session/db) to see if something new has been added.

I'd suggest something like...

• Cart.php makes an AJAX call every 10-60 seconds and asks for a complete list of products in the cart.
• Any new items are added to the table as appropriate (either by checking product Ids or OrderItem Ids). You should also update quantities/etc.

This way, no matter what mechanism is used to add items, the cart will see them before too long.

Obviously, the more often you poll, the quicker the cart will update but the more load you'll put on the system.

Now the reason it's not directly possible is that AJAX requests are always initiated by the client, not the server.

There is one other potential workaround which omits frequent polling and gives near-instant updates but it's a little more complex to implement.

It's known as long polling (see this answer) and effectively what happens is this...

• Client sends AJAX ("A") request to the server for cart information.
• The server accepts the request but does nothing (as if a long-running script were processing)
• When a new shopping cart item is received via AJAX ("B"), the server responds to Request A with details and The cart page updates the table as appropriate.
• If no cart activity is detected within a reasonable timeout (30-120s), the server responds with a "No Operation" response and closes the connection.
• Whichever response the client receives, it immediately opens a new AJAX request and starts all over again.

Effectively, your PHP script then deals with checking the database/session/etc for updates and the client is only waiting on a "slow" server. This is how twitter implement their various feeds via APIs - each new tweet is returned on a new line as they're generated.

Note that this can be a pain to implement as you're just shifting the polling from the client to the PHP but it does make it more elegant from a JavaScript point of view, removes the delay and reduces wasted network overhead.