1

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

Ryan
  • 2,144
  • 8
  • 28
  • 39

1 Answers1

2

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

Community
  • 1
  • 1
Dakine83
  • 687
  • 2
  • 9
  • 23
  • But how do I load that cart.html into the iframe if I have to remove it from the form? – Ryan Feb 18 '12 at 02:29
  • In this case you wouldn't be using an iframe. the content would load directly into a div (the pop up div) on your page. – Dakine83 Feb 22 '12 at 02:14
  • Thanks for your help, I decided to stick with iFrames and just make any link on the page that directs to the cart to open in an iFrame. You answer was correct thought if I was to do it that way. Thanks – Ryan Feb 24 '12 at 14:23