JQuery load local files dynamically

Question

I am developing a HTML prototype, all the static content in the page is saved in different files. I want to use these files as includes in my HTML prototype. Below is HTML code for calling the two HTML include files.

<div class="include-file" file="header.html"></div>
<div class="include-file" file="footer.html"></div>

I am using jquery load() method to include these files.

$(function () {
    var fileName = $(".include-file").attr('file');
     $(".include-file").load(fileName);
});

This function works fine when i am including only one file in a page.

Issues:

1.When I include two files the second file(footer.html) doesn't load,and first file(header.html)loads twice.

2.Single file loading works in FF,IE9 but doesn't work in Chrome.(Note: All files are local, I am not planning to use a web server, as this is just a prototype)

I searched further for the issue with Chrome, this is due to the policy Access-Control-Allow-Origin. Any solutions to overcome this. — budding_fed
– budding_fed, Commented Mar 15, 2012 at 21:35
Read stackoverflow.com/a/3076648/297641 post for your second problem. — Selvakumar Arumugam
– Selvakumar Arumugam, Commented Mar 15, 2012 at 21:49

Community · Accepted Answer · 2017-05-23 11:56:25Z

5

You are using same filename on each .load. Try something like below,

$(function () {
    $(".include-file").each (function () {
       $(this).load($(this).attr('file'));
     });
});

This should fix your first problem.

Try Ways to circumvent the same-origin policy for your second problem.

edited May 23, 2017 at 11:56

CommunityBot

11 silver badge

answered Mar 15, 2012 at 21:25

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

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

1 Comment

budding_fed Over a year ago

Thanks SKS, That was instant. It worked, thanks you saved a lot of time for me.

Chris · Accepted Answer · 2012-03-15 21:27:48Z

0

$(".include-file").load(fileName);

This line loads for all elements with selector of class "include-file", so for BOTH elements.

EDIT: maybe you could also use the following (not tested)

$('div[file="'fileName'"').load(fileName);

answered Mar 15, 2012 at 21:27

Chris

7692 gold badges9 silver badges24 bronze badges

Collectives™ on Stack Overflow

JQuery load local files dynamically

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related