How can I pass a custom message from one page to another using jquery?

Question

I'm working on building a gift catalog for my organization, and need to show an update on screen if someone has added an item to their cart.

When someone is browsing the catalog, they start on PAGE A, then choose an item and go to PAGE B to choose quantity, and add to cart. When they add to the cart, a jquery event .click() sends the user back to the original catalog page so they can continue browsing through items.

What I want to do is write a message at the top of the catalog that confirms that the users item was successfully added to their cart. Currently items are added, but users receive no notification.

I have a paragraph tag set up with id of #add_to_cart where I want to write the custom message "Your gift has been successfully added to the cart!"

If the user were to remain on the page, then I could use $("#add_to_cart").html("Your gift has been successfully added to the cart!"); and there would be no issue. I am stumped however because users are coming from PAGE B back to PAGE A

Any help would be appreciated.

Answer 1

If you are generating all of your pages then this is pretty straightforward. On Page A, have a placeholder in your template (or a branch in your PHP, etc.) that will only be filled if a certain variable ($notification) is not null. When you are processing the input from Page B, C, D, etc, you can choose to set $notification to some message before rendering Page A. (Note, I'm referring to server processing, not Javascript here).

If you are simply redirecting and the same process that is handling Page B isn't then generating Page A, it's a little trickier since you are trying to convey a state. You could put some parameters in the URL which then get mapped to printed messages. But I like the above solution better.