Question

Here is my set up…

I have two pages, index.html and cart.html. I have a form on index.html that, when submitted loads cart.html in a pop-up iframe. That works fine.

When I load the cart.html into the iframe it loads the entire cart.html page, showing the header/menu/background that is the same as the index.html. But that’s a problem, I need to be able to load the cart.html into the iframe, but then target a div with an ID of ‘cart-content’. I need only that div to show and not the entire page.

A work around, would be to just stylize cart.html so it fits in the iframe without and of it’s headers/menus/backgrounds, but I need to be able to visit cart.html outside of the iframe.

here is my form:

<form id="product-form" method="post" action="/cart">
<!-- BIG CARTEL CONTENT, NOT IMPORTANT -->
</form>

I am using a jQuery plugin, FaceBox to open the iFrame. Here is it’s code:

jQuery('#product-form').submit(function() {
    jQuery.facebox('<iframe name="targetbox"></iframe>');
    return true;
}).prop('target','target box')

So in the form I need it’s action to be something like “/cart#cart-content” Make sense? Hope someone can help! Thanks

Answer 1

Check this out: iframe to Only Show a Certain Part of the Page

Basically, use the load function to load up the cart.html page, and select the div off that page you want to display – i.e.

$('#popUpDiv').load('path-to-my-page/cart.html #divToDisplay')

In this case, #divToDisplay is the ID of the piece of cart.html you want to load into the popup.

Note The last sentance of Pointy’s answer –

There may be other things you need to do, and a significant difference
is that the content will become part of the main page instead of being
segregated into a separate window.

You might need to account for this if you’re submitting from the loaded div.

HTH