I am facing error when Including html file in another html file using jquery

Question

I am using this code, When I run this code in browser I am getting a blank page, Help me out please, Thanks in advance.

<html> 
  <head> 
    <script src="js/jquery-3.3.1.js"></script>
    <script> 
    $(function(){
      jQuery.noConflict();
      $("#includedContent").load("a.html"); 
    });
    </script> 
  </head> 

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

my a.html is following

<html>
    <p>this is included file</p>
</html>

try replacing `
` with ``, if still there is blank page, then you have issues with url — , Jul 08 '18 at 10:58
@JamieSouthwell, are you browsing file with `file:///` protocol? — , Jul 08 '18 at 11:03

score 2 · Answer 1 · answered Jul 08 '18 at 11:00

2

you can not nest html tags inside each other. Best solution is to use a iframe instead.

$("#includedContent").html("<iframe src='a.html'></iframe>");

answered Jul 08 '18 at 11:00

Josh Stevens

3,943
1
15
22

your file path is incorrect then.. open that html file in a web page, paste the entire URL into the src then it should work. – Josh Stevens Jul 08 '18 at 11:08

score 0 · Answer 2 · 2018-07-09T04:16:40.797

0

For security reasons browsers don't allow to load files using such methods which involves XHR/AJAX.

$("#includedContent").load("a.html");

You need to host/deploy files on server, try using XAMPP/WAMPP or equivalent.

edited Jul 09 '18 at 04:16

answered Jul 08 '18 at 11:08

score 0 · Answer 3 · answered Jul 08 '18 at 11:59

You should use load() if you are trying to load a specific selector but if you are trying to load the entire page use get(), please see in this SO the differences between jQuery.get() and jQuery.load();

$.get('a.html', appndHtml);
function appndHtml(data){
   $("#includedContent").prepend(data);
}

score 0 · Answer 4 · answered Jul 08 '18 at 14:12

0

 $(document).ready(function() { 
   $('#some-container').load('path-name.html'); 
 });

The document should be ready, or fully loaded.

answered Jul 08 '18 at 14:12

Dan K

38
4

I am facing error when Including html file in another html file using jquery

4 Answers4