4

Asynchronous java script loading is showing the following error:

Attribute name "async" associated with an element type "script" must be followed by the ' = ' character. + jsf

I found this in my JSF2.4 application which uses template file template.xhtml. The DOCTYPE is 

<!DOCTYPE html  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:c="http://java.sun.com/jstl/core"
xmlns:p="http://primefaces.org/ui">

This error goes when I use HTML 5 DOCTYPE but it causes some other errors since XHTML DTD is not found.

So I tried attribute async="async" instead of just using async. Then all the errors vanished.

Is this the right method to load java script asyncronously in the context like this? Please let me know if you have better methods to fix this.

Valsaraj Viswanathan
  • 1,027
  • 3
  • 22
  • 43

1 Answers1

2

As you can read here https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script, "async" is an HTML5 attribute, so you must use another way to load your javascript asynchronously.

One trick can be to move your script just before the closing tag.

You can also use use "require.js", as this answer suggest: Load async resource with requirejs timeout

Community
  • 1
  • 1
dlopez
  • 921
  • 5
  • 16
  • I wonder why this HTML 5 attribute not allowed when I use only "async". Asynchronous loading working fine when I use async="async". I verified this by including 2 js files in page and second one depends on first one. When both of them are loaded using async="async" attribute, 2nd js reported error as first one was not available at that time. Also I am using some HTML 5 validations through JSF and it's all working fine. – Valsaraj Viswanathan Jun 25 '15 at 06:51
  • 1
    Because your are using a Strict DTD, and in that mode you cannot use attributes without values. If you do it though a Transitional DTD I'm pretty sure that you don't have any problem. Anyway, I'm pretty sure also that the async attribute doesn't work on HTML4. If it does, it's because the browser gives you this sugar, on strict HTML4, this attribute has no meaning at all. More information can be found here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script – dlopez Jun 25 '15 at 14:42
  • 1
    I referred http://www.html-5.com/tutorials/converting-to-html-5.html and followed Converting from 20th Century versions of HTML (prior to 2000) section which suits for my application and it's working fine now. While rendering page in browser all tags are rendered as per HTML 5 model. – Valsaraj Viswanathan Jun 26 '15 at 08:34