Load javascript files with ajax

Question

Just a simple question. (probably really basic I quess)

Using XmlHttp I am able to load a page, but not sure how to iclude the js files..

How can I alter the code in the images below, to be able to include the two java script files into the page loaded with ajax? I'm by far not a java script programmer, so really needs some help.

Thank you.

clientside.php:

<html>
<head>
<title></title>
  <script src="XmlHttp.js"></script>
  <script>
    var urlServer ="serverside.php";
    var xmlObj = null;

    function callServer(urlServer){
      xmlObj= XmlHttp.create();
          if(xmlObj) {
            xmlObj.onreadystatechange = responseFromServer;
            xmlObj.open("GET", urlServer, true);
            xmlObj.send();
          }
    }       

    function responseFromServer() {
      if (xmlObj.readyState == 4) {
        if (xmlObj.status == 200) {
          document.getElementById("main").innerHTML = xmlObj.responseXML.getElementsByTagName("mybody")[0].firstChild.nodeValue;
          eval(xmlObj.responseXML.getElementsByTagName("myscript")[0].firstChild.nodeValue);                
        }
      }
    }   
  </script>
</head>
<body>
  <div id="main"></div>
  <input type="button" value="Begin test" onClick="callServer(urlServer)">
</body>
</html>



serverside.php :

<?php
  //How do I load these two javascript files together with the <body> below.
  //Obviously the method below does not work..
  $script="
   <script type='text/javascript' src='SlimBox/js/mootools.js'></script>
   <script type='text/javascript' src='SlimBox/js/slimbox.js'></script>
  ";

  $body="
    <body>
    <a href='img/facebook-icon.png' rel='lightbox[roadtrip]' cap='test'><img alt=''border='0' src='img/facebook-icon.png' /></a>
    </body>
  ";

  //Now build the xml page:
  $xml = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>";
  $xml .= "<mypage>";
  $xml .= "<myscript>".htmlentities($script)."</myscript>";
  $xml .= "<mybody>".htmlentities($body)."</mybody>";
  $xml .= "</mypage>";
  header('Content-type: text/xml');
  echo $xml;
?>

for some reason not working from the calling page.. unless I'm doing something wrong ofcourse.. — user1149557
– user1149557, Commented Jan 15, 2012 at 21:36

Emmanuel N · Accepted Answer · 2012-01-15 21:37:09Z

1

most efficient way will be to use ajax to load script source(uri) and use javavcript to update script source

Something like:

 document.getElementById('external_script').src = 'http://cross.domain.com/other.js';

Fore more on how to load script dynamically check

answered Jan 15, 2012 at 21:37

Emmanuel N

7,4592 gold badges30 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user1149557 Over a year ago

If I use your suggestion, do I add this line above "document.getElementById("main").innerHTML", and then create a <div> called 'external_script', or am I misunderstanding here. Couldn't get it to work.. :(

Emmanuel N Over a year ago

I was thinking of creting a script with empty source in your main page and then modify the src of that script

user1149557 Over a year ago

sorry for stupid questions here... a empty script like this "<script src=""></script>"?? but what does the name 'extrnal_script' refer to?

Emmanuel N Over a year ago

referes to the id of that script, so that it can be accessed later in code. "<script src="" id="extrnal_script"></script>"

user1149557 Over a year ago

Thank you. I did as you described, but I only got it to work with a js file I created myself and using "<a href='img/facebook-icon.png' onclick='call_to_func()'" instead of "rel=". But when trying to use the 'slimbox.js' and 'mootools.js' files mentioned above, with "rel=" it does not work. Why is this different?

Collectives™ on Stack Overflow

Load javascript files with ajax

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related