Search code examples
javascriptjqueryjspjspx

Including JS files (JQuery) in JSPX files


I'm creating a dynamic web project in Eclipse (almost from scratch) and I created a JSPX file where I put

<head>...
<script type="text/javascript" src="route/to/scripts/jquery.js"></script>
<script type="text/javascript" src="route/to/scripts/jquery.ui.js"></script>
<script type="text/javascript" src="route/to/scripts/something.js"></script>
</head>

I intend to use Jquery UI sortable and I found out that using JSPX, only the first script loads in Firefox and IE (while in opera it works...). If I use plain JSP, whether HTML of XHTML, it loads all the JS files.

Is there any way to include all the JS files successfully without using

<script>
<jsp:include ...>
</script>

that I must be aware of? (because this one loads the script INTO the final (X)HTML)

EDIT: Just thinking... why does Opera read the xhtml right while FF and IE failed at reading the <script> tags? Could it be a bug?


Solution

  • JSPX has the quirky behaviour that it auto-collapses tags without body. So effectively

    <script type="text/javascript" src="route/to/scripts/jquery.js"></script>
    <script type="text/javascript" src="route/to/scripts/jquery.ui.js"></script>
    <script type="text/javascript" src="route/to/scripts/something.js"></script>
    

    will end up in browser as

    <script type="text/javascript" src="route/to/scripts/jquery.js" />
    <script type="text/javascript" src="route/to/scripts/jquery.ui.js" />
    <script type="text/javascript" src="route/to/scripts/something.js" />
    

    which is invalid <script> syntax (rightclick page in browser and do View Source to see it yourself). The browser behaviour is undetermined.

    You can workaround this by putting a <jsp:text /> between the tags

    <script type="text/javascript" src="route/to/scripts/jquery.js"><jsp:text /></script>
    <script type="text/javascript" src="route/to/scripts/jquery.ui.js"><jsp:text /></script>
    <script type="text/javascript" src="route/to/scripts/something.js"><jsp:text /></script>