Smarty burst with html tags in Script

Question

I'm using blueimp-jquery-file-upload with smarty and as blueimp uses the strange script tags having html tags in the script and it conflict with the smarty engine, and as the result I'm getting the script malfunction.

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

Here is the script tag used for uploading

But when it render, it doesn't come in the right order, I've tried to change the delimiter but still it doesn't work

Here is the rendered html

Please anyone tell me how can I fix it, when I put some other JS instead of blueimp upload script it works fine.

Even this doesn't work

{literal}
<script id="template-upload" type="text/x-tmpl">
var a = 3;
<div  class="B">sdfsdfs</div>
 var j = 5;
<div class="A"></div>
</script>
{/literal}

Answer 1

This BlueImp plugin uses another jQuery plugin called Templates engine to generate HTML from JavaScript. They happen to use the same syntax as Smarty which seems to be breaking your code. The BlueImp plugin, however, allows you to override this template language by manually defining the HTML as a plugin option. Your JavaScript would look something like this:

$('#fileupload').fileupload({
    filesContainer: $('#upload_files_container'),
    uploadTemplateId: null,
    downloadTemplateId: null,
    uploadTemplate: function (o) {
        var rows = $();
        $.each(o.files, function (index, file) {
            var row = $('<tr class="template-upload fade">' +
                '<td class="preview"><span class="fade"></span></td>' +
                '<td class="name"></td>' +
                '<td class="size"></td>' +
                (file.error ? '<td class="error" colspan="2"></td>' :
                        '<td><div class="progress">' +
                            '<div class="bar" style="width:0%;"></div></div></td>' +
                            '<td class="start"><button>Start</button></td>'
                ) + '<td class="cancel"><button>Cancel</button></td></tr>');
            row.find('.name').text(file.name);
            row.find('.size').text(o.formatFileSize(file.size));
            if (file.error) {
                row.find('.error').text(
                    locale.fileupload.errors[file.error] || file.error
                );
            }
            rows = rows.add(row);
        });
        return rows;
    },
    downloadTemplate: function (o) {
        var rows = $();
        $.each(o.files, function (index, file) {
            var row = $('<tr class="template-download fade">' +
                (file.error ? '<td></td><td class="name"></td>' +
                    '<td class="size"></td><td class="error" colspan="2"></td>' :
                        '<td class="preview"></td>' +
                            '<td class="name"><a></a></td>' +
                            '<td class="size"></td><td colspan="2"></td>'
                ) + '<td class="delete"><button>Delete</button> ' +
                    '<input type="checkbox" name="delete" value="1"></td></tr>');
            row.find('.size').text(o.formatFileSize(file.size));
            if (file.error) {
                row.find('.name').text(file.name);
                row.find('.error').text(
                    locale.fileupload.errors[file.error] || file.error
                );
            } else {
                row.find('.name a').text(file.name);
                if (file.thumbnail_url) {
                    row.find('.preview').append('<a><img></a>')
                        .find('img').prop('src', file.thumbnail_url);
                    row.find('a').prop('rel', 'gallery');
                }
                row.find('a').prop('href', file.url);
                row.find('.delete button')
                    .attr('data-type', file.delete_type)
                    .attr('data-url', file.delete_url);
            }
            rows = rows.add(row);
        });
        return rows;
    }
});

See their documentation. This would allow you to generate HTML without using the Smarty syntax.