Menu icon Foundation
Using Interchange HTML Partials

The Interchange HTML Partials seem to only work after you post them on the server, and not while you are testing them on your local drive. The absolute http: path, and relative path both work. Here are my HTML Partial files:

<div><h1>Small</h1></div>
            

         

<div><h1>Medium</h1></div>
            

         

<div><h1>Large</h1></div>
            

         

Here is a test file with relative paths that I copied and modified from another post here on the forum:

<!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="[ic/small.html, (small)], [ic/medium.html, (medium)], [ic/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>
            

         

Here is the same test file, but with absolute HTTP paths:

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation | Welcome</title>
    <link rel="stylesheet" href="css/foundation.css" />
    <script src="js/modernizr.js"></script>
  </head>
  <body>
    
    <div class="row">
      <div class="large-12 columns text-center">
        <h1>Interchange Test</h1>
      </div>
    </div>
    
    <div class="row">
    <div data-interchange="[http://www.ziptiedomes.com/test/ic/small.html, (small)], [http://www.ziptiedomes.com/test/ic/medium.html, (medium)], [http://www.ziptiedomes.com/test/ic/large.html, (large)]"><div>TESTING</div> </div>
	</div>
    
    <script src="js/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>
  </body>
</html>
            

         

The Intechange replacement of the HTML Partials worked for both files, but only after they and the HTML Partial files were posted on the server.

I was surprised to see that the absolute path file did not work while on my local drive, the file has to be on the server to function - even with a full HTTP path to the HTML Partial files loaded on the server it would not work locally.

Everything else in Foundation can be tested in the browser on your local drive, even the Interchange image files that are automatically replaced for large, medium and small - will work locally.

I hope this is helpful.

John Hurt

interchange

The Interchange HTML Partials seem to only work after you post them on the server, and not while you are testing them on your local drive. The absolute http: path, and relative path both work. Here are my HTML Partial files:

<div><h1>Small</h1></div>
            

         

<div><h1>Medium</h1></div>
            

         

<div><h1>Large</h1></div>
            

         

Here is a test file with relative paths that I copied and modified from another post here on the forum:

<!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="[ic/small.html, (small)], [ic/medium.html, (medium)], [ic/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>
            

         

Here is the same test file, but with absolute HTTP paths:

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation | Welcome</title>
    <link rel="stylesheet" href="css/foundation.css" />
    <script src="js/modernizr.js"></script>
  </head>
  <body>
    
    <div class="row">
      <div class="large-12 columns text-center">
        <h1>Interchange Test</h1>
      </div>
    </div>
    
    <div class="row">
    <div data-interchange="[http://www.ziptiedomes.com/test/ic/small.html, (small)], [http://www.ziptiedomes.com/test/ic/medium.html, (medium)], [http://www.ziptiedomes.com/test/ic/large.html, (large)]"><div>TESTING</div> </div>
	</div>
    
    <script src="js/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>
  </body>
</html>
            

         

The Intechange replacement of the HTML Partials worked for both files, but only after they and the HTML Partial files were posted on the server.

I was surprised to see that the absolute path file did not work while on my local drive, the file has to be on the server to function - even with a full HTTP path to the HTML Partial files loaded on the server it would not work locally.

Everything else in Foundation can be tested in the browser on your local drive, even the Interchange image files that are automatically replaced for large, medium and small - will work locally.

I hope this is helpful.

John Hurt

Jason Kleinberg over 5 years ago

This is due to security restrictions on the way that AJAX calls are handled. It's to prevent a page from trying to access your local files maliciously.

http://stackoverflow.com/questions/17947971/ajax-in-jquery-does-not-work-from-local-file