By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,561 Members | 3,010 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,561 IT Pros & Developers. It's quick & easy.

AJAX loading external page into div, no javascript

P: 12
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
  1. var loadedobjects=""
  2. function LoadPage(url, containerid){
  3. var page_request = false
  4. if (window.XMLHttpRequest) // if Mozilla, Safari etc
  5. page_request = new XMLHttpRequest()
  6. else if (window.ActiveXObject){ // if IE
  7. try {
  8. page_request = new ActiveXObject("Msxml2.XMLHTTP")
  9. catch (e){
  10. try{
  11. page_request = new ActiveXObject("Microsoft.XMLHTTP")
  12. }
  13. catch (e){}
  14. }
  15. }
  16. else
  17. return false
  18. page_request.onreadystatechange=function(){
  19. loadpage(page_request, containerid)
  20. }
  21. page_request.open('GET', url, true)
  22. page_request.send(null)
  23. }
  24.  
  25. function loadpage(page_request, containerid){
  26. if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
  27. document.getElementById(containerid).innerHTML=page_request.responseText
  28. }
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
Share this Question
Share on Google+
29 Replies


gits
Expert Mod 5K+
P: 5,333
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

P: 3
Did you get a solution? I have the same issue but cant find the solution!
Aug 3 '09 #3

P: 12
No am still looking, and trying to find ways around it, though nothing has come up
Aug 3 '09 #4

gits
Expert Mod 5K+
P: 5,333
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

P: 12
I have an index.php containing:
Expand|Select|Wrap|Line Numbers
  1. <title>index page</title>
  2. <!-- CSS !-->
  3. <link rel="stylesheet" href="css/lightbox.css" media="screen,projection" type="text/css" />
  4. <link rel="stylesheet" href="css/website.css" media="screen,projection" type="text/css" />
  5.  
  6. <!-- JavaScript !-->
  7. <script type="text/javascript" src="scripts/java.js"></script>
  8. <script type="text/javascript" src="scripts/prototype.js"></script>
  9. <script type="text/javascript" src="scripts/lightbox.js"></script>
  10. </head>
  11. <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
Expert Mod 5K+
P: 5,333
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

P: 12
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
Expert Mod 5K+
P: 5,333
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
  1. new Lightbox;
  2.  
after appending the content. in case that works we could try to improve that a bit :)

kind regards
Aug 8 '09 #9

P: 12
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
Expert Mod 5K+
P: 5,333
a new Lightbox init should work ... do you get any errors in FF's firebug?
Aug 10 '09 #11

P: 12
Firebug says that lb0n is not defined
Aug 10 '09 #12

gits
Expert Mod 5K+
P: 5,333
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

P: 12
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
Expert Mod 5K+
P: 5,333
checked the code and a simple hack that works with the example is as follows:

Expand|Select|Wrap|Line Numbers
  1. function loadpage(page_request, containerid) {
  2.     if (page_request.readyState == 4 
  3.             && (page_request.status == 200 
  4.             || window.location.href.indexOf("http") == -1)) {
  5.         var d = document.getElementById(containerid);
  6.         d.innerHTML = page_request.responseText;
  7.  
  8.         new lightbox(d.getElementsByTagName('A')[0]);
  9.     }
  10. }
  11.  
so just a reinit of a lightbox with the node in question fixes the problem ...

kind regards
Aug 24 '09 #15

P: 12
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
Expert Mod 5K+
P: 5,333
no problem ... in case you have more questions just post back to the forum.

kind regards
Aug 24 '09 #17

P: 3
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
  1. var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
  2. var loadedobjects=""
  3. var rootdomain="http://"+window.location.hostname
  4. var bustcacheparameter=""
  5.  
  6. function ajaxpage(url, containerid){
  7. var page_request = false
  8. if (window.XMLHttpRequest) // if Mozilla, Safari etc
  9.     page_request = new XMLHttpRequest()
  10. else if (window.ActiveXObject){ // if IE
  11. try {
  12.     page_request = new ActiveXObject("Msxml2.XMLHTTP")
  13. catch (e){
  14. try{
  15.     page_request = new ActiveXObject("Microsoft.XMLHTTP")
  16. }
  17. catch (e){}
  18. }
  19. }
  20. else
  21. return false
  22. page_request.onreadystatechange=function(){
  23.     loadpage(page_request, containerid)
  24. }
  25. if (bustcachevar) //if bust caching of external page
  26.     bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
  27.     page_request.open('GET', url+bustcacheparameter, true)
  28.     page_request.send(null)
  29. }
  30.  
  31. function loadpage(page_request, containerid){ 
  32.     if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
  33.         document.getElementById(containerid).innerHTML=page_request.responseText
  34. }
  35.  
  36. function loadobjs(){  // Load css,js for imported page
  37. if (!document.getElementById)
  38.     return
  39. for (i=0; i<arguments.length; i++){
  40.     var file=arguments[i]
  41.     var fileref=""
  42.     if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
  43.     if (file.indexOf(".js")!=-1){ //If object is a js file
  44.     fileref=document.createElement('script')
  45.     fileref.setAttribute("type","text/javascript");
  46.     fileref.setAttribute("src", file);
  47. }
  48. else if (file.indexOf(".css")!=-1){ //If object is a css file
  49.     fileref=document.createElement("link")
  50.     fileref.setAttribute("rel", "stylesheet");
  51.     fileref.setAttribute("type", "text/css");
  52.     fileref.setAttribute("href", file);
  53. }
  54. }
  55. if (fileref!=""){
  56.     document.getElementsByTagName("head").item(0).appendChild(fileref)
  57.     loadedobjects+=file+" " //Remember this object as being already added to page
  58. }
  59. }
  60. }
  61. window.onload = function init(){
  62.        ajaxpage("main.html","mainDiv");
  63.        ajaxpage("left.html","leftDiv");
  64. }
  65.  
Main - Index html head tag:
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>::----- ::</title>
  6. <script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
  7. <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
  1. <a href="javascript:ajaxpage('jq.html','main'); 
  2. loadobjs('tickbox-code/jquery-1.1.3.1.pack.js','tickbox-code/thickbox.js','tickbox-code/thickbox.css');">test
  3. //Note that function loadobjs() can invoke any number of CSS and external JavaScript files
  4.  
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
Expert Mod 5K+
P: 5,333
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

P: 3
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
File Type: zip 01.zip (334.4 KB, 550 views)
Sep 24 '09 #20

gits
Expert Mod 5K+
P: 5,333
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

P: 3
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

P: 2
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
Expert Mod 5K+
P: 5,333
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

P: 2
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
Expert Mod 5K+
P: 5,333
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

P: 2
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
  1. <script type="text/javascript"><!--
  2. adsize="468x60";
  3. adsection="xxxx";
  4. //--></script>
  5. <script type="text/javascript" src="http://blabla.com/ad.js"></script>
  6.  
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
Expert Mod 5K+
P: 5,333
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

P: 2
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
  1. 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)}
  2. if(smowtion_i++<5){smowtion_ad_size=smowtion_size.split('x');if(typeof(smowtion_iframe) == "undefined"){
  3. 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>');}}
  4.  
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
Expert Mod 5K+
P: 5,333
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

Post your reply

Sign in to post your reply or Sign up for a free account.