Using JavaScript to load external HTML

Question

I want to keep the code short and clean. So I'm importing tons of HTML files.

I have this in head:

<script> 
var loadHtml(file) {
    $("#LoadHTML").load("html/file.html"); 
});
</script>

And this in body:

<div id="LoadHTML"></div>

The problem is I have to duplicate the script for each <div> I have.
Is there a way I can make a placeholder in the script and do what I have visualized?

<!-- Head -->
<script> 
$(function(){
$("#LoadHTML").load("html/{data}.html"); 
});
</script>

<!-- Body -->
<div id="LoadHTML" data="file"></div>

How do I do it so I only have to use the script once?

Just keep in mind making lots of request vs 1 request with long code can make your page load a lot slower - browsers have a max number of request they can process so they have to wait for each one to complete before moving onto the next when the max number is reached — Pete
– Pete, Commented Nov 20, 2017 at 16:27
This isn't a good way to go about simplifying your page. You'd be better off using a client-side rendering framework (like React or Angular). — JLRishe
– JLRishe, Commented Nov 20, 2017 at 16:29

Rory McCrossan · Accepted Answer · 2017-11-20 16:26:02Z

4

You could group the elements to be loaded by a common class and use a data attribute to set the URL to target the AJAX request to, something like this:

$(".load").each(function() {
  $(this).load($(this).data('target')); 
});

<div class="load" data-target="html/file.html"></div>
<div class="load" data-target="html/foo.html"></div>
<div class="load" data-target="html/bar.html"></div>

With that being said, I would strongly suggest you use server side includes where possible instead of your current approach. Using client side requests as you are will make many more, potentially needless, requests to your server, and hence slowing it down.

answered Nov 20, 2017 at 16:26

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

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

5 Comments

DoubleThePsycho Over a year ago

Could I do something like: $(".load").each(function() { $(this).load("html/" + $(this).data('target') + ".html"); }); and just have the data as the name?

Rory McCrossan Over a year ago

Yep, absolutely.

DoubleThePsycho Over a year ago

I gave this a try, making sure to replace ID with class, and it would not work for me...

DoubleThePsycho Over a year ago

I decided to remove the entire thing and replace it with PHP :P

Rory McCrossan Over a year ago

Probably a better solution in the long term :) Don't forget to accept an answer if it helped, though.

Mario Nikolaus · Accepted Answer · 2017-11-20 16:25:44Z

0

Yes you can!

$("#LoadHTML").load("html/" + data + ".html");

where data is keyword of your template.

answered Nov 20, 2017 at 16:25

Mario Nikolaus

2,4061 gold badge23 silver badges29 bronze badges

Comments

J Doe · Accepted Answer · 2017-11-20 16:28:10Z

-1

id has to be unique. You may have to generate the id name so it would be #LoadHTML1, #LoadHTML2, #LoadHTML3, etc.

Alternatively use class so it's ".LoadHTML"

answered Nov 20, 2017 at 16:28

J Doe

197 bronze badges

Collectives™ on Stack Overflow

Using JavaScript to load external HTML

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related