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?

Aristocracy

Answer 1

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 ) ;

Parry

Answer 2

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.

Paulinepauling

Answer 3

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:

1. scripts only run inside script tag
2. 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

Medial

If you appendChild your scripts inside div tags. They will not be executed by browser. Scripts should be appended with "script" tag. – Vargas

Which divs are you talking about? I use script tag var scriptElement = document.createElement('SCRIPT');. Explain your comment please. – Medial

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. – Vargas

I still don't understand why you mention div element if that does not appear in the answer. – Medial

Because I did this mistake, lost hours. And I do not want someone else to lost hours. – Vargas

Answer 4

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

Guillerminaguillermo

Answer 5

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

Bloodred

Good answer if you're using jQuery as this simplifies your code, although for me personally I'm trying to remove jQuery from my code, and .innerHTML doesn't eval the scripts, while jQuery's .html() method does, so I need to eval it manually and I can't find the source jQuery code for .html() in their repo. – Sadiras