Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jan 2009
    Location
    Australia
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    jQuery - Loading <div>s from multiple html pages

    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

    Code:
    $(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
    Code:
    .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.

  • #2
    New Coder
    Join Date
    Jul 2008
    Posts
    45
    Thanks
    0
    Thanked 6 Times in 6 Posts
    Why not just use a for loop?

  • Users who have thanked bgallegos for this post:

    Mattrix (01-27-2009)

  • #3
    New to the CF scene
    Join Date
    Jan 2009
    Location
    Australia
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    @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.

  • #4
    New to the CF scene
    Join Date
    Jan 2009
    Location
    Australia
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    @bgallegos

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

    Code:
    <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).

  • #5
    New Coder
    Join Date
    Jul 2008
    Posts
    45
    Thanks
    0
    Thanked 6 Times in 6 Posts
    You do not need:

    Code:
    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:

    Code:
    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:

    Code:
    for(var i = 1; i < 10; i++)
    Which would go from 1 to 9 instead. Hope this helps!

  • #6
    New to the CF scene
    Join Date
    Jan 2009
    Location
    Australia
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    @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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •