AJAX loading external page into div, no javascript

**FreshRob** · Aug 24 '09, 05:15 PM

I have a long way to go in understanding ajax, and it's qwerks, but you have given me a good start :-)

Thank you for all your help.

**gits** · Aug 24 '09, 07:32 PM

no problem ... in case you have more questions just post back to the forum.

kind regards

**DiverHN** · Sep 23 '09, 10:29 PM

Allmos the same problem

Sorry, but I need help. Googling several days with no success.I want similar thing to do as FreshRob. Load external html pages which have js and css dependencies.
Ajax js for main page are in external file
''js/ajax.js"

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(){  // Load css,js for imported page
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
}
}
}
window.onload = function init(){
       ajaxpage("main.html","mainDiv");
       ajaxpage("left.html","leftDiv");
}

Main - Index html head tag:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>::----- ::</title>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script src="js/ajax.js" type="text/javascript"></script>

Action that doesn't work(supposed to load external fancybox or lightbox or tickbox image gallery page in to div with all dependence files ) :

Code:

<a href="javascript:ajaxpage('jq.html','main'); 
loadobjs('tickbox-code/jquery-1.1.3.1.pack.js','tickbox-code/thickbox.js','tickbox-code/thickbox.css');">test
//Note that function loadobjs() can invoke any number of CSS and external JavaScript files

So, for now I can load external (img gallery) pages in 'main' div but I'm hit a wall when click on the thumbnail, it open new window with image instead as it supposed to do.
Some advice please.
Thank you.

PS"Sorry for my bad English"

Hey :), I want to do exactly as what happen when hit Expand - code button in this forum!!!

**gits** · Sep 24 '09, 01:49 PM

i think i don't get it already ... the shown code doesn't help me to understand what your problem is ... please try to rephrase the question in a way so that it will become clear what you have and what you want to do step by step. may be i'm not quite fit today and i miss something ... but to help me to understand it ... i think it would be good to have a more detailed explaination of the problem ...

kind regards

**DiverHN** · Sep 24 '09, 02:31 PM

Gits, Thank you for quick replay.
Yes, I made confusion in previous post.What really I want to do is to load the lightbox gallery in the div element of the main page.
Demo project is in the attachment.

In project you'll find this:
1.index.html (Created by me)
2.js dir with ajax.js (Created by me)
and all rest comes with lightbox gallery tutorial.

Thank you

Attached Files

01.zip (334.4 KB, 640 views)

**gits** · Sep 25 '09, 01:37 PM

what am I supposed to do with that code? ... as far as I could see there is a link on the page ... when it is clicked some images, css and js should be loaded with an XMLHttpRequest ... and now? what is the problem? as I already stated ... the detailed description of an issue is essential to get any support anywhere ... nobody will dig into your code trying to find an issue ... when you try to describe it in words step by step ... it will often lead to a point where you find an answer yourself ... or at least makes it clear where the problem really occurs ...

kind regards

**DiverHN** · Sep 25 '09, 04:03 PM

Sorry again.
1.If you run "gallery.ph p" as standalone page, and click on a thumbnail you'll note some visual effects on the image(s).

2.In the "index.html " page I have one <div> element and one link "gallery".

3.Goal is to load gallery.php into the div when the "Gallery" link is clicked on the index page .

What happens in reality...when gallery.php is loaded into div of the index page, and you click some img thumbnail :( no more effects described in step 1,instead of that it opens a separate window with image.In my humble opinion, something has gone wrong while loading extarnal js files that belongs to gallery.php or something should be re-initialized, I don't no.

I hope I'm clearer this time.

By the way If this is mission impossible Can you refer me to a image gallery which can be easily imported into <div> and to work properly.

Thank you!!!

**javahunter** · Oct 27 '09, 09:42 AM

Please help - AJAX loading external page into div, no javascript

Hi Gits,

Sorry . I know this is an old post. But I believe you can help me.
I have a index page. A div named 'content' is embedded in it.
I am using a gwt ajax application in the index page.
(I believe GWT has nothing to do with my problem. But just mentioned it if that can help me)
The ajax applications calls a server side page and loads the response to the content div.
The response of ajax request is a student detail page which contains lot of javascripts and script files embedded using script tag.
My issue here is the scripts inside the studentdetail page are not working when loading in to the div.
The scripts are working fine when the stdentpage is loaded as standalone.
There is script calling on the body onload function of studentdetail page.
That also not working when loading into the div.
I am in situation i cant change much on the student details page.
Please help me.. Thanks in advance.

**gits** · Oct 27 '09, 09:58 AM

loading content with javascript into html-nodes by an AJAX-call is not able to add scripts on the fly without doing anything more. you need to trigger the evaluation of JavaScript explicitly which would mean that you would need to extract it from the loaded content in any way and then eval it.

kind regards

**javahunter** · Oct 27 '09, 10:05 AM

Thank you for the quick reply.
I understand I need to explicitly call the javascripts instead of calling in onload.
There are other functions which are called when clicking on button inside the content loaded in div.
That scripts are also embedded in the html in div.
It seems they are also not working. Can you please tell my why they dont work?

Thanks

**gits** · Oct 27 '09, 10:17 AM

the thing you mentioned that is just one part - in case you have some javascript-code that runs onload of the page and loops over nodes etc. then you need to call that again - like in the main-thread's lightbox-case.

your question is the question to my answer before ... when you load content and this content contains javascript-code ... this javascript-code needs to be evaled explicitly ... because just adding content to a div doesn't initialize that evaluation. without that ... the loaded javascript-code is not parsed in any way and thus not available for use ...

kind regards

**larshemel** · Mar 31 '10, 11:53 AM

grabbing content of external javascript file and insert it into div

Hello Gits and others,

I have a similar problem and wonder whether we are smart enough to get it fixed.

I have a part of javascript code which I would like to dynamically load with ajax in one of my pages. The code is typical something often used by context advertising companies.

Code:

<script type="text/javascript"><!--
adsize="468x60";
adsection="xxxx";
//--></script>
<script type="text/javascript" src="http://blabla.com/ad.js"></script>

So javascript variables inside a script which tell you what kind of ad and also an external script which will generate html code that should be listed in a particularly div on my ajax page.

The problem is. I can eval the adsize and adsection variable. I can also dynamically load the external javascript file ad.js, but once I do that it will open a new window and displays the ad in that new window.

How can I grab the content of this external javascript file and innerHTML it into a div on my ajax page without this new window to appear.

Cheers Lars

**gits** · Mar 31 '10, 05:03 PM

therfor you would need to analyze the code ... i guess there is a window.open() somewhere in it ... or a similar directive that causes a window to be opened ... when you load it via the ajax-call you first have it as a response text ... and then you might replace the spotted section with new code ... then you might eval it and it should run as you need it ... you might do it server- or clientside ... as you prefer ...

kind regards

**larshemel** · Mar 31 '10, 07:52 PM

Hello Gits,

Thanks for the quick answer. I was already investigating the code of the external script and with smowtion_size=" 468x60"; and smowtion_sectio n="844517"; I narrowed the code down to

Code:

if(!smowtion_counter){var smowtion_counter=1;var smowtion_i=0;var smowtion_log='section='+smowtion_section;var smowtion_vurl=escape(location.href);var smowtion_vref=escape(document.referrer);var script=document.createElement('script');script.type='text/javascript';script.src='http://sw-sess-lb-1763240709.us-east-1.elb.amazonaws.com/session.php?'+smowtion_log;document.getElementsByTagName('head')[0].appendChild(script)}
if(smowtion_i++<5){smowtion_ad_size=smowtion_size.split('x');if(typeof(smowtion_iframe) == "undefined"){
document.write('<SCR' + 'IPT TYPE="text/javascript" SRC="http://ad.smowtion.com/st?ad_type=ad&ad_size='+smowtion_size+'&section='+smowtion_section+'"></SCR' + 'IPT>');}}

I found out that the problem has to be in the last external script http://ad.smowtion.com/st?ad_type=ad...section=844517.

I can't believe that nobody else has had this problem. It also occurs if you want to display Google ads (adsense) in one of your ajax pages. And it is undoable to filter all external javascript files for codes such as window.open or location.href.

There is one thing I don't quite understand. How can it be that the content of this external javascript file loads in a blank window if I run it through ajax and that it runs perfectly correct when I use it on normal pages?

Cheers Lars

**gits** · Apr 7 '10, 09:17 AM

basicly there is a difference between lazy-loading scripts and 'traditionally' including them in a page ... 'ajax-loaded' scripts must be evaled into a ready-made window context and a fully rendered document ... in case the script relies on things that needs to be written before a page is ready then it might behave unexpected ... as you see there are document.write( ) directives etc. ... which basicly isn't suggested to be used in fully rendered pages ... because that will destroy the DOM in most cases ... when the scripts are not intended to be lazy-loaded then you cannot expect that they work as intended .... might be that there are kind of 'ajax-ready' scripts provided by the providers of that scripts ... that should be used in such cases ... the only scripts that you could reliable load in such a way are those that you have written by yourself and/or are ready for such a use ...

kind regards

AJAX loading external page into div, no javascript

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment