CODEWITHSUNDEEP
thymeleafblueimp
riddle_me_this
riddle_me_this

Reputation: 9145

How do I get Thymeleaf to render this section of BlueImp template code?

I have some x-tmpl code from the BlueImp library to display on a Thymeleaf page. How can I have Thymeleaf render this? Unless I'm doing it wrong, it seems that CDATA and th:inline doesn't work here.

    <!-- The template to display files available for upload -->
    <script id="template-upload" type="text/x-tmpl">
            {% for (var i=0, file; file=o.files[i]; i++) { %}
                <tr class="template-upload fade">
                    <td>
                        <span class="preview"></span>
                    </td>
                    <td>
                        <p class="name">{%=file.name%}</p>
                        <strong class="color--error field--error"></strong>
                    </td>
                    <td>
                        <p class="size">Processing...</p>
                        <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
                    </td>
                    <td>
                        {% if (!i && !o.options.autoUpload) { %}
                            <button type="submit" class="btn btn--success btn--lg start" id="uploadPaystub" name="_eventId_uploadStub" style="padding: 2px;">
                                <span class="btn__text type--uppercase">
                                    Start
                                </span>
                            </button>
                        {% } %}
                        {% if (!i) { %}
                            <button class="btn btn--warning btn--lg type--uppercase cancel">
                                <span class="btn__text">
                                    Cancel
                                </span>
                            </button>
                        {% } %}
                    </td>
                </tr>
            {% } %}
    </script>

To paraphrase this external link, it seems like one solution was to just use Velocity for the block and use utext in Thymeleaf to display it. Is there a better way than resorting to another library altogether?

Upvotes: 0

Views: 449

Answers (4)

Dadmand
Dadmand

Reputation: 135

<script id="template-upload" type="text/x-tmpl">
/*<![CDATA[*/
    {% for (var i=0, file; file=o.files[i]; i++) { %}
        <tr class="template-upload fade">
            <td>
                <span class="preview"></span>
            </td>
            <td>
                <p class="name">{%=file.name%}</p>
                <strong class="color--error field--error"></strong>
            </td>
            <td>
                <p class="size">Processing...</p>
                <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
            </td>
            <td>
                {% if (!i && !o.options.autoUpload) { %}
                    <button type="submit" class="btn btn--success btn--lg start" id="uploadPaystub" name="_eventId_uploadPaystub" style="padding: 2px;">
                        <span class="btn__text type--uppercase">
                            Start
                        </span>
                    </button>
                {% } %}
                {% if (!i) { %}
                    <button class="btn btn--warning btn--lg type--uppercase cancel">
                        <span class="btn__text">
                            Cancel
                        </span>
                    </button>
                {% } %}
            </td>
        </tr>
    {% } %}
/*]]>*/
</script>

Upvotes: 1

Metroids
Metroids

Reputation: 20477

Does this work? It appears that blueimp templates ignore html comments, and the <![CDATA[ ]]> sections allow thymeleaf to ignore the invalid characters.

<script id="template-upload" type="text/x-tmpl">
<!-- <![CDATA[ -->
    {% for (var i=0, file; file=o.files[i]; i++) { %}
        <tr class="template-upload fade">
            <td>
                <span class="preview"></span>
            </td>
            <td>
                <p class="name">{%=file.name%}</p>
                <strong class="color--error field--error"></strong>
            </td>
            <td>
                <p class="size">Processing...</p>
                <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
            </td>
            <td>
                {% if (!i && !o.options.autoUpload) { %}
                    <button type="submit" class="btn btn--success btn--lg start" id="uploadPaystub" name="_eventId_uploadPaystub" style="padding: 2px;">
                        <span class="btn__text type--uppercase">
                            Start
                        </span>
                    </button>
                {% } %}
                {% if (!i) { %}
                    <button class="btn btn--warning btn--lg type--uppercase cancel">
                        <span class="btn__text">
                            Cancel
                        </span>
                    </button>
                {% } %}
            </td>
        </tr>
    {% } %}
<!-- ]]> -->
</script>

Upvotes: 1

Tapas
Tapas

Reputation: 1193

I have done this using ajax call to javascript file. After ajax call I encoded the response in order to avoid js execution. After encoding just insert in any element.

Upvotes: 1

Metroids
Metroids

Reputation: 20477

Hmm, that is a tricky one... I agree with the original author (it appears impossible to put that javascript template directly in a thymeleaf template). That being said, you don't need velocity for this case. I would just put the contents of the javascript in the src/main/resources/javascript/upload.js and then add the contents to the model (no need to parse it with velocity -- just read it directly from that file). I have my own utility, but it should be easy to get working:

// Controller
model.put("upload", Utilities.resourceToString("javascript/upload.js"));

// Thymeleaf template
<script id="template-upload" type="text/x-tmpl" th:utext="${upload}" />

Upvotes: 2

Related Questions