Question

I’m trying to use this script from Github at https://github.com/blueimp/jQuery-File-Upload

The script has js codes like

<script id="template-upload" type="text/html">
    {% for (var i=0, files=o.files, l=files.length, file=files[0]; i<l; file=files[++i]) { %}
        <tr class="template-upload fade">
            <td class="preview"><span class="fade"></span></td>
            <td class="name">{%=file.name%}</td>
            <td class="size">{%=o.formatFileSize(file.size)%}</td>
            {% if (file.error) { %}
                <td class="error" colspan="2"><span class="label important">Error</span> {%=fileUploadErrors[file.error] || file.error%}</td>
            {% } else if (o.files.valid && !i) { %}
                <td class="progress"><div class="progressbar"><div style="width:0%;"></div></div></td>
                <td class="start">{% if (!o.options.autoUpload) { %}<button class="btn primary">Start</button>{% } %}</td>
            {% } else { %}
                <td colspan="2"></td>
            {% } %}
            <td class="cancel">{% if (!i) { %}<button class="btn info">Cancel</button>{% } %}</td>
        </tr>
    {% } %}
    </script>

• Here, what does {% or %} mean?
• Why does the script tag has got an id? What is its use, I’ve never
  seen it anywhere before?
• What does script type="text/html" mean? I usually have been using
  type="text/javascript" all the while.

Answer 1

Nothing, you’re not writing javascript, you’re just writing something that looks a lot like javascript.

Notice the line

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

If you were writing javascript the type would be text/javascript (or in html5 you can just omit the type as that is assumed).

So in answer to your three questions:

• It seems to be part of the templating language you are using meaning is “evaluate the bit of code inside {% ... %} as if it were javascript.”
• There is nothing special about id, that is just a part of xml. The same way as you can reference any DOM node by id (getbyId(“template-upload”), or “#template-upload”)), you can also reference this script block – it is just part of the DOM just like <div> and <input> elements are.
• “text/html” is just saying “this block type is likely html” if it was “text/javascript”, the browser would just attempt to execute it as JS and throw an error, this way, the templating engine gets a chance to grab that node and do stuff to it to turn it into true html.