Unbalanced tree - JS Error - javascript

I am developing an application that uses loops to create a desired output; here from number 1 to 50. I am using a for loop and uses the concatenation method to show the looped numbers. But then the debugger in the browser is saying that I have written an unbalanced tree.
Here is the error:
An unbalanced tree was written using document.write() causing data from the network to be reparsed. For more information https://developer.mozilla.org/en/Optimizing_Your_Pages_for_Speculative_Parsing
Here is the code:
<script type="text/javascript">
for(i=1;i<=50;i++){
document.write(""+i+"");
}
</script>
Note: The links I am creating use an id attribute to link somewhere exactly on the page.
Thanks for help.

It's a warning. It happens in Firefox 4 and later.
From MDN: Optimizing your pages for speculative parsing:
However, in Firefox 4 and later the HTML parser also runs the HTML tree construction algorithm speculatively. The upside is that when a speculation succeeds, there's no need to reparse the part of the incoming file that was already scanned for scripts, style sheets and images. The downside is that there's more work lost when the speculation fails.
[...]
Speculative tree building fails when document.write() changes the tree builder state such that the speculative state after the </script> tag no longer holds when all the content inserted by document.write() has been parsed. However, only unusual uses of document.write() cause trouble. Here are the things to avoid:
[...]
Don't write unbalanced trees. <script>document.write("<div>");</script> is bad. <script>document.write("<div></div>");</script> is OK.
The solution is to write the missing single closing quote.
<script type="text/javascript">
for(i=1;i<=50;i++){
document.write("<a href='page.html#"+i+"'>"+i+"</a>");
}
</script>

You have missed out an single quotes.
Try running with below:
for(i=1;i<=50;i++){
document.write("<a href='page.html#"+i+"'>"+i+"</a><br/>");
}
Be careful while using single and double quotes.

Even if you document.write(...) a balanced tree, for example document.write('<span>X</span>'), then you still can get the same error message.
One possible explanation is that you execute that JS code not in the body but in the head of the html, writing something that cannot occur in the head.
For example:
Wrong:
<html>
<meta charset="UTF-8">
<script>
document.write('<span>X</span>');
</script>
</html>
Good:
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
document.write('<span>X</span>');
</script>
</body>
</html>

Related

jQuery AJAX dataType - HTML and Javascript [duplicate]

this is my page Test1.asp
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<script type="text/javascript">
function Alex()
{
var xmlHttp;
try
{
xmlHttp=new XMLHttpRequest(); }
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.getElementById("Alex").innerHTML =xmlHttp.responseText;//Get Google Destination Map
}
}
xmlHttp.open("GET","Test2.asp" ,true);
xmlHttp.send(null);
}
</script>
</head>
<body>
<div id ="Alex"></div>
<label onclick="Alex()" >ssss</label>
</body>
</html>
This is requested page Test2.asp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<body>
<div id="Mathew"></div>
</body>
<script type="text/javascript" >
{
document.getElementById("Mathew").innerHTML='ajax is working';
}
</script>
</html>
In the page (Test2.asp) javascript is not working
How do i call test2.asp to my test1.asp using ajax
In HTML inserted by Javascript does not execute automatically (at least in IE for sure). The only solution to this is to gather each of the script blocks in the loaded HTML and evaluate them each.
EDIT
I am using YUI here... the Dom class can collect all script tags from within the given block.
var domElement = document.getElementById("Alex");
var scriptBlocks = YAHOO.util.Dom.getElementsBy(function() {return true;},'script',domElement);
for (var i = 0 ; i < scriptBlocks.length ; ++i){
eval(scriptBlocks[i].innerHTML);
}
Simple as that. Also becareful about Internet Explorer... if you load in HTML using ajax, and it comes back with the script block as one of the first elements, it will, for some odd reason, ignore the script block and not include it in the response. To fix it, put a div above the script block with text in it with a style attribute of display:none;
If this is the HTML returned to IE, it will not include the script block in the response
<div>
<script type="text/javascript">
/* Some javascript */
</script>
</div>
This will fix the issue
<div style="display:none;">some text</div>
<div>
<script type="text/javascript">
/* Some javascript */
</script>
</div>
Very weird, but thats how IE rolls.
By default JavaScript contained with AJAX responses is not executed.
There is no point in building an Ajax handler from scratch when this problem has already be solved in various libraries just as jQuery and Prototype.
Use an absolute URI instead of a relative URL.
Adding a <script> element into a document via innerHTML doesn't(*) execute its contents as a script.
You're also trying to insert the entire HTML document, including <html>, <head> and <body> inside a <div>, which is quite invalid.
If you need to return both HTML and some script to execute, better to return a JSON object, eg.:
{
"html": "<div id="Mathew"></div>",
"js": "document.getElementById(\"Mathew\").innerHTML='ajax is working';"
}
then parse the JSON object, set the innerHTML to obj.html and eval the js. (Though it's generally questionable to be returning and executing arbitrary, scripts, there can sometimes be a use for it.)
(*: Well, doesn't generally. Exactly when a <script> element's contents get executed is browser-dependent. For example Firefox executes script when you append/insert a DOM HTMLScriptElement or ancestor into an element that is part of the document, whereas IE executes it when you insert the element into any parent for the first time, whether inside the document or not. In general, avoid inserting JavaScript-in-HTML content into HTML.)
Your methodology is slightly amiss. Typically, AJAX is used to send and receive data in non-HTML formats, such as XML, JSON, or sometimes even CSV (however, HTML is sometimes returned to the client, but usually as pieces of a page, not entire pages as in your example).
Logic is rarely transmitted and is usually maintained on the respective sides of the transmission. In other words, the client/request side has all of its own logic and already knows what to do with the data returned from the server/response side (which also doesn't accept or require any logic generated from the client side). Further, the use of eval, which is usually necessary to consistently execute the logic found in the response, is generally frowned upon and considered a bad practice, thus the saying, "eval is evil."
In some cases, it may be necessary, advantageous or just plain easier to receive logic as part of the response from the server. In these situations however, it is still considered a best practice to separate your data from your logic.
All that to nicely say that you're doing it wrong. I encourage you to read up on how AJAX works and how best to use it: w3schools walk-through, Mozilla MDC intro, AJAX and XML processing, updating a page (similar to what I think you're trying to do), and finally, AJAX API docs for jQuery, Prototype and Dojo.
Prototype has a nice way of handling this. See their stripScripts, extractStrips, and evalScripts methods on the String object. If you just strip the scripts, put your text into a div and then evalScripts, that'll work across all brwosers so scripts get executed exactly once.

How to put "</script>" in a javascript string?

I've been trying some tricks in javascript and came to a ridiculous problem: I can't use <script> as a substring in a javascript string! Here is an example:
<html>
<head>
<script>
alert("<script></script>");
</script>
</head>
</html>
It supposed to print out <script></script>, but instead, I get this:
");
Printed out on the page, as HTML.
Question: How can I use <script> followed by </script> substrings in Javascript, and why is it acting that way?
Here is JSFiddle of it.
What's tripping you up is the </script>. The HTML parser doesn't recognize Javascript strings or nested <script> tags, so it's interpreting that as the closing tag for the initial <script>. That is, this part of the document is parsed as:
<script> (open tag)
alert("<script> (text node - contents of the script)
</script> (close tag)
"); (text node - plain text)
The second </script> is ignored, as there's no other <script> tag for it to close.
To work around this, break up </script so that the HTML parser doesn't see it. For instance:
alert("<script><\/script>");
or:
alert("<script><" + "/script>");
or just put the code in an external Javascript file. This issue only arises for inline scripts.
it is because of the \ I believe. i have no concrete explanation since I am a newbie to Javascript but this code should work:
alert("<script><\/script>");
came up with it using Java knowledge.. Haha since the \ is an escape key in many languages.
Alert(\<script>\</script>\)

JQuery JSON data not displaying

I am having trouble displaying some jason from a page.
The data is there but I think it might have to do with this line:
document.write(fbResults.cats[0].title);
Here is the full html source:
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$.getJSON('http://mydomain.com/api/get_cats', function(fbResults) {
document.write(fbResults.cats[0].title);
});
});
</script>
</head>
<body>
</body>
</html>
And here is the data that it's reading:
{"cats":[
{"id":"1","title":"mytitle1","colour":"#EE297C"},
{"id":"2","title":"mytitle2","colour":"#EE412F"},
{"id":"3","title":"mytitle3","colour":"#F5821F"},
{"id":"4","title":"mytitle4","colour":"#00AEEF"},
{"id":"5","title":"mytitle5","colour":"#00B495"},
{"id":"6","title":"mytitle6","colour":"#006476"}
]}
It is not displaying anything on the page.
On firebug console I get this error:
The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must to be declared in the document or in the transfer protocol.
No traces of the json data there
What I'm I doing whong?
You shouldn't document.write after the page has loaded (which is certainly the case here).
If you want to write it to the page, you'll need to create HTML and append it. Just replace the document.write:
$('body').append('<p>'+fbResults.cats[0].title+'</p>');
Update:
Your example makes a fully qualified URL call. Is that server the exact same one that you're running the page from? If it isn't the XHR will just eat the request (and sometime not tell you). If you need to go cross domain, you'll need to use JSONp. If you're attempting to run this locally while pulling data from the net, it'll break.
Try this
$.each(fbResults.cats,function(index,item){
document.write(item.title);
});
Working sample : http://jsfiddle.net/zWhEE/8/
its seems work for me please check this
http://jsfiddle.net/TxTCs/1/

How to correctly include javascript code in chameleon/zpt template (pyramid)?

I'm trying to embed some code between <script> </script> tags, pyramid however doesn't like it and gives me
ExpatError: not well-formed (invalid token)
Probably because i have && in my code. I tried using & instead, but then it didn't get interpreted in the browser.
The same thing happens when i try to put it in CDATA block.
When I move the code to a separate js file it works. I'd like to keep it in the same file for now, just to enable quick corrections.
So, how should I do it?
EDIT:
I get the same error even for templates as simple as this one:
<html
xmlns:tal="http://xml.zope.org/namespaces/tal"
xmlns:metal="http://xml.zope.org/namespaces/metal">
<head>
</head>
<body>
<span onclick="alert(true && false);">test</span>
</body>
</html>
I think you're supposed to put && (i.e. two times the HTML entity code).
This should work:
<script type="text/javascript">
//<![CDATA[
// my javascript
//]]>
</script>
Have you tried adding a type attribute to your script tag?:
<script type="text/javascript">
...
</script>
It looks like xhtml issue, as w3c validator reported the same error.
I was thinking if there's a switch to change the document type parsed by chameleon to html, but then it wouldn't be possible to include tal and metal namespaces.
Hence it is expected behavior

JavaScript returned by AJAX is not working. How to work with JavaScript?

this is my page Test1.asp
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<script type="text/javascript">
function Alex()
{
var xmlHttp;
try
{
xmlHttp=new XMLHttpRequest(); }
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.getElementById("Alex").innerHTML =xmlHttp.responseText;//Get Google Destination Map
}
}
xmlHttp.open("GET","Test2.asp" ,true);
xmlHttp.send(null);
}
</script>
</head>
<body>
<div id ="Alex"></div>
<label onclick="Alex()" >ssss</label>
</body>
</html>
This is requested page Test2.asp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<body>
<div id="Mathew"></div>
</body>
<script type="text/javascript" >
{
document.getElementById("Mathew").innerHTML='ajax is working';
}
</script>
</html>
In the page (Test2.asp) javascript is not working
How do i call test2.asp to my test1.asp using ajax
In HTML inserted by Javascript does not execute automatically (at least in IE for sure). The only solution to this is to gather each of the script blocks in the loaded HTML and evaluate them each.
EDIT
I am using YUI here... the Dom class can collect all script tags from within the given block.
var domElement = document.getElementById("Alex");
var scriptBlocks = YAHOO.util.Dom.getElementsBy(function() {return true;},'script',domElement);
for (var i = 0 ; i < scriptBlocks.length ; ++i){
eval(scriptBlocks[i].innerHTML);
}
Simple as that. Also becareful about Internet Explorer... if you load in HTML using ajax, and it comes back with the script block as one of the first elements, it will, for some odd reason, ignore the script block and not include it in the response. To fix it, put a div above the script block with text in it with a style attribute of display:none;
If this is the HTML returned to IE, it will not include the script block in the response
<div>
<script type="text/javascript">
/* Some javascript */
</script>
</div>
This will fix the issue
<div style="display:none;">some text</div>
<div>
<script type="text/javascript">
/* Some javascript */
</script>
</div>
Very weird, but thats how IE rolls.
By default JavaScript contained with AJAX responses is not executed.
There is no point in building an Ajax handler from scratch when this problem has already be solved in various libraries just as jQuery and Prototype.
Use an absolute URI instead of a relative URL.
Adding a <script> element into a document via innerHTML doesn't(*) execute its contents as a script.
You're also trying to insert the entire HTML document, including <html>, <head> and <body> inside a <div>, which is quite invalid.
If you need to return both HTML and some script to execute, better to return a JSON object, eg.:
{
"html": "<div id="Mathew"></div>",
"js": "document.getElementById(\"Mathew\").innerHTML='ajax is working';"
}
then parse the JSON object, set the innerHTML to obj.html and eval the js. (Though it's generally questionable to be returning and executing arbitrary, scripts, there can sometimes be a use for it.)
(*: Well, doesn't generally. Exactly when a <script> element's contents get executed is browser-dependent. For example Firefox executes script when you append/insert a DOM HTMLScriptElement or ancestor into an element that is part of the document, whereas IE executes it when you insert the element into any parent for the first time, whether inside the document or not. In general, avoid inserting JavaScript-in-HTML content into HTML.)
Your methodology is slightly amiss. Typically, AJAX is used to send and receive data in non-HTML formats, such as XML, JSON, or sometimes even CSV (however, HTML is sometimes returned to the client, but usually as pieces of a page, not entire pages as in your example).
Logic is rarely transmitted and is usually maintained on the respective sides of the transmission. In other words, the client/request side has all of its own logic and already knows what to do with the data returned from the server/response side (which also doesn't accept or require any logic generated from the client side). Further, the use of eval, which is usually necessary to consistently execute the logic found in the response, is generally frowned upon and considered a bad practice, thus the saying, "eval is evil."
In some cases, it may be necessary, advantageous or just plain easier to receive logic as part of the response from the server. In these situations however, it is still considered a best practice to separate your data from your logic.
All that to nicely say that you're doing it wrong. I encourage you to read up on how AJAX works and how best to use it: w3schools walk-through, Mozilla MDC intro, AJAX and XML processing, updating a page (similar to what I think you're trying to do), and finally, AJAX API docs for jQuery, Prototype and Dojo.
Prototype has a nice way of handling this. See their stripScripts, extractStrips, and evalScripts methods on the String object. If you just strip the scripts, put your text into a div and then evalScripts, that'll work across all brwosers so scripts get executed exactly once.

Categories