6

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?

Improve this question

5 Answers 5

Reset to default
10

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

4

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

Improve this answer

5 Comments

If you appendChild your scripts inside div tags. They will not be executed by browser. Scripts should be appended with "script" tag.
Which divs are you talking about? I use script tag var scriptElement = document.createElement('SCRIPT');. Explain your comment please.
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.
I still don't understand why you mention div element if that does not appear in the answer.
Because I did this mistake, lost hours. And I do not want someone else to lost hours.
3

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 ) ;
Improve this answer

Comments

0

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

Improve this answer

Comments

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.

Improve this answer

1 Comment

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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.