Multiple Instances of External Page - Ajax

[pacmanny2]

Hi folks, I am experimenting on this Ajax Page Fetcher and it's been really nice.

http://www.javascriptkit.com/script/...efetcher.shtml

I just would like to ask for your advice as to how would I be able to make it to work for multiple instances of SAME div id? I know I have to rename another div with a new id, but I just thought to ask you if there's a way to get around it? Because the external page won't load inside the other div.

Is there other way? Thanks for any inputs.


something like below.

<div id="joe"></div>
<script type="text/javascript">
// Fetch and display "content.htm" inside a DIV automatically as the page loads:
ajaxpagefetcher.load("joe", "content.htm", true)
</script>


<div id="joe"></div>
<script type="text/javascript">
// Fetch and display "content.htm" inside a DIV automatically as the page loads:
ajaxpagefetcher.load("joe", "content.htm", true)
</script>

[devnull69]

Isn't the first parameter of .load() actually the ID of the destination element? So when you change the ID of the second DIV to let's say "john" and at the same you change the first parameter of the second .load() call to "john", doesn't it just work?

<div id="joe"></div>
<script type="text/javascript">
// Fetch and display "content.htm" inside a DIV automatically as the page loads:
ajaxpagefetcher.load("joe", "content.htm", true)
</script>


<div id="john"></div>
<script type="text/javascript">
// Fetch and display "content.htm" inside a DIV automatically as the page loads:
ajaxpagefetcher.load("john", "content.htm", true)
</script>

[Kor]

By short: no. id must be unique on document.

[devnull69]

Ok, it's very similar to one of the official examples on the mentioned documentation page

<div id="joe"></div>

<script type="text/javascript">
// Fetch and display "content.htm" inside a DIV automatically as the page loads:
ajaxpagefetcher.load("joe", "content.htm", true)
</script>

<div id="bob"></div>

<script type="text/javascript">
<!-- Fetch and display "sub/content2.htm" inside a DIV when a link is clicked on. Also load one .css file-->
ajaxpagefetcher.load('bob', 'sub/content2.htm', false, '', ['page.css']);
</script>