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, Mar 15 '12 at 21:35
Read http://stackoverflow.com/a/3076648/297641 post for your second problem. — Selvakumar Arumugam, Mar 15 '12 at 21:49

score 5 · Answer 1 · edited May 23 '17 at 11:56

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 '17 at 11:56

Community

1
1

answered Mar 15 '12 at 21:25

Selvakumar Arumugam

79,297
15
120
134

Thanks SKS, That was instant. It worked, thanks you saved a lot of time for me. – budding_fed Mar 15 '12 at 21:30

score 0 · Answer 2 · answered Mar 15 '12 at 21:27

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 '12 at 21:27

Chris

739
2
8
23

JQuery load local files dynamically

2 Answers2

Linked