Categories:

Home / Free JavaScripts / Ajax Scripts / Here

Cut & Paste Ajax Page Fetcher

Credit: JavaScript Kit

Description: This Ajax script lets you fetch another page's content (both needs to be from the same site) and display it on demand within the current page. You can further specify any external .js or .css files that should be loaded at the same time as the external page, as Ajax fetched pages often will be not load these files correctly as they appear within the page's source.

Example:

Load Content 1 | Load Content 2

Directions:

Step 1: Insert the below into the <head> section of your page:

Download the external file referenced in the above code: ajaxpagefetcher.js (right click, and select "Save As").

Step 2: Then to fetch/ display a page from your domain using Ajax, just call the below function:

ajaxpagefetcher.load("container_id", "pageurl_or_path", bustcacheBool, [array_of_js_files], [array_of_css_files])

The parameters in that order are:

  • The ID attribute of the DIV or some other container on the page that the Ajax page should load inside
  • The URL or relative path from the current page to the external page to load. For the URL, it must be from the same domain as the current!
  • A Boolean value (true or false) specifying whether the script should prevent the browser from caching the page after it's been fetched for the 1st time. Set to true if the external page is dynamic and likely changes within the same browser session.
  •  An optional array that contains the paths to a list of external .js files you wish to load at the same time, each separated by a comma if multiple. For example: ["functions.js", "message.js"].
  •  An optional array that contains the paths to a list of external .css files you wish to load at the same time, each separated by a comma if multiple. For example: ["pagestyle.js"]

Ok, with everything said and done, here are a couple of examples:

<body>
<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-->
<a href="javascript:ajaxpagefetcher.load('bob', 'sub/content2.htm', false, '', ['page.css'])">Load Content 2</a>
</script>

</body>


JavaScript Tools:
Site Info

CopyRight 1998-2012 JavaScript Kit. NO PART may be reproduced without author's permission.