jQuery tmpl and JSP code not playing nicely

Question

I've been using the jQuery tmpl library for some projects and really liking it.

I'm not using it on a small project that needs to be in JSP, and things got strange. It is not working fully.

<script id="servicesRow" type="text/x-jquery-tmpl">
    <tr id="id_${id}">
        <td>${name2}<br />${id}</td>
        <td>${supported_roles}</td>
        <td><button class="edit">Edit</button></td>
        <td><button class="delete">Delete</button></td>
        <td><a href="#">Show clients</a></td>
    </tr>
</script>

I was trying to understand why no data was showing up. Turns out some kind of parsing is happening of text in the page that looks like ${foo}. So when I view source on my page all those elements have been replaced, like this:

<script id="servicesRow" type="text/x-jquery-tmpl">
    <tr id="id_">
        <td><br /></td>
        <td></td>
        <td><button class="edit">Edit</button></td>
        <td><button class="delete">Delete</button></td>
        <td><a href="#">Show clients</a></td>
    </tr>
</script>

Which is still usable as a template, but then jQuery tmpl can't do its job. I get lots of empty rows.

The syntax matches some documentation I've found for JSTL. But I've not, that I can tell, installed that. I'm developing on stock, current Tomcat on Windows 7 and building up an app in my webapps/ folder from scratch. I've not, that I can tell, enabled anything like this, and I'm surprised that bare ${} is getting parsed (as opposed to things more like <%= %>, which would be more common as from PHP or ASP and similar.

So my question: how do I turn off this parsing behavior for my jQuery tmpl templates? Globally, locally to the individual JSP, or escape it (I've tried extra braces, I've tried backslashes, I've tried various quotes). I think Ideally there would be something like:

<foo:stopParsingMyDollarSignsAndBracesPlease>
<script id="servicesRow" type="text/x-jquery-tmpl">
    <tr id="id_${id}">
        <td>${name2}<br />${id}</td>
        <td>${supported_roles}</td>
        <td><button class="edit">Edit</button></td>
        <td><button class="delete">Delete</button></td>
        <td><a href="#">Show clients</a></td>
    </tr>
</script>
</foo:stopParsingMyDollarSignsAndBracesPlease>

Any help or ideas are appreciated. Thanks!

Schlesien

Answer 1

The ${} notation is Expression Language. You can turn it off on a per-JSP basis by

<%@page isELIgnored="true" %>

Or on an application-wide basis by the following in web.xml:

<jsp-config>
    <el-ignored>true</el-ignored>
</jsp-config>

Or if you actually would like to use EL elsewhere in the JSP, then you just have to escape the ones in jQuery template by \. You'd really like to avoid the old fashioned scriptlets.

<tr id="id_\${id}">

Or you could just drop all that JS code in its own JS file (if supported by jQuery tmpl).

Stu

Oh man, I was putting the backslashes on the braces not the dollar sign. Of course that's more logical. I'll try the various configs. This gets me running again! thanks! – Schlesien

<%@page isELIgnored="true" %> is working great. What was empty is now full of data! – Schlesien

If you disable EL on a JSP or application wide basis, I'd wonder if your .jsp shouldn't actually better be a .html file. – Stu

BalusC, maybe. Still too soon to tell. I'm definitely not yet in "best practice land" as far as JSP. I'm very thankful to have stackoverflow available to quickly determine what's going on. – Schlesien

Answer 2

Use {{= variable_name}} instead of ${variable_name} in jQuery templates.

https://github.com/jquery/jquery-tmpl/issues/56

Cheslie

Answer 3

Turn off EL is not advisable,when the jsp page have other el ,and how do you deal with it, you can do it like this:

<script id="servicesRow" type="text/x-jquery-tmpl">
<tr id="id_{{= id}}">
    <td>{{= name2}}<br />${id}</td>
    <td>{{= otherInfo}}</td>
    <td><button class="edit">Edit</button></td>
    <td><button class="delete">Delete</button></td>
    <td><a href="#">Show clients</a></td>
</tr>

note:there is a space in the El,

Quiver

Answer 4

You can protect your "$" from JSP by quoting with a backslash.

In JSP, the "${}" construct is used to introduce an Expression Language ("EL") construct. For example, if there's a request attribute called "firstName", you can get the first name with:

<input type='text' name='firstName' value='${firstName}'>

Using the Expression Language is, in my opinion, about a billion times better than using that hideous "scriptlet" syntax (the "<%" stuff). Pages are much, much cleaner, and there's far lest cruft to debug. I have tot suspect that there are a whole lot of really old JSP instructional guides and textbooks floating around out there, because JSTL and the EL have been around for many years now.

Franko

I can see the usefulness, irritating that the syntax overlaps with jQuery tmpl, but maybe also useful. Thanks! – Schlesien

Answer 5

If you don't want to escape all your jQuery tags you can build a separated JSP with all your jQuery script and mantain this unique JSP protected with:

<%@page isELIgnored="true" %>

Then you can include this JSP where needed.

Ledeen

This is true, but is a duplication of @Stu 's answer. – Schlesien

It's not a duplication. It uses the same configuration, but with different principles. I suggest to create a concentration of tags in a unique page and reuse it when needed. – Ledeen