Home/ Questions/Q 3306026
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T21:14:22+00:00

For jQuery template: http://api.jquery.com/category/plugins/templates/ I want to be able to dynamically load the templates

  • 0

For jQuery template:

http://api.jquery.com/category/plugins/templates/

I want to be able to dynamically load the templates from a server, rather than predefining it on the page.

The demos I saw on the projects are using predefined templates. After some research I found out that it is possible.

I try doing this and it doesn’t work:

<script src="child.html" type="text/x-jquery-tmpl"></script>

I tried doing this and it doesn’t work:

$(function () {
    $.get("child.html", function (data) {
        //Add template
        $.template("tmplChild", data);
    });

    //template binds before async call is done
    $.tmpl("tmplChild").appendTo("body");
});

And finally, I have get it down to the following hack:

so.html (This is the main page):

<html>
<head>
<title></title>
</head>
<body>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>

<script type="text/javascript" src="so.js"></script>

<script type="text/javascript">

    $(function () {
        initTemplates(templateReady);
    });

    function templateReady() {
        $.tmpl("tmplChild").appendTo("body");
    }

</script>
</body>
</html>

child.html (This is the child template)

<h1>Child Loaded</h1>

so.js (This is my hack for ajaxly loading the js templates)

function initTemplates(callback) {
    var templateUrl = "child.html";
    var templateName = "tmplChild";

    initTemplate(templateUrl, templateName, callback);
}

function initTemplate(url, name, callback) {
    var opts =
        {
            type: "GET",
            url: url,
            dataType: ($.browser.msie) ? "text" : "xml",
            success: function (data) {
                xmlCallback(data, name, callback);
            },
            error: function (x) {
                xmlCallback(x.responseText, name, callback);
            }
        }

    $.ajax(opts);
}

function xmlCallback(data, name, callback) {

    if (typeof data != "string") {
        if (window.ActiveXObject) {
            var str = data.xml;
            data = str;
        }
        // code for Mozilla, Firefox, Opera, etc.
        else {
            var str = (new XMLSerializer()).serializeToString(data);
            data = str;
        }
    }

    //only takes strings!
    $.template(name, data);

    callback();
}

And here’s what I don’t like about it.

  1. This doesn’t work on Chrome
  2. It seems like a lot of code just to load some template
  3. I lost the ability to use $(document).ready(). I must now put all my code in this templateReady() method to be “template safe”.

Is there a way around this?

Thanks,

Chi

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If the goal is to fetch a unique template each time you get data via ajax, then you might try fetching the template at the same time and include it in your data, that is if you have the luxury of modifying the returned object (anonymous object in .Net). Then you can store the template anywhere you want and you only need 1 ajax call for both the data and the template.

    • 0