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

Posted on 2015-01-26
Last Modified: 2015-02-01
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....

Question by:lenamtl
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
LVL 44

Expert Comment

by:Rainer Jeschor
ID: 40572280
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
LVL 25

Author Comment

ID: 40572726

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 (
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at 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()'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.
LVL 25

Accepted Solution

lenamtl earned 0 total points
ID: 40573440
It is too complicated, I decided to remove this ajaxcontent script and make each page stand alone.
LVL 34

Expert Comment

ID: 40573527
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.
LVL 25

Author Closing Comment

ID: 40582256
It is too complicated, I decided to remove this ajaxcontent script and make each page stand alone.

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Text too large in Chrome 17 65
TypeError jquery issues with site - CSS conflicts 3 28
Session on Html 8 42
Ajax on ASP 2 42
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question