jQuery in Action: How do I externalize javascript

[Mike Farnham]

Hi,

I am wondering if jQuery in Action addresses: How to externalize javascript
from the JSP (or whatever) that generates the webpage.

I have created a .JSP that has a good deal of javascript in it.
But, trying to pull it out seems to be a major pain.
The biggest problem seems to be scriptlet tags.

The reason I want to pull it out is because
it increases the size of the webpage and thus the load time is longer.

Or, perhaps, jQuery in Action addresses
a good design where the javascript is created separate from webpage?

Waiting for a detailed reply,
Mike

[Gregg Bolinger]

I suspect you're doing things like...

var name = "<%= request.getAttribute("name") %>";

And the problem with externalizing the JS is you need access to those variables. Hidden fields are a good way of dealing with this. Also the metadata plugin for jQuery really helps. If you were to post a section of the code that is causing you issues with externalization we might be able to give you some tips on how to deal with it.

I'll let Bear address this with regards to his book.

[Bear Bibeault]

The book does not address server-side issues.

But Gregg hit upon the key -- data (especially server-side data injected into the page via JSP -- EL, please avoid scriptlets) should be segregated from the code (rather than hard-coding) by tacking it onto the various elements.

The book examples do show this in action.

The meta-data capability is one way to do this, but I'm fond of using HTML5-style custom attributes (which can be used in HTML4 if you don't care about validators complaining) as they do not require extra code or plugins.

[Mike Farnham]

We typically assign the request attribute to a variable
then reference the variable.

In the case where it is just a constant, that could be a hard-coded value.

Here is part of an example where we are using JSTL.


We are building an array of keys so we can build
a page that allows the customer to walk through the array.

    var descriptions = new Array();
    var descriptionsByDate = new Array();
    var descriptionsByAdvisor = new Array();
    var currentDescriptionIdx = 0;
    var currentRecordId = 0;


    <c:forEach var="key" items="${keys}" varStatus ="keyIdx">
       <jsp:useBean id="keyIdx" type="javax.servlet.jsp.jstl.core.LoopTagStatus" />
       descriptions[<c:out value="${keyIdx.index}"/>] = '<c:out value="${key.id}"/>';
     </c:forEach>