Solved

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

Posted on 2015-01-26
5
201 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Hi,
It is too complicated, I decided to remove this ajaxcontent script and make each page stand alone.
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
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.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

772 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now