Menu icon Foundation
Interchange what am I doing wrong?

I'm trying to test interchange with HTML partials, but I'm not able to get this to work. When I change the div tags to img tags things work flawlessly, but not when I use it with a div tag. can anyone point out what I'm doing wrong?
nothing seems to happen when I load the page, initially I get the "TESTING" (the content nested inside the data-interchange div) which disappears immediately when the page loads displaying blank.

Interchange-test.html

<!DOCTYPE html>
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
    <meta charset="utf-8" />
	<meta name="viewport" content="width=device-width" />
	<title>Page Title</title>
	<link rel="stylesheet" href="css/normalize.css" />
	<link rel="stylesheet" href="css/foundation.css" />
	<link rel="stylesheet" href="css/app.css" />
	<script src="js/vendor/custom.modernizr.js"></script>
</head>
<body>
	<div class="row">
	<div data-interchange="[small.html, (small)], [medium.html, (medium)], [large.html, (large)]"><div>TESTING</div> </div>
	</div>
	<script src="js/vendor/jquery.js"></script>
	<script src="js/foundation/foundation.js"></script>
	<script src="js/foundation/foundation.interchange.js"></script>
	<!-- Other JS plugins can be included here -->
	<script>
		$(document).foundation();
	</script>
</body>
</html>


small.html
<div><h1>Small</h1></div>

medium.html
<div><h1>MEDIUM</h1></div>

large.html
<div><h1>LARGE</h1></div>



         

interchangebackground Image

I'm trying to test interchange with HTML partials, but I'm not able to get this to work. When I change the div tags to img tags things work flawlessly, but not when I use it with a div tag. can anyone point out what I'm doing wrong?
nothing seems to happen when I load the page, initially I get the "TESTING" (the content nested inside the data-interchange div) which disappears immediately when the page loads displaying blank.

Interchange-test.html

<!DOCTYPE html>
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
    <meta charset="utf-8" />
	<meta name="viewport" content="width=device-width" />
	<title>Page Title</title>
	<link rel="stylesheet" href="css/normalize.css" />
	<link rel="stylesheet" href="css/foundation.css" />
	<link rel="stylesheet" href="css/app.css" />
	<script src="js/vendor/custom.modernizr.js"></script>
</head>
<body>
	<div class="row">
	<div data-interchange="[small.html, (small)], [medium.html, (medium)], [large.html, (large)]"><div>TESTING</div> </div>
	</div>
	<script src="js/vendor/jquery.js"></script>
	<script src="js/foundation/foundation.js"></script>
	<script src="js/foundation/foundation.interchange.js"></script>
	<!-- Other JS plugins can be included here -->
	<script>
		$(document).foundation();
	</script>
</body>
</html>


small.html
<div><h1>Small</h1></div>

medium.html
<div><h1>MEDIUM</h1></div>

large.html
<div><h1>LARGE</h1></div>



         

Asif gave the most helpful answer for this post
Asif almost 6 years ago

Ok, Finally had the time to look into this and got this resolved.

The problem was that the page has to be called using http request and will not work if we open the file in the browser, like some of us do for testing. Everything else in foundation work when we just open the file in the browser without http request except for interchange.

once I set up a test environment and called using the http request interchange worked.

The foundation team should specify this in their documentation to make life easy for the end users.

This post has been closed. No new replies can be added.

keith butler about 6 years ago

I have the same problem with interchange in a RoR project. To resolve this I did the following
1. Routes.rb
get "/about" => "page#about"
post "/about" => "page#about"
get "/about-s" => "page#about-s"
post "/about-s" => "page#about-s"
get "/about-m" => "page#about-m"
post "/about-m" => "page#about-m"

Where
about is my page that I want to display.
about-s in the small version partial
about-m is the medium version partial

2.About.html.erb

code
...
...

code
...
...

3.about-s.html.erb



.second .footerBoxStruct{ display:none;}
.second .headerBoxImageStruct{ display:none;}
.second .top-bar{display:none;}



Small

The footerBoxStruct and headerBoxStruct and top-bar are classes that are from the about.html.erb application. i.e. the replicated work across the rails application. If I do not remove these from the about-s.html.erb then they are replicated when the about.html.erb is displayed.

This seems a bit of a work around solution but it does work with 2 problems.
1. the about-s.html can be accessed from the browser, as it is in the routes.rb file
2. the clean RoR <%= render partialName %> is lost

Asif almost 6 years ago

Ok, Finally had the time to look into this and got this resolved.

The problem was that the page has to be called using http request and will not work if we open the file in the browser, like some of us do for testing. Everything else in foundation work when we just open the file in the browser without http request except for interchange.

once I set up a test environment and called using the http request interchange worked.

The foundation team should specify this in their documentation to make life easy for the end users.

André Mailho over 5 years ago

Any way to make it appear on localhost?