jQuery: Evaluate script in ajax response

Question

XML responses from my webapp have both HTML to add to the page AND some have a script to run.

I'm trying to send back XML from my webapp like:

<?xml version="1.0"?>
<doc>
  <html-to-insert>
    <![CDATA[<p>add me to the page</p>]]>
  </html-to-insert>
  <script>
    <![CDATA[ alert('execute me'); ]]>
  </script>
</doc>

What I'm doing now is snapping out the <html-to-insert> and <script> CDATA, inserting the html into the page and eval'ing <script>.

I'm looking for criticism on my approach. Any suggestions from anyone?

score 9 · Answer 1 · answered Jan 28 '10 at 21:59

You can use the jQuery library to make the XML request to your backend and also parse it

$(document).ready(function()
{
  $.ajax({
    type: "GET",
    url: "your/url/that/returns/xml",
    dataType: "xml",
    success: function (xml) {
      // xml contains the returned xml from the backend

      $("body").append($(xml).find("html-to-insert").eq(0));
      eval($(xml).find("script").text());
    }
  });
});

You can find out more about jQuery here and here

I haven't tested it, but it should work according to this article.

score 2 · Accepted Answer · answered Jan 28 '10 at 21:27

2

You'd rather send JSON, it's way easier to interpret. Example:

// Suppose your response is a string:
// { html: "<p>add me to the page</p>, script:"alert('execute me');" }
var obj = eval( "(" + response + ")" ) ;
eval( obj.script ) ;

answered Jan 28 '10 at 21:27

St.Woland

5,199
27
30

score 2 · Answer 3 · edited May 23 '17 at 12:06

2

This is the best answer that i found. Work perfect:

element.innerHTML = xmlhttp.responseText;
var scriptElements = element.getElementsByTagName('SCRIPT');
for (i = 0; i < scriptElements.length; i ++) {
    var scriptElement = document.createElement('SCRIPT');
    scriptElement.type = 'text/javascript';
    if (!scriptElements[i].src) {
        scriptElement.innerHTML = scriptElements[i].innerHTML;
    } else {
        scriptElement.src = scriptElements[i].src;
    }
    document.head.appendChild(scriptElement);
}

Thanks to Joseph the Dreamer. Original answer here.

EDIT:

Clarification:

scripts only run inside script tag
added scripts after document load, only take effect if it is added to the head tag

Thanks to Deniz Porsuk for the comment to improve the answer

edited May 23 '17 at 12:06

Community

1
1

answered Aug 20 '14 at 14:00

IgniteCoders

3,538
3
34
55

If you appendChild your scripts inside div tags. They will not be executed by browser. Scripts should be appended with "script" tag. – Deniz Porsuk Apr 30 '15 at 09:07
Which divs are you talking about? I use script tag `var scriptElement = document.createElement('SCRIPT');`. Explain your comment please. – IgniteCoders Jun 08 '15 at 15:05
Yes this is true way. But if you create your script inside div like var divElement = document.createElement('div'); and push innerHTML from scriptElement = document.createElement('SCRIPT'); divElement.innerHTML = scriptElement; script will not be executed by browser. – Deniz Porsuk Jun 09 '15 at 07:40
I still don't understand why you mention div element if that does not appear in the answer. – IgniteCoders Jun 09 '15 at 10:11
1

Because I did this mistake, lost hours. And I do not want someone else to lost hours. – Deniz Porsuk Jun 10 '15 at 11:06

code_burgar · Answer 4 · 2012-05-15T10:47:08.287

0

JSON would be better suited for this purpose than XML imho.

edited May 15 '12 at 10:47

answered Jan 28 '10 at 21:26

code_burgar

11,153
4
32
52

score 0 · Answer 5 · answered Apr 20 '21 at 10:23

0

If you output your ajax request response as $target.html(response); scripts will be evaluated by browser with no additional moves from your side.

answered Apr 20 '21 at 10:23

Nick Kovalsky

3,015
15
35

jQuery: Evaluate script in ajax response

5 Answers5

Linked