Solved

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

Posted on 2015-01-26
5
216 Views
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:
http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

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

Thanks
0
Comment
Question by:lenamtl
  • 3
5 Comments
 
LVL 44

Expert Comment

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

Author Comment

by:lenamtl
ID: 40572726
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>

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.
0
 
LVL 24

Accepted Solution

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

Expert Comment

by:Slick812
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 -
    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.
0
 
LVL 24

Author Closing Comment

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

Featured Post

Efficient way to get backups off site to Azure

This user guide provides instructions on how to deploy and configure both a StoneFly Scale Out NAS Enterprise Cloud Drive virtual machine and Veeam Cloud Connect in the Microsoft Azure Cloud.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

770 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