views:

125

answers:

1

I am trying to throw together a website using Ajax for the first time, to finally get with the times and figure it out. So far it is nothing but HTML pages and a bit of JS. Using some basic AJAX script I found online, I have the main index.htm which has a title, navigation, and content divs. The Ajax calls grab other content includes (which are just files with text content for the most part) to throw into the content div. For the most part it works, except for when I am trying to add the Google Directions gadget. When I add the script code it gives me to a file and call that file, there is no noticeable output.

Any suggestions on what I am doing wrong or what I'm missing?

+1  A: 

If I am understanding you correctly this is an unnecessary use of AJAX. From what it seems like you want to do is load JavaScript via a JavaScript call. This can be accomplished using either method described here. Example:

<script type="text/javascript">

function dhtmlLoadScript(url)
{
   var e = document.createElement("script");
   e.src = url;
   e.type="text/javascript";
   document.getElementsByTagName("head")[0].appendChild(e);
}

onload = function()
{
   dhtmlLoadScript("dhtml_way.js");
}

</script>

If the above link does not help or I am misunderstanding your question please provide further clarification or some sort of code example.

Following up on your comment

Here is a work around for your gadget, the below code would be on your main page (the one that is initially loaded). Here is my test HTML page:

<html>
<head>
  <script type="text/javascript">
  var gadget;

  function getGadgetAndMove(node)
  {
    gadget = document.getElementsByTagName("table")[0];
    node.appendChild(gadget); 
    gadget.style.visibility = "visible";
    gadget.style.display = "inline-block";
  }
  </script>
  <style>
  .ig_reset, .ig_tbl_line { visibility:hidden;}
  </style>
</head>

<body>
  <div onclick="getGadgetAndMove(this);">Test</div>
</body>
  <script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/114281111391296844949/driving-directions.xml&amp;amp;up_fromLocation=&amp;amp;up_myLocations=1600%20Amphitheatre%20Pkway%2C%20Mountain%20View%2C%20CA&amp;amp;synd=open&amp;amp;w=320&amp;amp;h=55&amp;amp;title=Directions+by+Google+Maps&amp;amp;brand=light&amp;amp;lang=en&amp;amp;country=US&amp;amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;amp;output=js"&gt;&lt;/script&gt;
</html>

If you need further explanation please let me know.

Mark
While that does help (I've never been able to figure out how to add js src links dynamically), I'm not quite sure if that helps my particular problem. I'm using the AJAX to load separate pages (for certain design reasons) but one of the pages has the google directions gadget. From what I've read AJAX can't load cross site scripts, and that's where I think the problem is coming in. Does this solution work around that?
Greg
Answer updated to reflect your comment, hope this helps.
Mark