Including separate html file does not load

Question

I'm trying to use jquery to simply load another html file in my current html file, but nothing is showing. I tried following one of the answers here, but I'm still not seeing anything appear on my html file.

about.html

<!DOCTYPE html>
<html>

  <head>
    <script src="http://code.jquery.com/jquery-2.1.4.js">
    $(function(){
      $("#topbar").load("b.html");
    });
    </script>
  </head>

  <body>
    <div id="topbar"></div>
  </body>
</html>

b.html

<p> This is the included file </p>

what am I doing wrong here?

score 7 · Accepted Answer · answered Aug 31 '15 at 19:42

7

JS <script> 101: You can either have a fully defined script inside the <script>...</script> block, OR you can load the script from an external src. You cannot have both in a single block. If you specify a src, then the body of the <script> block is ignored. You should have

<script src="http://code.jquery.com/jquery-2.1.4.js"></script>
<script> <-------------------------------------------^^^^^^^^^
$(function(){
  $("#topbar").load("b.html");
});
</script>

Note the </script><script> addition.

answered Aug 31 '15 at 19:42

Marc B

356,200
43
426
500

I added that addition, but there's nothing being displaying in about.html If I was to open it in a web browser – Syntactic Fructose Aug 31 '15 at 19:44
then check the js console for errors, check your webserver's access log to see if there's a hit on b.html at all, etc... – Marc B Aug 31 '15 at 19:45
"Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource." – Syntactic Fructose Aug 31 '15 at 19:46
ah, something something localhost I got it – Syntactic Fructose Aug 31 '15 at 19:47
@SyntacticFructose I bet you are opening your page on `file://`. – Derek 朕會功夫 Aug 31 '15 at 19:47
.load() is an ajax call, and can only be done if the containing page was loaded from the SAME source. file:// urls cannot do ajax requests to themselves, since they weren't loaded via an http request. – Marc B Aug 31 '15 at 19:48

Luc Laverdure · Answer 2 · 2015-08-31T20:08:37.623

try this instead:

<!DOCTYPE html>
<html>

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.js"></script>
<script type="text/javascript">
$(function(){
    $.ajax({
      method: "GET",
      url: "b.html",
      dataType: 'html',
      data: { },
      success: function(data) {
          $("#topbar").html(data);
      }
    })      
});
</script>
</head>

<body>
<div id="topbar"></div>
</body>
</html>

Including separate html file does not load

2 Answers2