“//” …“ //]]>” appears on the JSF page when “ //” are used to wrap a html template

Question

I'm trying to add the html5 drag 'n drop upload file on my JSF web page so i had to add this script into it :

<script type="text/html" id="template-uploads">

  //<![CDATA[


      <div data-bind="visible: showTotalProgress()">
            <div>
                <span data-bind="text: uploadSpeedFormatted()"></span>
                <span data-bind="text: timeRemainingFormatted()" style="float: right;"></span>
            </div>
            <div class="uploadimage-totalprogress">
                <div class="uploadimage-totalprogressbar" style="width: 0%;" data-bind="style: { width: totalProgress() + '%' }"></div>
            </div>
        </div>
        <div data-bind="foreach: uploads">
            <div class="uploadimage-upload" data-bind="css: { 'uploadimage-uploadcompleted': uploadCompleted() }">
                <div class="uploadimage-fileinfo">
                    <strong data-bind="text: fileName"></strong>
                    <span data-bind="text: fileSizeFormated"></span>
                    <span class="uploadimage-progresspct" data-bind="visible: uploadProgress() < 100"><span data-bind="text: uploadSpeedFormatted()"></span></span>
                </div>
                <div class="uploadimage-progress">
                    <div class="uploadimage-progressbar" style="width: 0%;" data-bind="style: { width: uploadProgress() + '%' }"></div>
                </div>
            </div>
        </div>

    //]]>
    </script>

This script acts as a template required for some file knockout.js which is part of the said html5 plugin and The id "template-uploads" is required for knockout to reference the template. if i unwrap the code by taking out the script tag i get this error :

Uncaught Error: Cannot find template with ID template-uploads

So i cannot resove this problem by just unwrapping the code.

if i take out the CDATA tag i get this error on the browser console :

The value of attribute "data-bind" associated with an element type "span" must not contain the '<' character.

Now the problem is that the JSF page renders unwanted “//” …“ //]]>” caracters around components generated by the script code as can be seen here

possible duplicate of ["//" ......" //\]\]>" appears on the page when " //<!\[CDATA\[ " ....."//\]\]>" are used to wrap a JS code](http://stackoverflow.com/questions/19860518/appears-on-the-page-when-cdata-are-us) — nemesv, Nov 08 '13 at 19:23

score 1 · Accepted Answer · answered Nov 08 '13 at 19:27

1

The problem is caused by this data-bind:

data-bind="visible: uploadProgress() < 100"

To get rid of it, just make a comparison function and replace the < with it:

var lt = function(v1, v2){
    return v1 < v2;
}

and:

data-bind="visible: lt(uploadProgress(), 100)"

And now you can drop the damned CDATA.

You could also make a computed in the viewmodel that does the same thing as the lt function.

answered Nov 08 '13 at 19:27

pax162

4,735
2
22
28

By the way, i added your lt function on the same page but on the header. The problem with CDATA happens only when it's written on the body. – Bardelman Nov 08 '13 at 19:54

“//” …“ //]]>” appears on the JSF page when “ //” are used to wrap a html template

1 Answers1