Connecting Tech Pros Worldwide Help | Site Map
bytes > topic > javascript > answers

AJAX loading external page into div, no javascript

Newbie
  
Join Date: Jul 2009
Posts: 8
#1: Jul 26 '09
Hello,

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

--What I am mean in screen shots --



--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. } 
  10. catch (e){
  11. try{
  12. page_request = new ActiveXObject("Microsoft.XMLHTTP")
  13. }
  14. catch (e){}
  15. }
  16. }
  17. else
  18. return false
  19. page_request.onreadystatechange=function(){
  20. loadpage(page_request, containerid)
  21. }
  22. page_request.open('GET', url, true)
  23. page_request.send(null)
  24. }
  25.  
  26. function loadpage(page_request, containerid){
  27. if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
  28. document.getElementById(containerid).innerHTML=page_request.responseText
  29. }
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
gits's Avatar
Moderator
  
Join Date: May 2007
Location: Munich, Germany
Posts: 4,126
#2: Aug 1 '09

re: AJAX loading external page into div, no javascript

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
Newbie
  
Join Date: Aug 2009
Posts: 3
#3: Aug 3 '09

re: AJAX loading external page into div, no javascript

Did you get a solution? I have the same issue but cant find the solution!
Newbie
  
Join Date: Jul 2009
Posts: 8
#4: Aug 3 '09

re: AJAX loading external page into div, no javascript

No am still looking, and trying to find ways around it, though nothing has come up
gits's Avatar
Moderator
  
Join Date: May 2007
Location: Munich, Germany
Posts: 4,126
#5: Aug 4 '09

re: AJAX loading external page into div, no javascript

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 ...
Newbie
  
Join Date: Jul 2009
Posts: 8
#6: Aug 6 '09

re: AJAX loading external page into div, no javascript

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
gits's Avatar
Moderator
  
Join Date: May 2007
Location: Munich, Germany
Posts: 4,126
#7: Aug 7 '09

re: AJAX loading external page into div, no javascript

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
Newbie
  
Join Date: Jul 2009
Posts: 8
#8: Aug 7 '09

re: AJAX loading external page into div, no javascript

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
gits's Avatar
Moderator
  
Join Date: May 2007
Location: Munich, Germany
Posts: 4,126
#9: Aug 8 '09

re: AJAX loading external page into div, no javascript

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
Newbie
  
Join Date: Jul 2009
Posts: 8
#10: Aug 9 '09

re: AJAX loading external page into div, no javascript

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
gits's Avatar
Moderator
  
Join Date: May 2007
Location: Munich, Germany
Posts: 4,126
#11: Aug 10 '09

re: AJAX loading external page into div, no javascript

a new Lightbox init should work ... do you get any errors in FF's firebug?
Newbie
  
Join Date: Jul 2009
Posts: 8
#12: Aug 10 '09

re: AJAX loading external page into div, no javascript

Firebug says that lb0n is not defined
gits's Avatar
Moderator
  
Join Date: May 2007
Location: Munich, Germany
Posts: 4,126
#13: Aug 12 '09

re: AJAX loading external page into div, no javascript

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?
Newbie
  
Join Date: Jul 2009
Posts: 8
#14: Aug 20 '09

re: AJAX loading external page into div, no javascript

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
gits's Avatar
Moderator
  
Join Date: May 2007
Location: Munich, Germany
Posts: 4,126
#15: Aug 24 '09

re: AJAX loading external page into div, no javascript

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
Newbie
  
Join Date: Jul 2009
Posts: 8
#16: Aug 24 '09

re: AJAX loading external page into div, no javascript

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's Avatar
Moderator
  
Join Date: May 2007
Location: Munich, Germany
Posts: 4,126
#17: Aug 24 '09

re: AJAX loading external page into div, no javascript

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

kind regards
Newbie
  
Join Date: Sep 2009
Posts: 3
#18: Sep 23 '09

re: AJAX loading external page into div, no javascript

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. } 
  14. catch (e){
  15. try{
  16.     page_request = new ActiveXObject("Microsoft.XMLHTTP")
  17. }
  18. catch (e){}
  19. }
  20. }
  21. else
  22. return false
  23. page_request.onreadystatechange=function(){
  24.     loadpage(page_request, containerid)
  25. }
  26. if (bustcachevar) //if bust caching of external page
  27.     bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
  28.     page_request.open('GET', url+bustcacheparameter, true)
  29.     page_request.send(null)
  30. }
  31.  
  32. function loadpage(page_request, containerid){ 
  33.     if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
  34.         document.getElementById(containerid).innerHTML=page_request.responseText
  35. }
  36.  
  37. function loadobjs(){  // Load css,js for imported page
  38. if (!document.getElementById)
  39.     return
  40. for (i=0; i<arguments.length; i++){
  41.     var file=arguments[i]
  42.     var fileref=""
  43.     if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
  44.     if (file.indexOf(".js")!=-1){ //If object is a js file
  45.     fileref=document.createElement('script')
  46.     fileref.setAttribute("type","text/javascript");
  47.     fileref.setAttribute("src", file);
  48. }
  49. else if (file.indexOf(".css")!=-1){ //If object is a css file
  50.     fileref=document.createElement("link")
  51.     fileref.setAttribute("rel", "stylesheet");
  52.     fileref.setAttribute("type", "text/css");
  53.     fileref.setAttribute("href", file);
  54. }
  55. }
  56. if (fileref!=""){
  57.     document.getElementsByTagName("head").item(0).appendChild(fileref)
  58.     loadedobjects+=file+" " //Remember this object as being already added to page
  59. }
  60. }
  61. }
  62. window.onload = function init(){
  63.        ajaxpage("main.html","mainDiv");
  64.        ajaxpage("left.html","leftDiv");
  65. }
  66.  
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!!!
gits's Avatar
Moderator
  
Join Date: May 2007
Location: Munich, Germany
Posts: 4,126
#19: Sep 24 '09

re: AJAX loading external page into div, no javascript

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
Newbie
  
Join Date: Sep 2009
Posts: 3
#20: Sep 24 '09

re: AJAX loading external page into div, no javascript

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, 21 views)
gits's Avatar
Moderator
  
Join Date: May 2007
Location: Munich, Germany
Posts: 4,126
#21: Sep 25 '09

re: AJAX loading external page into div, no javascript

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
Newbie
  
Join Date: Sep 2009
Posts: 3
#22: Sep 25 '09

re: AJAX loading external page into div, no javascript

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!!!
Newbie
  
Join Date: Oct 2009
Posts: 2
#23: 3 Weeks Ago

re: 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's Avatar
Moderator
  
Join Date: May 2007
Location: Munich, Germany
Posts: 4,126
#24: 3 Weeks Ago

re: AJAX loading external page into div, no javascript

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
Newbie
  
Join Date: Oct 2009
Posts: 2
#25: 3 Weeks Ago

re: AJAX loading external page into div, no javascript

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's Avatar
Moderator
  
Join Date: May 2007
Location: Munich, Germany
Posts: 4,126
#26: 3 Weeks Ago

re: AJAX loading external page into div, no javascript

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
Reply

« previous question | next question »

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,223 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved