Using external composite jQuery Templates

Question

I wanted to try out jQuery Templates after being inspired by these 2 blog postings

Well, it's not quite working for me. If I have the template code on the page itself it works fine, but loading remotely isn't working for me. It appears the template is being retrieved ok. what is wrong here?

External template:

<script id="contactsTemplate" type="text/x-jquery-tmpl">
  <table class="contacts">
    <thead><tr><td class="ui-helper-hidden">Id</td><td>Name</td><td>City</td><td>State</td></tr></thead>
    <tbody>
    {{each contact}}
        {{tmpl($value) '#contactTemplate'}}
    {{/each}}
    </tbody>
  </table>
</script>

<script id="contactTemplate" type="text/x-jquery-tmpl">
    <tr><td class="ui-helper-hidden">${id}</td><td>${name}</td><td>${city}</td><td>${state}</td></tr>
</script>

On my page I'm using this code to retrieve and load the template:

var contacts = {
    contact: [
        { id: 1, name: "John Green", city: "Orange Beach", state: "AL" },
        { id: 2, name: "Sam Thompson", city: "Pensacola", state: "FL" },
        { id: 3, name: "Mary Stein", city: "Mobile", state: "AL" }
    ]
};

$("#ShowDataRemote").button().click(function() {
    $.get('templates/Contact.htm', function(template) {
        alert(template);
        $.tmpl(template, contacts).appendTo("body");
        alert("async done");
    });
});

Update:

A new blog post on Encosia explains this question and answer...

http://encosia.com/2010/12/02/jquery-templates-composite-rendering-and-remote-loading/

Dave Ward · Accepted Answer · 2010-11-30 16:26:07Z

3

That simple remote loading technique won't work with composite templates, since the string you're loading isn't a valid template itself. You can get it working by changing your click handler like this:

$("#ShowDataRemote").button().click(function() {
  $.get('templates/Contact.htm', function(template) {
    // Inject the template script blocks into the page.
    $('body').append(template);

    // Use those templates to render the data.
    $('#contactsTemplate').tmpl(contacts).appendTo("body");
  });
});

answered Nov 30, 2010 at 16:26

Dave Ward

60.7k14 gold badges119 silver badges134 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Homer Over a year ago

Why is the template invalid when retrieved by $.get(), but works fine locally?

Dave Ward Over a year ago

Because it's two separate templates, including the non-template x-jquery-tmpl script markup. The .tmpl(template, data) usage is only appropriate when you're feeding it a template string and nothing more.

Homer Over a year ago

I know I tried this workaround, but it didn't work for me. I must have had something wrong because it works now. Thanks!

Dave Ward Over a year ago

I wrote a new post specifically about this combination, if you're interested: encosia.com/2010/12/02/…

Homer Over a year ago

I know. I guess you missed it, but I updated the question with a link to your new post on this. Thanks for the article!

Community · Accepted Answer · 2017-05-23 12:31:08Z

0

You can compile template string as a "named template", like this reference: https://stackoverflow.com/a/4366280/1274343

edited May 23, 2017 at 12:31

CommunityBot

11 silver badge

answered Oct 16, 2012 at 13:45

Lazaro Fernandes Lima Suleiman

1,94220 silver badges31 bronze badges

Collectives™ on Stack Overflow

Using external composite jQuery Templates

Update:

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Update:

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related