jQuery custom widgets: how can I include a html template?

Question

jQuery custom widgets: how can I include a html template?

3.6k Views Asked by Ramya At 18 April 2025 at 15:29

I must be missing something basic here but while developing a custom jQuery widget, how do we include a html template as part of the widget like we do with dojo custom widgets? Currently, my jQuery custom widget is generating the needed html in JavaScript and I am trying to take that out into a html template and include it with the custom widget. Thoughts?

Original Q&A

There are 2 best solutions below

Spencer Ruport On 23 May 2012 at 18:38

You don't really need a plugin or anything fancy to do what you're trying to do. Widgets can be created easily enough by simply creating html files with the appropriate markup and any jQuery calls you need. For example you can create a main page like this:

<html>
<head>
<!-- reference jquery library here -->
<script>
    $(document).ready(function() {
        $("#wdg1").load("mywidget.html");
        $("#wdg2").load("mywidget.html");
    });
</script>
</head>
<body>
<div id="wdg1"></div>
<div id="wdg2"></div>
</body>
</html>

And then your mywidget.html file will look something like:

<script>
    $(document).ready(function() {
        alert("Widget loaded.");
        // run whatever code you want here.
    });
</script>
<span>This span was loaded as a widget.</span>

**Prasenjit Kumar Nag** · Accepted Answer

You can have a look at Handlebars.js. THis is a jQuery template plugin and The syntax is pretty easy

Declare a Templae with script tag

  <script id="entry-template" type="text/x-handlebars-template">
    <div class="entry">
        <h1>{{title}}</h1>
        <div class="body">
           {{body}}
        </div>
    </div>
  </script>

Then fetch and compile that template like this

  var source   = $("#entry-template").html();
  var template = Handlebars.compile(source);

Then you can render that template by passing data for palceholders like this

 var context = {title: "My New Post", body: "This is my first post!"}
 var html    = template(context);

After this you will have the ful html in html variable which you can use in any jQuery DOM manipulation method like $.append.

Working Fiddle

jQuery custom widgets: how can I include a html template?

There are 2 best solutions below

Related Questions in JQUERY

Related Questions in TEMPLATES

Related Questions in JQUERY-PLUGINS

Related Questions in JQUERY-WIDGETS

Trending Questions

Popular # Hahtags

Popular Questions