Question

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>

Answer 1

Well I managed to fix this by using the following code, after nested dictionaries didn’t appear to work

arraySize = 0
arraySize = (rsProd.RecordCount - 1)
dim imageArrays 
redim imageArrays(arraySize)
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
    set imageArrays(i) = image 
    i = i + 1

rsProd.MoveNext()
Wend
result = (new JSON)("result", imageArrays, false)

rsProd.Close()
response.Write result
response.End

I managed to assign each image dictionary to an index in an array, and then converted that array to JSON. I had already previously tried this method before but failed at this step

set imageArrays(i) = image 

principally because i wasn’t using the ‘set’ keyword

so some credit to @SearchAndResQ for telling me to use array of dictionaries in the comments which i had previously tried, but this made me look back at it again.