Html to Haml conversion javascript - javascript

I have this html code. I want it to convert to haml format.
-->
<script type="text/javascript">
window.jQuery || document.write("<script src='assets/jquery-2.0.3.min.js'>"+"<"+"/script>");
</script>
<!--<![endif]-->
This is how I convert it to haml.
/ [if !IE]>
:javascript
window.jQuery || document.write("<script src='assets/jquery-2.0.3.min.js'>"+"<"+"/script>");
/ <![endif]
but I got this error Illegal nesting: nesting within a tag that already has content is illegal. Any idea why? or what is the right way to convert this code to haml?

Haml includes support for IE conditional comments, the sytax is / [cond], without the closing >
In your first line:
/ [if !IE]>
the last > is being treated as content, and you also nest the :javascript filter as content. This is why you get the nesting within a tag that already has content is illegal error.
However, you can’t use the !IE condition this way, you’ll end up with a single comment that all browsers will ignore. You’ll need to no something like this, using literal HTML:
<!--[if !IE]> -->
:javascript
window.jQuery || document.write("<script src='assets/jquery-2.0.3.min.js'>"+"<"+"/script>");
<!-- <![endif]-->

Related

Browser interpreting Javascript string as HTML tag

I have the following in my source HTML:
<head>
...
<script>window.jQuery || document.write('<script src="/js/jquery.min.js"></script>');</script>
...
</head>
But it is getting interpreted by my browser (Chrome) as:
<head>
...
<script>window.jQuery || document.write('<script src="/js/jquery.min.js"></script>
</head>
<body>
"');"
...
I've tried escaping the slash inside the document.write string, but that didn't work. Does anyone know how to prevent the browser from interpreting it as as a closing script tag?
</script> is alwasy interpreted as closing script tag even if it's inside string you need to split it like this:
'</'+'script>';
You need to escape some characters in your script.
Try this:
<script>window.jQuery || document.write('<script src="/js/jquery.min.js"><\/script>')</script>
I escaped the / character with a backslash \, so it ends up like: \/ in your document.write() statement.
For a good example of this setup, try looking at HTML5 Boilerplate project on GitHub here:
https://github.com/h5bp/html5-boilerplate/blob/master/src/index.html#L26
Hope this helps.

What's the thing with empty script tags in HTML? [duplicate]

This question already has answers here:
Why don't self-closing script elements work?
(12 answers)
Closed 6 years ago.
To include an external JavaScript file in HTML page you would use this:
<script type="text/javascript" src="images/jquery-2.2.2.js"></script>
The body of this tag is empty, yet I have to type the string script twice. Why isn't XML-style implicit closing tag in HTML, like this:
<script type="text/javascript" src="images/jquery-2.2.2.js" />
If it is valid (at least in HTML5), then how to make sure every browser supporting HTML5 (or XHTML5) can pick up on this usage?
EDIT
I'm gonna take this question to HTML WG. Deprecate the src attribute on <script> as it is the source of this entire confusion, with one of the two options:
<link> tag instead of an empty <script> tag:
<link type="text/javascript" href="images/jquery-2.2.2.js" />
Or optionally with a rel attribute:
<link rel="script" type="text/javascript" href="images/jquery-2.2.2.js" />
PHP-style include() in JavaScript itself: (thus force some content into the tag at all times, and allow multiple scripts to be included in one script tag)
<script type="text/javascript">include("images/jquery-2.2.2.js");</script>
You may not omit the closing tag for the script element. If you do so, the JavaScript runtime will see the following HTML as JavaScript and error out.
The only time you may self-terminate an element tag (<br />) is IF that element, either doesn't have a closing tag (br, link, meta) or the closing tag is defined as optional (li, p).
Now, the reason why you must type the element with an open and closing tag is because that element can contain JavaScript, which makes it a content element. All content elements must always be explicitly closed, unless the spec. says otherwise.
In reality the trailing forward-slash "/" is ignored by the HTML
parser. The only benefit of including it is if the markup were to be
parsed by an XML parser.
So, for an HTML parser, it would see this:
<script type="text/javascript" src="images/jquery-2.2.2.js" />
As this:
<script type="text/javascript" src="images/jquery-2.2.2.js">
And, it would then figure that everything that follows must be JavaScript.
Omitting the closing tag for <script> in HTML5 is not permissible, according to the specs (see the Tag Omission sections):
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
https://www.w3.org/TR/html5/scripting-1.html#script
https://html.spec.whatwg.org/multipage/scripting.html#the-script-element

Thymeleaf and inline scripts SAXParseException

I got a page which uses thymeleaf template, and I'm getting the following error on page load when using inline scripts:
org.xml.sax.SAXParseException; lineNumber: 270; columnNumber: 85; The
content of elements must consist of well-formed character data or
markup.
Code at line 270
<script type="text/javascript" >
window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
</script>
I have tried replacing "<", ">" symbols from document.write with < >, the exception doesn't occur anymore but the script is not loaded anymore
You need to add CDATA tags for the script like this:
<script type="text/javascript">
//<![CDATA[
window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
//]]>
</script>
The tags are telling thymeleaf's xml parser that the code between should not be interpreted as XML markup.
This is no longer necessary since Thymeleaf 3.0

JQuery Signature not working for IE <= 9

I am using JQuery Singature and I encountered this Error Message for above IE version:
Message: Canvas element does not support 2d context. jSignature cannot proceed.
update : After Added the (;) in the flashcanvas.js
The Problem is the Same:
Message: Expected ';'
flashcanvas.swf
Code: 0
I have downloaded the flashcanvas.swf and flashcanvas.js from:
https://github.com/brinley/jSignature/blob/master/libs/flashcanvas.js
https://github.com/brinley/jSignature/blob/master/libs/flashcanvas.swf
these two files I placed them in a Folder called Script.
It does not matter if I include or did not include flashcanvas.swf What I need to do?
here the javascript
<!--[if lte IE 9]>
<script type="text/javascript" src="Script/flashcanvas.js"></script>
<script type="text/javascript" src="Script/flashcanvas.swf"></script>
<![endif]-->
<script type="text/javascript" src="Script/jSignature.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$("#divSignature").jSignature({width:400, height:140, mousedown:function(){}});
});
</script>
Just a syntax error, simply update the following at line 928 of flashcanvas.js:
function getSwfUrl(window) {
return ( (window[FLASH_CANVAS + "Options"] || {})["swfPath"] || BASE_URL ) + "flashcanvas.swf"; //Added semicolon
}
IE tend to be less lenient towards Javascript errors, which can be a good thing for programmers learning the language. Browsers like Chrome can accommodate a fair amount of JS errors and still correctly execute a script.

Using <script> inside a jQuery-template

I'm using jQuery-templates for the first time, and I need my template to include some javascript, so it it run when the template is rendered.
I need at timestamp for the current time...
Writing
<script type="text/javascript"></script>
in a template, renders it to fail.
Is this simply not possible?
the following was blatantly copied from my answer to another question
When the HTML parser finds <script> it will start parsing the contents until it finds </script> which is present in:
document.write("<script src='links7.js?'+Math.random()+></script>
As such, you'll need to change the source so that it's not parsed as the end of a script element:
document.write("<script src='links7.js?'+Math.random()+></scri" + "pt>");
Ideally, you'd have HTML escaped all your inline JavaScript code, which would also mitigate this issue:
document.write("<script src='links7.js?'+Math.random()+></script&
For your particular case (which is different enough for me to not mark as a dupe), make sure that your content between your script tags is HTML escaped, or correctly placed between <![CDATA[ ]]> tags.
<script type="text/javascript"></script>
-or-
/* <![CDATA[ */
<script type="text/javascript"></script>
/* ]]> */
That all being said, you should be calling the necessary JS during the rendering process, and not injecting a script element into the DOM unnecessarily.

Categories