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 <div id="includedContent"></div> with <iframe src="a.html"></iframe>, if still there is blank page, then you have issues with url — user2575725
– user2575725, Commented Jul 8, 2018 at 10:58
@JamieSouthwell, are you browsing file with file:/// protocol? — user2575725
– user2575725, Commented Jul 8, 2018 at 11:03

Josh Stevens · Accepted Answer · 2018-07-08 11:00:30Z

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 8, 2018 at 11:00

Josh Stevens

4,2811 gold badge20 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Josh Stevens Over a year ago

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.

Ram Segev · Accepted Answer · 2018-07-08 11:59:40Z

0

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);
}

answered Jul 8, 2018 at 11:59

Ram Segev

2,5612 gold badges14 silver badges24 bronze badges

Comments

Dan K · Accepted Answer · 2018-07-08 14:12:44Z

0

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

The document should be ready, or fully loaded.

answered Jul 8, 2018 at 14:12

Dan K

384 bronze badges

Comments

score 0 · Accepted Answer · 2018-07-09 04:16:40Z

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 9, 2018 at 4:16

answered Jul 8, 2018 at 11:08

user2575725

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related