AJAX loading external page into div, no javascript

I have been trying to fix this issue the whole of today and have gotten no where.
I am developing a new website, and wanted it to display a webpage in lightbox and have an external page added to the main page, both worked successfully apart, but it wasn't until I combined them that I have had an issue.

My aim was to have ajax add the external page into a div and then load lightbox from that div, though that is where the problem lies as I can not run any form of javascript from it

--My AJAX Code (from dynamicdrive)

Expand|Select|Wrap|Line Numbers

 var loadedobjects=""

function LoadPage(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)

}

page_request.open('GET', url, 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

}

I have tried eval, and many other methods but with no luck, but I am new to ajax / javascript in general so knowing me have probably done stupidly wrong, or missed something very easy which will fix it

Jul 26 '09 #1

Subscribe Post Reply

24349

gits

5,390

Expert Mod 4TB

so your responseText will contain javascript-code? this code has to be evaled explicitly. you may separate it from the page and include script-tags dynamically or you need to extract the javascript-code from the response and eval it.

kind regards

Aug 1 '09 #2

sukil

Did you get a solution? I have the same issue but cant find the solution!

Aug 3 '09 #3

FreshRob

No am still looking, and trying to find ways around it, though nothing has come up

Aug 3 '09 #4

gits

5,390

Expert Mod 4TB

did you try to load the script seperately or have it already loaded, so that you just need to call it? you just have to ensure that the script is evaled ... because loading scripts with an XMLHttpRequest will not do that ...

Aug 4 '09 #5

FreshRob

I have an index.php containing:

Expand|Select|Wrap|Line Numbers

 <title>index page</title>

<!-- CSS !-->

<link rel="stylesheet" href="css/lightbox.css" media="screen,projection" type="text/css" />

<link rel="stylesheet" href="css/website.css" media="screen,projection" type="text/css" />
 
<!-- JavaScript !-->

<script type="text/javascript" src="scripts/java.js"></script>

<script type="text/javascript" src="scripts/prototype.js"></script>

<script type="text/javascript" src="scripts/lightbox.js"></script>

</head>

<body  onLoad="LoadPage('houses.php', 'hlist');">

What I am trying to allow the new page being loaded by javascript to use the javascript contained in 'lightbox.js' and 'prototype.js'

I hope this better explains my issue, and thank you for your help so far

Aug 6 '09 #6

gits

5,390

Expert Mod 4TB

so you load a page into an existing one and want to call existing and already evaled javascript methods on the newly loaded content? ... that is quite easy done from the success-callback of the ajax-request. basically that is your loadpage-function ... or do i miss soemthing? in that function, after setting the innerHTML you may call all existing functions on that content.

are you getting any errors?

kind regards

Aug 7 '09 #7

FreshRob

Hello,

So far none of my code is evaled.
I have tried dynamically adding the javascript files, prototype and lightbox but with no luck.

Hopefully this will help:

index page loads java.js, prototype.js and lightbox.js

java.js puts houses.php into the div hlist on the index page

One other piece of information is that the javascript for lightbox is loaded using a class, as lightbox.js creates a new class on the index page.

Hope this clears things up

Aug 7 '09 #8

gits

5,390

Expert Mod 4TB

so in your index.php the scripts are present and therefor evaled already on pageload. that was what i meant. the problem seems to be that lightbox.js initializes on pageload so that nodes that are appended after pageload are not observed? it seems that calling the constructor again could fix the problem ... so try to call:

Expand|Select|Wrap|Line Numbers

new Lightbox;

after appending the content. in case that works we could try to improve that a bit :)

kind regards

Aug 8 '09 #9

FreshRob

Still No luck, I think I may have to try a different method for getting the results that I want. Thank you for all your help

Aug 9 '09 #10

gits

5,390

Expert Mod 4TB

a new Lightbox init should work ... do you get any errors in FF's firebug?

Aug 10 '09 #11

FreshRob

Firebug says that lb0n is not defined

Aug 10 '09 #12

gits

5,390

Expert Mod 4TB

when you try the reinit? or when you click something? ... does it come from the lightbox.js ... do you have an example page to follow it? which lightbox version do you use?

Aug 12 '09 #13

FreshRob

Hi,

sorry for the late reply, work mounted up for the past week.

Here is a link to a zip file containing the code I use.

http://freshrob.com/index.zip

Aug 20 '09 #14

gits

5,390

Expert Mod 4TB

checked the code and a simple hack that works with the example is as follows:

Expand|Select|Wrap|Line Numbers

 function loadpage(page_request, containerid) {

    if (page_request.readyState == 4 

            && (page_request.status == 200 

            || window.location.href.indexOf("http") == -1)) {

        var d = document.getElementById(containerid);

        d.innerHTML = page_request.responseText;
 
        new lightbox(d.getElementsByTagName('A')[0]);

    }

}

so just a reinit of a lightbox with the node in question fixes the problem ...

kind regards

Aug 24 '09 #15

FreshRob

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.

Aug 24 '09 #16

gits

5,390

Expert Mod 4TB

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

kind regards

Aug 24 '09 #17

DiverHN

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"

Expand|Select|Wrap|Line Numbers

 
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:

Expand|Select|Wrap|Line Numbers

 
<!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 ) :

Expand|Select|Wrap|Line Numbers

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

Sep 23 '09 #18

gits

5,390

Expert Mod 4TB

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

Sep 24 '09 #19

DiverHN

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, 595 views)

Sep 24 '09 #20

gits

5,390

Expert Mod 4TB

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

Sep 25 '09 #21

DiverHN

Sorry again.
1.If you run "gallery.php" 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!!!

Sep 25 '09 #22

javahunter

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.

Oct 27 '09 #23

gits

5,390

Expert Mod 4TB

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

Oct 27 '09 #24

javahunter

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

Oct 27 '09 #25

gits

5,390

Expert Mod 4TB

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

Oct 27 '09 #26

larshemel

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.

Expand|Select|Wrap|Line Numbers

 
<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

Mar 31 '10 #27

gits

5,390

Expert Mod 4TB

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

Mar 31 '10 #28

larshemel

Hello Gits,

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

Expand|Select|Wrap|Line Numbers

 
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

Mar 31 '10 #29

gits

5,390

Expert Mod 4TB

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

Apr 7 '10 #30

Similar topics

JSON without AJAX

by: VK | last post by:

Mission statement: A mechanics to get text stream into browser from any Web location without reloading the current page. 1) This mechanics has to support *at the very least* IE 5.5 and higher...

Javascript

Firefox - replacing the whole page by the new one in Ajax response

by: evgenyg | last post by:

Hello ! We have the following situation - when Ajax request is sent what's being returned by the server is usually an XML (which is used for DOM updates) but sometimes it's HTML which is a whole...

Javascript

Ajallerix : AJAX, simple, fast Web image gallery demo ; at Novell

by: www.web20developers.com | last post by:

http://www.web20developers.com http://www.web20developers.com/index.php?option=com_content&task=view... Ajallerix : AJAX, simple, fast Web image gallery demo ; at Novell AJAX -...

Javascript

Request an HTML page via AJAX

by: J | last post by:

Hi, Ajax question: Can I retrieve an HTML page and use the DOM to grab stuff from the requested page in a similar fashion to an XML page requested in the same manner? Details: I'm requesting...

Javascript

XMLHttpRequest and AJAX for PHP programmers

by: geevaa | last post by:

http://www.phpbuilder.com/columns/kassemi20050606.php3 XMLHttpRequest and AJAX for PHP programmers James Kassemi Introduction: Although the concept isn't entirely new, XMLHttpRequest...

PHP

Using AJAX, how can the page get state infomation from backgroud PHP script?

by: Marvin Zhang | last post by:

Hi, I'm not familiar with web programming, but I have a problem here. I have a page. When a user click one button on it, I will use AJAX to request a PHP script which will do a bunch of tasks,...

PHP

Deep linking with AJAX made possible with the use of DHTML & PHP

by: Tarik Monem | last post by:

I have been working on an all AJAX/DOM web site which is set to go live today and I thought I'd share my discoveries with all of you whom have helped me when I have encountered different issues along...

Javascript

I cannnot dynamically load .aspx page w/ AJAX

by: daJunkCollector | last post by:

I am using AJAX to dynamically load content into a <div> layer. As it stands, I am loading .html's into the <div> layer and it works awesome. The problem is that when I try to replace the .html...

Javascript

Ajax and IE crash

by: =?Utf-8?B?R2VyaGFyZA==?= | last post by:

I have run into a situation that if a page/tab that uses the Ajax toolkit (using .net version 3.5) is closed before the Ajax enable controls complete loading, then IE locks up. Does it in both IE7...

ASP.NET

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA