jquery load() not working with array loop

Question

What I am trying to do is to store a list of hundreds of files in an array and use jquery load() function to load their content one after one by a loop.

I have very little knowledge of jquery and javascript, and this is what I managed to write, but it is not working.

var files=['index1c.html','index23c.html'];

for(var index = 0; index < files.length; index++){
    var file = files[index];

$('#result').load('file .desc');
}

I think that I have some problem in variable file given in load() , is it the right way? It is working fine if I directly write a single file name in place of file like below:

$('#result').load('index1c.html .desc');

.load() will overwrite the contents of #result every time a new file loads. Is this what you intend to happen? — Blender
– Blender, Commented Dec 25, 2012 at 8:22
@Blender: no i want content to be appended. Ya this is what load() do, I did not payed attention to this. Any solution? — Abhinav
– Abhinav, Commented Dec 25, 2012 at 8:25
"hundreds of files". Poor little server, poor little client, poor little internet. — Beetroot-Beetroot
– Beetroot-Beetroot, Commented Dec 25, 2012 at 8:26
@Engineer: If a selector is passed after the URL, jQuery uses those elements instead of the whole page. — Blender
– Blender, Commented Dec 25, 2012 at 8:27

Ram · Accepted Answer · 2012-12-25 08:31:30Z

3

Change:

$('#result').load('file .desc');

To:

$('#result').load(file + ' .desc');

Note that load method removes the element's content before appending new content. You can create unique IDs like result1, result2 ... and code:

for(var index = 0; index < files.length; index++){
    var file = files[index];
    $('#result' + (index + 1) ).load(file + ' .desc');
}

Or you can use classes and eq method:

var $results = $('.results')
for(var index = 0; index < files.length; index++){
    var file = files[index];
    $results.eq(index).load(file + ' .desc');
}

Or if you want to append the data you can use $.get utility function instead of load method.

edited Dec 25, 2012 at 8:31

answered Dec 25, 2012 at 8:20

Ram

145k16 gold badges174 silver badges201 bronze badges

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

6 Comments

Abhinav Over a year ago

any way by which I can prevent it to get overwrite and instead get it appended ?

Ram Over a year ago

@Abhi You can use $.get utility function.

Beetroot-Beetroot Over a year ago

A possible issue Abhi - do you need to guarantee that the files' contents are listed in the same order they were requested? With a straightforward loop-load, this is not guaranteed.

Abhinav Over a year ago

@undefined: I tried using $.get but it looks like I need to use some server side tech to get data in proper format. I tried this code $.get('index1c.html',function(data){alert("Data Loaded: " + data);}); but it is giving Data Loaded: [object XMLDocument] and when I parsed xml, it is showing null

Ram Over a year ago

@Abhi Actually both load and $.get need server to work, if you have your server running create a jQuery object from the data returned by server find the element and then append it, $(data).find('.desc').appendTo('#result')

|

Corbin · Accepted Answer · 2012-12-25 08:20:55Z

2

You're using the literal string 'file .desc'.

It looks like you want file + '.desc'.

'a b' is the string a b whereas a + ' b' is the string with the contents of the variable a appended to the string ' b'.

answered Dec 25, 2012 at 8:20

Corbin

33.6k7 gold badges73 silver badges79 bronze badges

Comments

Vidya S Masani · Accepted Answer · 2015-02-04 12:25:42Z

2

Try using jQuery.ajaxSetup({async:false});

{async:false} will hold the execution of rest code. Once you get response of ajax code, rest of the code will be executed. After executing the ajax response reset to async to true jQuery.ajaxSetup({async:true});

So final code will be

var files=['index1c.html','index23c.html'];

for(var index = 0; index < files.length; index++){
    var file = files[index];
    jQuery.ajaxSetup({async:false});
    $('#result').load('file .desc');
    jQuery.ajaxSetup({async:true})
}

answered Feb 4, 2015 at 12:25

Vidya S Masani

3982 silver badges14 bronze badges

Collectives™ on Stack Overflow

jquery load() not working with array loop

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related