JavaScript include difficulties

I have small peice of code that runs at the end of my code after the page is created and it manipulates the sidebar which is apart of the overall template. Since its accessing an API i could foresee future changes that would need to be made to the code and ofcourse that needs to be reflected to all pages. So i took my peice of code

<!-- Top 3 Streams -->
<script type="text/javascript">

var myurl = encodeURIComponent("https://api.twitch.tv/kraken/streams?game=DayZ&limit=3")

scr = document.createElement("script");
scr.type = "text/javascript"
scr.src = 'http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%3D%22' + myurl + '%2F%22&format=json&callback=showGame';
document.body.appendChild(scr);
</script>
<!-- / Top 3 Streams -->

and replaced it with an include

<!-- Top 3 Streams -->

<?php include('includes/top3streams.php'); ?>

<!-- / Top 3 Streams -->

and now its not working properly... did i not implement this include properly?

The contents of the include file read

<script type="text/javascript">

var myurl = encodeURIComponent("https://api.twitch.tv/kraken/streams?game=DayZ&limit=3")

scr = document.createElement("script");
scr.type = "text/javascript"
scr.src = 'http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%3D%22' + myurl + '%2F%22&format=json&callback=showGame';
document.body.appendChild(scr);
</script>

perhaps the <script type="text/javascript"> and </script> needs to remain in the HTML? perhaps its not loading in fast enough? any thoughts?

perhaps i should be using a External JS file instead? or heck, maybe even a more basic HTML include?

No, the script tags should remain in the included file.

What error messages is the browser producing?

Note: It works perfectly in Chrome, but not in IE8

No, the script tags should remain in the included file.

What error messages is the browser producing?

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
Timestamp: Mon, 8 Oct 2012 15:09:40 UTC


Message: Unknown runtime error
Line: 39
Char: 7
Code: 0
URI: http://dayzlive.com/beta/

It works perfectly in Chrome

Not at all in IE8

and intermittently in Firefox (when refreshing it sometimes dident work)

*edit: i refreshed over a dozen times and it suddenly seems stable in firefox as well now


Note the function it references is not being included.. its written directly in head

function showGame(o)
{
var thediv = document.getElementById("results")
var base = o.query.results.json.streams;
for (var i = 0; i < base.length; i ++ )
{
document.getElementById("streamlogo" + (i + 1)).src = base[i].channel.logo;
document.getElementById("streamname" + (i + 1)).innerHTML = base[i].channel.name;
var status = base[i].channel.status
if (status.length > 76)
{
var statusubstr = status.substr(0,76)
document.getElementById("streaminfo" + (i + 1)).innerHTML = "<b>Viewers: " + base[i].viewers + "</b><br><p>" + statusubstr + "... </p>";
}
else
{
document.getElementById("streaminfo" + (i + 1)).innerHTML = "<b>Viewers: " + base[i].viewers + "</b><br><p>" + status + " </p>";
}
}
}

presumably you are using the include in the head.

but you are attaching the script to the body.

when the browser is reading the head section, the body does not exist yet. In the absence of a body, most browsers will create one, because they know that there has to be one, eventually.

But IE is fun and quirky and likes to do its own thing.

The easiest solution (I think) is to attach the script to the head, using this line instead of the "body" one:
document.getElementsByTagName("head")[0].appendChild(scr);

presumably you are using the include in the head.

but you are attaching the script to the body.

when the browser is reading the head section, the body does not exist yet. In the absence of a body, most browsers will create one, because they know that there has to be one, eventually.

But IE is fun and quirky and likes to do its own thing.

The easiest solution (I think) is to attach the script to the head, using this line instead of the "body" one:
document.getElementsByTagName("head")[0].appendChild(scr);

I think i am using the include in the body, actually its the last thing in the body.. either that or i do not quiet understand your recomendation


<!-- Top 3 Streams -->

<?php include('includes/top3streams.php'); ?>

<!-- / Top 3 Streams -->

</body>
</html>

Why not just use an external JavaScript - there is no point in using a server side include call for a script when using an external script allows the code to be shared between pages in the browser with only doewnloading it once rather than once per page.

What I *REALLY* don't understand is the need to use appendChild, at all.

Why not just do this directly????

<script type="text/javascript"
src="http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%3D%22https%3A%2F%2Fapi.twitch.tv%2Fkraken%2Fstreams%3Fg ame%3DDayZ%26limit%3D3%2F%22&format=json&callback=showGame">
</script>


That is, figure out what the URIEncoded version of myurl is ONE TIME and plunk it in place in the yahoo query url. Then you don't have to use an extra layer of indirection and appendChild and all the rest of it.