jQuery template rendering

Question

I was trying to populate a jQuery template and append the result into a div, but I am getting an error. I just do not understand where the flaw is in my code. Can anyone rectify it? I am using jQuery version 1.4 (jquery-1.4.1.min.js).

Here is my full code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
.no_results
{
    width:547px;
    height:50px;
    overflow: hidden;
    text-align: center;
    margin-top: 25px;
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;  
    display:table-cell; 
    vertical-align:middle;
    background:none repeat scroll 0 0 #FFFFE0;
    border:1px solid #FFC978;
}
</style>

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var srchterm = 'Hello Sam';
var markup = "<ul><li><div class='no_results'><span>No results found for [${Name}] </span></div></li></ul>";

$("#showBtn").click(function () {
$("#SearchData").empty();
$.tmpl("movieTemplate", srchterm).appendTo("#SearchData");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:Button ID="showBtn" runat="server" Text="Change" /><br /><br />
<div id="SearchData"></div>
</form>
</body>
</html>

Are you getting any console errors? Have you narrowed down the cause of the problem at all? Can you create an example of jsfiddle for us? — Undefined
– Undefined, Commented Jul 23, 2012 at 10:25

soupy1976 · Accepted Answer · 2012-07-23 10:43:02Z

1

Is this what you are trying to achieve: http://jsfiddle.net/2efSV/

I've changed your call to $.tmpl from

$.tmpl("movieTemplate", srchterm).appendTo("#SearchData");

to

$.tmpl(markup, { "Name" : srchterm  }).appendTo("#SearchData");

The first parameter should be your template, and the second should be an object containing the data you're using in the template:

answered Jul 23, 2012 at 10:43

soupy1976

2,8452 gold badges29 silver badges36 bronze badges

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

2 Comments

Thomas Over a year ago

thanks but when i add template to SearchData div with fadein effect then nothing works. i wrote code like $.tmpl(markup, { "Name" : srchterm }).appendTo("#SearchData").fadeIn('slow'); can u tell me how to achieve fadein() effect here.

soupy1976 Over a year ago

You have to hide() the content you're appending first to achieve that - here you go JSFiddle

Collectives™ on Stack Overflow

jQuery template rendering

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related