bootstrap, JQuery load function; cannot load elements from an external html document

Question

I desperately trying to follow a basic tutorial about loading an html element from an external page with JQuery.

I have a html document named oltest.html, which contains only:

<ol id="projects">
<li>un</li>
<li>deux</li>
<li>trois</li>
</ol>

and a html document, test.html, next to the first one that load the ol element:

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="Test">
    <meta name="author" content="">
    <link rel="icon" href="favicon.ico">

    <title>Test</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="home.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <!--script src="../../assets/js/ie-emulation-modes-warning.js"></script-->

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>
    <div>   
    <!--ol id="projects">
    <li>un</li>
    <li>deux</li>
    <li>trois</li>
    </ol-->


    <ol id="new-projects"></ol>

    </div> <!-- /container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
        $( "#new-projects" ).load( "oltest.html #projects li" );
    </script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <!--script src="../../assets/js/ie10-viewport-bug-workaround.js"></script-->
  </body>
</html>

but this doesn't work. Does someone know? Thanks in advance.

http://jsfiddle.net/wze7ct7z/ ? – guest271314 Mar 25 '15 at 16:33 — guest271314, Mar 25 '15 at 16:33

score 0 · Accepted Answer · edited May 23 '17 at 11:56

0

This is a interesting question. It's possible that it's not loading the external HTML file because are running your tests locally. When I ran your code locally I got this console error:

XMLHttpRequest cannot load file:///path/to/your/html/file. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

You might want to look at this stackoverflow thread:

Dynamically loading content on local HTML page

Hope this helps!

edited May 23 '17 at 11:56

Community

1
1

answered Mar 25 '15 at 16:14

user2898987

16
1

Thank, I understand now. I find some tricks there: http://stackoverflow.com/questions/676394/how-to-include-an-html-page-into-another-html-page-without-frame-iframe – K20 Mar 26 '15 at 16:18

bootstrap, JQuery load function; cannot load elements from an external html document

1 Answers1