$.getJSON, jQuery.tmpl and _vti_bin

By Anatoly Mironov

Javascript is very fast, responsive and unburdens the cpu at the server. Here I show a little example how to use jQuery.getJSON, jQuery.tmpl (wonderful plugin for rendering repeating data, repo hosted on Github) and REST-based service listdata.svc from /_layouts/_vti_bin/ folder. For this example I created a generic list “Contacts”, added two text fields Name and Phone. Add some phone numbers and try to go to /_vti_bin/ListData.svc/Contacts If you get 404-error, install a ADO.NET Data Services v1.5 CTP2, as described at dotnetmafia. If you want to know more about how to sort and filter, skip and limit results, read more at nothingbutsharepoint. If you encounter problems, follow Michaël’s blog post and download and install Windows6.1-KB976127-v6-x64.msu (if you have Windows Server 2008 R2), or NDP35SP1-KB976126-v2-x64.exe (if you have Windows Server 2008). After installing the version of the System.Data.Services.dll file is 3.5.30729.5004 (Windows Server 2008 R2), and 3.5.30729.4466 (Windows Server 2008). Allright, the remainder is pure javascript. In order to get it working you have to run the script from the same domain, meaning you can’t run javascript to retrieve the data from a html-file from your home folder. Create a webpart and add it to your page.

<script type="text/javascript"
	src="http://code.jquery.com/jquery-latest.min.js">
</script>

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

<script id="contactTemplate" type="text/html">
    <div>
        Name: {{= Name }} <br>
        Phone: {{= Phone }}
    </div>
</script>

<script type="text/javascript">
function loadContacts() {
    $.getJSON("http://dev/\_vti\_bin/listdata.svc/Contacts",
        {},
        function (data) {
            $("#contactTemplate")
                .tmpl(data.d.results)
                .appendTo("#contactContainer");
        }
    );
}

</script>
<div id="contactContainer"></div>
<input type="button" value="click to load"
	onclick="javascript:loadContacts();"/>

Now, when you click on the button, you should see something like this: That’s all. Just a simple intro to listdata.svc, jQuery.tmpl and jQuery.getJSON. You have all the freedom to decide, when to load, how often to update, the design and much more. Another approaches are an XsltListViewWebpart with custom xsl style and ajax settings, SPServices which I will  write about in my next posts.

Comments from Wordpress.com

Josh - Jan 1, 2013

Just what I am looking for. Is there a way to make it part of a table? It doesn’t seem to be rendering right for me. Here’s what I am trying to do: Column1 Column2 {{= Title }} {{= Convener }} It seems to render the body separate from the headings though. Thanks!

Whoops. Seemed to lose the code I pasted. Basically, I had the table and table head tags, then scripted in the table row tags. These seem to render separately. Not sure how to get this to render properly. After that, my next mission is to use the DataTables library to display the results.

Hi Josh! Cool that it was what you was looking for. This can absolutely be part of a table. The template should then be a table row (tr), contain cells (td) and the result of templating should be placed inside a table tag (or tbody). Check out this example: http://jsfiddle.net/mirontoli/sM5DF/

I have a small question on how to call the service when requires User name and Password.

Hi Chandresh, it is actually a big question. Take a look at this post: http://blogs.technet.com/b/speschka/archive/2010/09/25/retrieving-rest-data-in-a-claims-based-auth-site-in-sharepoint-2010.aspx