• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 243
  • Last Modified:

I need to find a way to use Javascript on page that are loaded using Ajax

One old website is using a very old script .
The site will be rebuild soon but for now I need a temporary solution.

Ajax load the content of each page in one page.
You can check the script:

I need to add a javascript (jquery) slideshow into a specifi page.
For now I can use javascript on the main index.htm for widgets that appear on all pages like top bar.
But when I try to add javascript for a specific page it doesn't work.

What I have tried so far is to put all javascript on the index.htm
and put the div = id and content on the specific page with no luck.

For now the only way I can add an image gallery do is to use a Flash gallery....

  • 3
1 Solution
Rainer JeschorCommented:
questions from my side:
Which slideshow plugin do you plan to use?
Do I understand right, that you want to load the external web content into a container of your page and then inject the slideshow into the transfered content?

It would at least help if you can post the link of the page you want to grab - because we will need the structure to get the correct selector.
Thanks and HTH
lenamtlAuthor Commented:

Please check the link, you can download the Ajax script if you want.

It's not loading external content like a page from external domain.
It's loading pages from the same domain, check the script you will understand the way it's working.

As the index.htm page load other htm pages using Ajax this block the use of javascript on the loaded page.
As I said I can use  javascript on the index.htm but this will be displayed on every pages.

The slideshow could be any basic slideshow that have automatic start, delay an nav button.
Nothing too new because it' using old doctype.

In fact I'd like to know how I can load any kind of basic javascript widget on a specific page using this Ajax container.

I forgot to mention there is a way to load additional js script but the
js file this will be loaded and play only once and disappear after that (until you clear the cache). So this is why I'm not using their method.


The main ajax
<script type="text/javascript">

* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
catch (e){
page_request = new ActiveXObject("Microsoft.XMLHTTP")
catch (e){}
return false
loadpage(page_request, containerid)
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))

function loadobjs(){
if (!document.getElementById)
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref.setAttribute("src", file);
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
if (fileref!=""){
loadedobjects+=file+" " //Remember this object as being already added to page


Open in new window

Load page and external CSS /JavaScript link:

If you wish to style your external pages using CSS or JavaScript, you should NOT insert them directly inside the external page. Rather, save them as external files (.css and .js), and let the script apply them dynamically when the external page is loaded using function "loadobjs()". Here's an example:

The above link not only loads "test.htm" into a DIV, but also applies "external.css" and "feature.js" to the page at the same time, which presumably should contain code that targets specifically the HTML inside "test.htm".

<a href="javascript:ajaxpage('test.htm', 'contentarea'); loadobjs('external.css', 'feature.js')">test</a>
<div id="contentarea"></div>

Open in new window

Syntax of loadobjs()
loadobjs('external.css') //load one CSS file
loadobjs('external.css', 'external2.css', 'feature.js') //load 2 CSS files & 1 JS file
loadobjs('feature.js', 'feature2.js', 'feature3.js') //load 3 JS files

Open in new window

Also, this function will remember when a CSS or JS file has already been loaded and applied to the page, and won't load the same file again even if the link that invokes it is clicked on multiple times.
lenamtlAuthor Commented:
It is too complicated, I decided to remove this ajaxcontent script and make each page stand alone.
greetings lenamtl, , I looked at some of your HTML and javascript, and you say your problem is - "But when I try to add javascript for a specific page it doesn't work.", , Your code seems to work for that ajax stuff load an external page. You do have the external accessory code load as-   loadobjs('external.js');

However, this javascript method for load page has this -

I can not see how you can expect that to even come close to working, on most pages that use "local" references for images and or files (.js  .css).

The only method That I have ever seen to do a half decent job, is to send the requested page to your PHP by ajax, and then in PHP fetch the page content as text, and then do very complex parsing of that HTML text to resolve links that are local  as <img src="images/icon.png"  /> and remove bad DOM elements like <html> and <body> and <head>, then after it been parsed for a <div> html injection, send the text back  to page a ajax return, to replace the <div> html. Of course in PHP you can add any html elements that you like, and then call javascript  functions IN THE AJAX RETURN, to activate any widgets using ID or set up any gallery added.

All in all a complex and time consumming development process.

What I would do is to NOT add to the imported page code at all, , for your gallery, I would add a <div> on top of the <div id="rightcolumn">, and place your gallery in that <div> above it, , that way you separate the functioning of the gallery from the functioning of the page display.
lenamtlAuthor Commented:
It is too complicated, I decided to remove this ajaxcontent script and make each page stand alone.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

7 new features that'll make your work life better

It’s our mission to create a product that solves the huge challenges you face at work every day. In case you missed it, here are 7 delightful things we've added recently to monday to make it even more awesome.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now