<script> tags returned by AJAX not working

Gardy · 09-08-2011, 11:27 AM

Hey all,

I have some AJAX on my site, and part of what it returns is a piece of code that is in the <script> tags, but this is totally ignored (I'm assuming becuase of <scritp> tags within the original set of <script> tags.

Does anybody know a way around this?

Example code -

Code:

<script type="text/javascript">
    ...Code before

    document.getElementById('service-content').innerHTML = response;

    Code after....
</script>

Where the responce contains somthing like as follows. It is this that is being ignored -

Code:

<script>Display this if JS enabled</script>

Thanks.

devnull69 · 09-08-2011, 11:51 AM

Doing it like this would require you to eval() the returned code. This will result in executing the code inside the response. But this is not the correct way of doing it (try searching for "eval is evil" in Google)

Instead you should move the script code to the calling page and execute this code after the response has been received

Gardy · 09-08-2011, 01:55 PM

I was afraid of that! Unfortunatly thought the <script> chunk of the code is (and needs to be) pretty much slap-bang in the middle, so will have to get my thinking cap on here.

Thanks for the reply.

ironboy · 09-29-2011, 02:46 AM

Try including the script dynamically when you need it, using this function:

Code:

var scriptMount = function(url){
  var js = document.createElement("script");
  js.setAttribute("src",url);
  document.getElementsByTagName("head").item(0).appendChild(js);
};

Call it whenever you want in your JavaScript application and it will add a new script to the page asynchronously:

Code:

scriptMount('theurltomyscript.js')

I don't know what you mean with 'slap-bang in the middle' but if you need to build some aspect of the script dynamically on the server based on user interactions then do so by supplying some get parameters in the url.

DaveyErwin · 09-29-2011, 04:10 AM

Quote:

Originally Posted by Gardy

Code:

<script>Display this if JS enabled</script>

Thanks.

Uh . well that is not code
inside those script tags.
Why not show the real
code that is inside the script tags ?
Executing code inside script tags
delivered by an xmlhttprequest is
no prob at all but it must be script
not "Display this if JS enabled".

Rowsdower! · 09-29-2011, 01:46 PM

One possibility if you want to shake things up...

You can create a new script element in the page (using the document.createElement function) and then set the new script element's src attribute to be that AJAX request's requested URL. Then have the URL return just the script without the <script></script> tags.

That won't really work if you're POSTing with your AJAX though. This would only work for a "GET" request.

DaveyErwin · 09-29-2011, 02:30 PM

here is something ...

index.htm ....

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<meta name="generator" content="daveyerwin">
<title>Untitled</title>
<script type="text/javascript">	
function getIt(){	
	req=new XMLHttpRequest();
	req.open("GET","include.htm",false);
	req.send(null);
	document.write(req.responseText);}
</script>
</HEAD >
<body>
<div id="content">
<script type="text/javascript">	
getIt();
</script>
</div>
</BODY>
</HTML>

include.htm ...

Code:

here is some text
followed by code 
inside script tags.
<script>
alert("JavaScript is enabled")
</script>

Of course, this is Sjax.

DaveyErwin · 09-29-2011, 03:10 PM

Here is one that uses
real ajax ....

index.htm

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<meta name="generator" content="daveyerwin">
<title>Untitled</title>
<script type="text/javascript">	
function init(){	
	var content = document.getElementById("content");
	req=new XMLHttpRequest();
	req.open("GET","mypage.htm",true);
	req.onreadystatechange = function (){
				if(req.readyState == 4){
				populateIframe(content.innerHTML = req.responseText);
				
			}		
	}
	req.send(null)	
}


        function populateIframe(arg) {
            var ifrm = document.getElementById('myIframe');
            ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;
            ifrm.document.open();
            ifrm.document.write(arg);
            ifrm.document.close();
        }

</script>
</HEAD >
<body onload="init()">
<div id="content">

</div>
<iframe id="myIframe" style="display:none;"></iframe>
</BODY>
</HTML>

mypage.htm ...

Code:

here is some text
followed by code 
inside script tags.
<script>
alert("JavaScript is enabled")
</script>