Error when loading jsrender templates through AJAX

Question

I am trying to write a function to load templates in external files and use them with jsrender. However, I am getting this error:

TypeError: elem.getAttribute is not a function
[Break On This Error]   

value = $templates[elem.getAttribute(tmplAttr)];

I have some console.logs showing that the template was retrieved with ajax.

The basic code that causes the error is as follows:

var path    = 'templates/myTemplate.tmpl.html';
var data    = searchResultTeasers;
var target  = $('#results');

$.ajax({
    url     : path,
    aysnc   : false,
    success : function(template) {

        console.log("Path", path);
        console.log("Template", template);
        console.log("Data", data);

        //=============================================
        // Save Template with url as name for future
        //=============================================
        $.templates(path, template);

        //=============================================
        // Get Template String
        //=============================================
        var templateString  = $.templates(path);

        //=============================================
        // Render Template
        //=============================================
        renderedTemplate    = templateString.render(data);

        target.html(renderedTemplate);
    }
});

The error is in jsrender.js (line 829) and I think it's concerning the $.templates(path); but I don't understand what could be wrong.

Here is a link to a zip of the project: http://sdrv.ms/QsZpQT

I based my function on this article: http://msdn.microsoft.com/en-us/magazine/hh975379.aspx

I'm not sure if this is jsRender related at all but it still is blocking me from continuing and I would appreciate any help.

Indonesian

I suggest that you explain your problem here without asking people to download a ZIP file for you. People are wary of links. – Pegmatite

unless absolutely necessary (which should be very very rarely), you should not set async: false on ajax calls (and you also misspelled async). – Idola

Answer 1

So I just ran into this same error, myself (when trying to use external templates with jsrender, with the additional requirement of loading local files (meaning, I'm not using any server-side code)).

Unfortunately the MSDN article you link to (and that I went to initially, before stumbling onto this) and the accepted answer to Store a jsRender template in a separate js file, both recommend to use a $.get(), but you have to use $.ajax() both for the async parameter, and the dataType parameter, as explained below.

Here's how I got it to work:

1. Used $.ajax() and async: false (which you did in the example above, except you misspelled 'async' as 'aysnc').
2. Set the dataType: 'text' parameter to the ajax call. This part was key -- when I left out the dataType parm, the template contents returned as an [object XMLDocument], which $.templates choked on.

So the final code snippet that ended up working looks like this:

var file = 'views/my_template_file.html';
$.ajax({
    url: file,
    async: false,
    dataType: 'text',
    success: function(contents) {
        $.templates({my_template: contents});
        $('#myDiv').html(
            $.render.my_template()
        );
    }
});

Hope this helps somebody else down the line.

Acridine

You say in point 1 of your answer to set async: true yet your code snippet shows async: false. I assume async: false to be correct? Thanks. – Gallican

Answer 2

It's possible that the $.templates() method has changed since the referenced msdn article was written. Have you already looked at Store a jsRender template in a separate js file

Teryn