jQuery - Loading <div>s from multiple html pages

[Mattrix]

I'm very new to jQuery (approx. 2 weeks) and I have a problem. I'll try to explain this so it can be understood (sorry if I use the wrong terminology).

I'm currently using .load() to grab <div>s from otherPage.html and append them to a <div> in mainPage.html. I am then using the CycleLite plugin to cycle through these <div>s

$(function() {
  $('<div id="info">').load('otherPage.html #containAll', function() {
	$(this).appendTo('#container');
	$('#containAll').cycle();
  });
});

All this working perfectly. What I need to do though is be able to grab these <div>s from different HTML pages. For example: grab #container01 from otherPage01.html, #container02 from otherPage02.html, etc. One of the main problems is also that I need to make it so new HTML pages can be added without adding more jQuery code.

Maybe if something like a +1 thing could be done (like

.load('otherPage' + 1 '.html, #container'...)

). I don't really know. I'm sort of stumbling around in the dark here. I've spent the last few days scouring google, but nothing seems to mention using .load() to pull from multiple HTML pages. Can it be done, or is there some other way around it?

Anyway, any help you can offer would be appreciated.

[bgallegos]

Why not just use a for loop?

[Mattrix]

@bgallegos

Thanks for the tip. As I said, I'm very new to this (I'm an html and css coder, I've never used JS or jQuery before), so I don't actually know what that is, but I'll check it out and see what I can come up with.

[Mattrix]

@bgallegos

Thanks for the help. It now works pretty much how I want it, but not without problems.

<script type="text/javascript">
		
	var i=1;
	for (i=1;i<=10;i++)
	{
		$('<div>').load('testHTML/AJAXtest' + i + '.html', function() {
			$(this).appendTo('#container') 
			$('#container').cycle();
		});
	}
		  
</script>

This grabs any HTML with the file name 'AJAXtest#.html' from the 'testHTML' folder and cycles them one after the other.

The main problem is that I now get this error in Firebug:

uncaught exception: Access to restricted URI denied (NS_ERROR_DOM_BAD_URI) in jquery.min.js (line 28).

[bgallegos]

You do not need:

var i=1;

in your code as it is created in the for loop. Doesn't hurt anything, but it's not necessary. You could do it like:

for(var i = 1; i <= 10; i++)

Also, what are the files that you have? Right now your for loop is looking for files named AJAXtest1.html through AJAXtest10.html

If you do not have the file named AJAXtest10.html that could be causing the error, and you would need to change your for loop to:

for(var i = 1; i < 10; i++)

Which would go from 1 to 9 instead. Hope this helps!

[Mattrix]

@bgallegos. Cheers for that.

I had worked out (mainly by chance and luck and google) that it was the number 10 that was giving me the error. If I set that number to the number of HTML pages that are being called, then the error disappears and it all works fine.

I made the changes you suggested And the whole thing works just as it's meant to. Thank you for all your help, it's much appreciated.