Executing Javascript returned in responseText from AJAX page

I am working with AJAX and want to execute some Javascript that is embedded in the responseText from the AJAX call.  It includes some jQuery calls as well.  I've been playing with that and it doesn't seem to work, either because the javascript isn't executed or because the returned HTML can't be parsed using the DOM.  The alternative that I've used is to load a complete page as a iFrame overlay which isn't ideal, although it works fairly well.  The page is at http://sscotti.org.  To see what I've currently doing you need to select the "review mode" in the upper left drop down, check a couple of cases in the case list and then hit the submit query button.  The iFrame loads and it has the jQuery and other scripts loaded with it and it works fine and I can parse the DOM.  Just wondering if there is an alternate solution to load the rendered HTML and javascript into a DIV in the parent page.
LVL 5
sscottiAsked:
Who is Participating?
 
HonorGodConnect With a Mentor Software EngineerCommented:
To execute the JavaScript, you could use the eval() function.

http://www.w3schools.com/jsref/jsref_eval.asp
0
 
leakim971PluritechnicianCommented:
some browser don't like you fill the div.innerHTML with a DOM "string" so you need to add the object dynamically. You responseText contain only datas (values,names,ids, innerHTML) to build dynamicaly the DOM

0
 
Steve KrileConnect With a Mentor Commented:
As far as I know, if you use the .load() function of jquery, any script on the second page IS executed.  Here is a simple working example.

The "parent" page looks like this:

<html>
<head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <script src="http://code.jquery.com/jquery-1.4.2.min.js" language="javascript"></script>
</head>

<body>
  <button id="getpage">Get Data</button>

  <div id="content"></div>
</body>



<script type="text/javascript">
$(document).ready(function(){
      $("#getpage").click(function(){
            $("#content").load("Test2.html");
      });
});


</script>

</html>





And the second page looks like this:

<html>
<head>
      <script src="http://code.jquery.com/jquery-1.4.2.min.js" language="javascript"></script>
</head>

<body>
  Hi, I am content from another page.
</body>

<script type="text/javascript">

      $(document).ready(function(){
            var t = setTimeout(function(){alert("this code executed from the second page after 1 second.");}, 1000);
      });



</script>
</html>

Test.zip
0
 
sscottiAuthor Commented:
I'll give that a try.
0
 
HonorGodSoftware EngineerCommented:
Thanks for the grade & points.

Good luck & have a great day.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.