The problem
My jQuery template does not seem to be reading and/or building the html from the json that is passed to it. I cannot see, at which stage, the problem occurs.
The html
<li class="span3">
<div class="thumbnail">
<img src="<%= rsProd("Image") %>" alt="<%= rsProd("Description") %>" width="120" height="80" />
<div class="caption">
Order: <input type="text" style="width:100px" id="txtOrder-<%= rsProd("ImageID") %>-<%= rsProd("ImageOrder") %>" name="txtOrder-<%= rsProd("ImageID") %>-<%= rsProd("ImageOrder") %>" value="<%= rsProd("ImageOrder") %>" class="listorder" maxlength="5" />
<br />
<% if rsProd("ImageID") = rs("MainImage") then %>
<button id="btnSetMain-<%= rsProd("ImageID") %>-<%= rsProd("ImageOrder") %>" name="btnSetMain-<%= rsProd("ImageID") %>-<%= rsProd("ImageOrder") %>" class="btn btn-primary btn-inverse btnSetMain" disabled="disabled">Current</button>
<% else %>
<button id="btnSetMain-<%= rsProd("ImageID") %>-<%= rsProd("ImageOrder") %>" name="btnSetMain-<%= rsProd("ImageID") %>-<%= rsProd("ImageOrder") %>" class="btn btn-primary btnSetMain">Set main</button>
<% end if %>
<button id="btnOrderRemove-<%= rsProd("ImageID") %>-<%= rsProd("ImageOrder") %>" name="btnOrderRemove-<%= rsProd("ImageID") %>-<%= rsProd("ImageOrder") %>" class="btn btn-warning btnOrderRemove">Remove</button>
</div>
</div>
</li>
The jQuery template
<script id="imagesTemplate" type="text/x-jquery-tmpl">
<li class="span3">
<div class="thumbnail">
<img src="${image}" alt="${description}" width="120" height="80" />
<div class="caption">
Order: <input type="text" style="width:50px" id="txtOrder-${imageid}-${imageorder}" name="txtOrder-${imageid}-${imageorder}" value="${imageorder}" class="listorder" />
<button id="btnSetMain-${imageid}-${imageorder}" name="btnSetMain-${imageid}-${imageorder}" class="btn btn-primary btnSetMain ${extraclass}" ${disabled}>${text}</button>
<button id="btnOrderRemove-${imageid}-${imageorder}" name="btnOrderRemove-${imageid}-${imageorder}" class="btn btn-warning btnOrderRemove">Remove</button>
</div>
</div>
</li>
</script>
The returned JSON
{"result":
{"0": {
"imageurl": "\u002Fimages\u002Fmainimages\u002Fimage-01.jpg",
"description": "",
"imageid": 25,
"imageorder": 1,
"extracss": "",
"Disabled": "",
"text": "Set Main"
},
"1": {"imageurl": "\u002Fimages\u002Fmainimages\u002Fimage-02.jpg","description": "test","imageid": 17,"imageorder": 2,"extracss": "","Disabled": "","text": "Set Main"},
"2": {"imageurl": "\u002Fimages\u002Fthumbnails\u002Fimage-03.jpg","description": "test","imageid": 15,"imageorder": 4,"extracss": "","Disabled": "","text": "Set Main"},
"3": {"imageurl": "\u002Fimages\u002Fmainimages\u002Fimage-04.jpg","description": "","imageid": 24,"imageorder": 5,"extracss": "","Disabled": "","text": "Set Main"},
"4": {"imageurl": "\u002Fimages\u002Fmainimages\u002Fimage-05.jpg","description": "test","imageid": 16,"imageorder": 7,"extracss": "","Disabled": "","text": "Set Main"}
}
}
The jQuery code
The jQuery code that is run when the user clicks a button, this all works apart from the populating of the template
success:function(data, textStatus, jqXHR){
$('#prodThumbs').empty();
thumbs = data.items;
$.template('thumbsTemplate');
$('#imagesTemplate').tmpl(data.result).appendTo('#prodThumbs');
}
the data.result seems to be correctly producing the right json data from a correct json response, however the applying the data to the template doesn't seem to work
For completeness, i've attached the Classic ASP server side function.
set images = server.createObject("scripting.dictionary")
i = 0
While (NOT rsProd.EOF)
set image = server.createObject("scripting.dictionary")
image.Add "imageurl", rsProd("Image").value
image.Add "description", rsProd("Description").value
image.Add "imageid", rsProd("ImageID").value
image.Add "imageorder", rsProd("ImageOrder").value
if rsProd("ImageID").value = request.Form("main") then
image.Add "extracss", "btn-inverse"
image.Add "disabled", "disabled=disabled"
image.Add "text", "Current"
else
image.Add "extracss", ""
image.Add "Disabled", ""
image.Add "text", "Set Main"
end if
images.Add i, image
i = i + 1
rsProd.MoveNext()
Wend
result = (new JSON)("result", images, false)
rsProd.Close()
response.Write result
response.End
i'm using nested dictionaries to build an object that I can (and seems to) return correctly as JSON (using Michal Gabrukiewicz's ASP JSON utility class.)
I feel like i'm missing something really simple, however i've banged my head against the desk so much now, i can't see it.
The outcome
the html starts off as
<ul id="images">
<li><img src="/image/initial.jpg" alt="test" id="initial" /></li>
</ul>
the function
$('#images').empty();
leaves me with
<ul id="images">
</ul>
the function
thumbs = data.images;
correctly stores the json, but then function
$('#imagesTemplate').tmpl(thumbs).appendTo('#images');
still leaves me with
<ul id="images">
</ul>