AJAX loading external page into div, no javascript

Collapse
X
Collapse
 
  • Page of 2
  • Time
  • Show
Clear All
new posts
Previous 1 2 template Next
  • FreshRob
    New Member
    • Jul 2009
    • 12
    #1

    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)
    Code:
    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
    Tags: None
    • gits
      Recognized Expert Moderator Expert
      • May 2007
      • 5390
      #2
      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

        Comment

        • sukil
          New Member
          • Aug 2009
          • 3
          #3
          Did you get a solution? I have the same issue but cant find the solution!

            Comment

            • FreshRob
              New Member
              • Jul 2009
              • 12
              #4
              No am still looking, and trying to find ways around it, though nothing has come up

                Comment

                • gits
                  Recognized Expert Moderator Expert
                  • May 2007
                  • 5390
                  #5
                  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 ...

                    Comment

                    • FreshRob
                      New Member
                      • Jul 2009
                      • 12
                      #6
                      I have an index.php containing:
                      Code:
                      <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

                        Comment

                        • gits
                          Recognized Expert Moderator Expert
                          • May 2007
                          • 5390
                          #7
                          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

                            Comment

                            • FreshRob
                              New Member
                              • Jul 2009
                              • 12
                              #8
                              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

                                Comment

                                • gits
                                  Recognized Expert Moderator Expert
                                  • May 2007
                                  • 5390
                                  #9
                                  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:

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

                                  kind regards

                                    Comment

                                    • FreshRob
                                      New Member
                                      • Jul 2009
                                      • 12
                                      #10
                                      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

                                        Comment

                                        • gits
                                          Recognized Expert Moderator Expert
                                          • May 2007
                                          • 5390
                                          #11
                                          a new Lightbox init should work ... do you get any errors in FF's firebug?

                                            Comment

                                            • FreshRob
                                              New Member
                                              • Jul 2009
                                              • 12
                                              #12
                                              Firebug says that lb0n is not defined

                                                Comment

                                                • gits
                                                  Recognized Expert Moderator Expert
                                                  • May 2007
                                                  • 5390
                                                  #13
                                                  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?

                                                    Comment

                                                    • FreshRob
                                                      New Member
                                                      • Jul 2009
                                                      • 12
                                                      #14
                                                      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.

                                                      403 Forbidden
                                                      http://freshrob.com/index.zip

                                                        Comment

                                                        • gits
                                                          Recognized Expert Moderator Expert
                                                          • May 2007
                                                          • 5390
                                                          #15
                                                          checked the code and a simple hack that works with the example is as follows:

                                                          Code:
                                                          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

                                                            Comment

                                                            Previous 1 2 template Next
                                                            Working...