Load the page without clicking 1

[mayamanako]

hi guys, i am testing this code below which i've seen from this:

http://mycollegeblues.blogspot.com/2007/09/simplest-ajax-page-fetcher.html

i would like to know if you have ideas how i could make the external page load automatically as soon as the 'parent' page loads without clicking the link?

thanks for any inputs.

function fetch(URL, divId) {
req = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("MSXML2.XMLHTTP.3.0");

req.open("GET", URL, true);
req.onreadystatechange = function() {
if (req.readyState == 4 && req.status == 200) {
document.getElementById(divId).innerHTML = req.responseText;
}
}
req.send(null);
}

Save the above code as fetcher.js. Then include it in your html/php/whatever page:


<script language="javascript" src="fetcher.js"></script>


The last step is to create the a <div> to load the content into and the link that would actually do it:


<div id="container_div" class="container">Some default text<div>

<a href="#" onclick="fetch('url_of_page_to_fetch.php?with=arguements', 'container_div')">fetch</a>

 

[feherke]

Hi

how i could make the external page load

If "external" means not from the same domain, then probably will not work because the same origin policy. Unless you have control over that external site and allow Cross-Origin Resource Sharing.

automatically as soon as the 'parent' page loads without clicking the link?

window[teal].[/teal]onload[teal]=[/teal][b]function[/b][teal]()[/teal] [teal]{[/teal]
  [COLOR=darkgoldenrod]fetch[/color][teal]([/teal][green][i]'url_of_page_to_fetch.php?with=arguements'[/i][/green][teal],[/teal][green][i]'container_div'[/i][/green][teal])[/teal]
[teal]}[/teal]

Feherke.

http://free.rootshell.be/~feherke/

 

[mayamanako]

hi feherke. thanks for your help. it's working.

but when i tried to load few other pages, it's only loading one page. i tried to vary the divs' names like this, but still not loading all pages.

<div id="container_div" class="container">Some default text<div>
<script>
window.onload=function() {
  fetch('url_of_page_to_fetch.php?with=arguements','container_div')
}
</script>


<div id="container_div2" class="container">Some default text<div>
<script>
window.onload=function() {
  fetch('url_of_page_to_fetch2.php?with=arguements','container_div2')
}
</script>


<div id="container_div3" class="container">Some default text<div>
<script>
window.onload=function() {
  fetch('url_of_page_to_fetch3.php?with=arguements','container_div3')
}
</script>

 

[feherke]

Hi

Assigning a new handler to the [tt]onload[/tt] even overwrites the previous one.

window[teal].[/teal]onload[teal]=[/teal][b]function[/b][teal]()[/teal] [teal]{[/teal]
  [COLOR=darkgoldenrod]fetch[/color][teal]([/teal][green][i]'url_of_page_to_fetch.php?with=arguements'[/i][/green][teal],[/teal][green][i]'container_div'[/i][/green][teal])[/teal]
  [COLOR=darkgoldenrod]fetch[/color][teal]([/teal][green][i]'url_of_page_to_fetch2.php?with=arguements'[/i][/green][teal],[/teal][green][i]'container_div2'[/i][/green][teal])[/teal]
  [COLOR=darkgoldenrod]fetch[/color][teal]([/teal][green][i]'url_of_page_to_fetch3.php?with=arguements'[/i][/green][teal],[/teal][green][i]'container_div3'[/i][/green][teal])[/teal]
[teal]}[/teal]

[gray]// or[/gray]

window[teal].[/teal][COLOR=darkgoldenrod]addEventListener[/color][teal]([/teal][green][i]'load'[/i][/green][teal],[/teal][b]function[/b][teal]()[/teal] [teal]{[/teal]
  [COLOR=darkgoldenrod]fetch[/color][teal]([/teal][green][i]'url_of_page_to_fetch.php?with=arguements'[/i][/green][teal],[/teal][green][i]'container_div'[/i][/green][teal])[/teal]
[teal]}[/teal][teal],[/teal][b]true[/b][teal])[/teal]

window[teal].[/teal][COLOR=darkgoldenrod]addEventListener[/color][teal]([/teal][green][i]'load'[/i][/green][teal],[/teal][b]function[/b][teal]()[/teal] [teal]{[/teal]
  [COLOR=darkgoldenrod]fetch[/color][teal]([/teal][green][i]'url_of_page_to_fetch2.php?with=arguements'[/i][/green][teal],[/teal][green][i]'container_div2'[/i][/green][teal])[/teal]
[teal]}[/teal][teal],[/teal][b]true[/b][teal])[/teal]

window[teal].[/teal][COLOR=darkgoldenrod]addEventListener[/color][teal]([/teal][green][i]'load'[/i][/green][teal],[/teal][b]function[/b][teal]()[/teal] [teal]{[/teal]
  [COLOR=darkgoldenrod]fetch[/color][teal]([/teal][green][i]'url_of_page_to_fetch3.php?with=arguements'[/i][/green][teal],[/teal][green][i]'container_div3'[/i][/green][teal])[/teal]
[teal]}[/teal][teal],[/teal][b]true[/b][teal])[/teal]

Note that Explorer earlier than version 9 user their proprietary [tt]attachEvent()[/tt] method instead of the standard [tt]addEventListener()[/tt] method.


Feherke.

http://free.rootshell.be/~feherke/

 

[mayamanako]

WOW, that is AWESOME! Works like magic!

Thanks very much Feherke!

Have a nice day!