CHUVASH.eu

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.