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

Hi,
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
Rainer

Hi,

Please check the link, you can download the Ajax script if you want.
http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

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.

Important:
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.



CODE

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){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
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)
page_request.send(null)
}

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

function loadobjs(){
if (!document.getElementById)
return
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=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

</script>

Select allOpen 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>

Select allOpen 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

Select allOpen 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.

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 -
    document.getElementById(containerid).innerHTML=page_request.responseText;

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.

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