Question

Through a Javascript request, XMLHttpRequest responds with some additional Javascript that needs to be added to the page the requesting page.

Using eval(), if the response is something like:

alert('This is the js response');

… then this works just fine.

However, the text returned could look something like this:

<script language="javascript">var checkVar='checkVar: value 1';</script>

but most likely:

<script src="http://www.somesite.com/setCheckVarValue.js"></script> 

… where additional JS needs to be loaded on the page.

I have ensured that the XMLHttpRequest is synchronous, as I want to reference checkVar right after this.

So:

<script type="text/javascript" src="http://www.mysite.com/addJSToPage.js" />
// at this point, since this is a synchronous call, page processing waits
// until the response is received that needs to include the additional JS
// to load; this, for testing sets the value of checkVar

<script type="text/javascript" >
    alert(checkVar);
</script>

The alert message should read “checkVar: value 1”.

For other reasons, this is not just as simple as setting var checkVar in addJSToPaged.js, so I’m not looking for that kind of recommendation.

I’m using alert(checkVar) simply as a test to ensure that a value has been set through JS in the response.

I suppose that I could strip out the beginning and ending script tags and keep the eval() way of doing it. However, I would like to know if there are any solutions that support what I’m looking for?

Thanks.

UPDATE

Following Prashanth’s suggestion, in addJSToPage.js I added:

var dynamicElement = document.createElement('div');

Then in the response from the XMLHttpRequest, I did:

dynamicElement.appendChild = xmlhttp.responseText;

Still not seeing the value of checkVar.

Answer 1

Recapping – the need is present to be able to dynamically load some content onto a page after/during load, and have it execute. By execute, I don’t just mean change the text on some div – that’s easy. But if we want to load some new JS dynamically, say an alert that comes from some outside source, and inject it, along with it’s script tags, and maybe some other HTML code, then the solution is to use the following jQuery call:

jQuery(dynamicResponse).appendTo('body');

dynamicResponse comes from an asynchronous $.ajax({}) or XmlHttpRequest response. Once present, it is appended onto whatever DOM element, specified in appendTo() and executed.