JavaScript code retrieved via AJAX

Forum Moderators: open

Message Too Old, No Replies

JavaScript code retrieved via AJAX

"does not execute"

DrDoc

6:25 am on Jul 11, 2007 (gmt 0)

I just had to post this ... due to the recent flood of topics one way or another relating to members having problems getting a <script> to execute after dynamically inserted onto a page, whether retrieved via AJAX or otherwise.

Simple workarounds (works in all browsers):

Use

eval()

. It is way underrated.

For code which manipulates DOM -- don't output script code which modifies DOM or manipulates elements. Just modify DOM or manipulate elements directly. Either parse your returned code, or (again)

eval()

it.

[edited by: DrDoc at 7:32 am (utc) on July 11, 2007]

tomda

6:32 am on Jul 11, 2007 (gmt 0)

I guess this is the problem I had
[webmasterworld.com...]

Thanks DrDoc for the tips... but any short example would be appreciated.

Especially for the eval()... underrated since I rarely if not never use it :)

DrDoc

7:32 am on Jul 11, 2007 (gmt 0)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
  <title>JS Test</title> 
  <style type="text/css"> 
    #foo { 
      border: 1px solid #c00; 
      border-left: none; 
      margin-left: 3.2em; 
    } 
  </style> 
  <script type="text/javascript"> 
  function fakeAJAX() { 
    return "alert('Hi');"; 
  } 
  function insertCode() { 
    elem = document.getElementById('foo'); 
    elem.innerHTML = '<script type="text/javascript">' + fakeAJAX() + '<' + '/script>'; 
    elem.innerHTML = '&nbsp;'; 
  } 
  function evalCode() { 
    eval(fakeAJAX()); 
  } 
  function cheat1Code() { 
    elem = document.getElementById('foo'); 
    elem.innerHTML = '&nbsp;<img src="http://www.google.com/intl/en_ALL/images/logo.gif" onload="' + fakeAJAX() + '" style="display: none;">'; 
  } 
  function cheat2Code() { 
    elem = document.getElementById('foo'); 
    elem.innerHTML = '&nbsp;<iframe style="display: none;" src="javascript: document.write(\'<script>' + fakeAJAX().replace(/\'/g,"\\\'") + '<' + '/script>\')"></iframe>'; 
  } 
  </script> 
</head> 
<body> 
  <code>&nbsp;&lt;div&gt;</code><br> 
  <div id="foo">&nbsp;</div> 
  <code>&lt;/div&gt;</code><br> 
  <br> 
  <p>For each of these, if it works, you will get an alert "Hi".</p> 
  <a href="#" onclick="insertCode(); return false;">Insert code into &lt;div&gt; ...</a><br> 
  <a href="#" onclick="evalCode(); return false;"><code>eval()</code> me!</a><br> 
  <a href="#" onclick="cheat1Code(); return false;">Cheat #1</a><br> 
  <a href="#" onclick="cheat2Code(); return false;">Cheat #2</a><br> 
</body> 
</html>

The last two are cheap ... but work :)

d40sithui

8:59 pm on Jul 11, 2007 (gmt 0)

hey doc,
i've been tryin your script some time now. all but the first link will work. the reason they work is b/c fakeAJAX() is not generated by ajax, its a function on the page thats already loaded. correct me if im wrong about this. so really u wolndt even need eval() or anything to get it running. also, contents dynamically retrieved by ajax will "see" these outside js functions and can call them, but it will failed to "see" internal functions that are inside the retrieved ajax content.

DrDoc

9:15 pm on Jul 11, 2007 (gmt 0)

Correct -- all but the first should work.

And, you are obviously correct. This is not a real AJAX request. However, the principle is the same. The

fakeAJAX

function would naturally be replaced by your standard AJAX functionality.

The example above just goes to show that it is certainly possible to get JavaScript returned by an AJAX function as a string can be made to work.

d40sithui

10:08 pm on Jul 11, 2007 (gmt 0)

o how about that..
well is there a way to get it the register functions that are retrieved dynamically by ajax content

tomda

6:50 am on Jul 12, 2007 (gmt 0)

Thanks a lot DrDoc!
Much appreciated!
I will try some of your great examples...

Flagged!

Tomda

mehh

12:31 pm on Jul 14, 2007 (gmt 0)

o how about that..
well is there a way to get it the register functions that are retrieved dynamically by ajax content

That is what

eval()

does. It takes a string and runs it as JS. eg

eval("function foo(){alert('bar')}");
foo();

will work

@DrDoc Those last two are XSS attacks! Cheap. Very very cheap.

ealtink

11:53 am on Jul 25, 2007 (gmt 0)

We are sort of trying to do what you are talking about, but I cannot get it to work.

We are using a banner rotating system that uses iframes. But when I show AdSense I want the banner to be placed outside the iframe and directly in the page.

The way I thought I could solve this was by placing the iframe in a div. When I want to display AdSense I call a JavaScript function within the iframe on the parent page which replaces the innerHTML from the div with the AdSense code. (I hope my explanation isn't to confusing)

Everything works great, but I cannot seem to get the AdSense to be placed and executed in the div.

Any help would be greatly appreciated!