CHUVASH.eu

CHunky Universe of Vigourous Astonishing SHarepoint :)

$.getJSON, jQuery.tmpl and _vti_bin

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.

Advertisements

5 responses to “$.getJSON, jQuery.tmpl and _vti_bin

  1. Josh 2013-01-07 at 19:32

    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!

    • Anatoly Mironov 2013-01-09 at 09:22

      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/

  2. Josh 2013-01-07 at 19:36

    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.

  3. Chandresh 2013-08-30 at 13:45

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Вула Чăвашла

VulaCV - Чăвашла вулаттаракан сайт

Discovering SharePoint

And going crazy doing it

Bram de Jager talking Office 365, SharePoint and Azure

My view and thoughts on Productivity and more.

My programming life

and everything in between

SharePoint Development Lab by @avishnyakov

It is a good place to share some SharePoint stories and development practices.

SharePoint Dragons

Nikander & Margriet on SharePoint

Paul J. Swider - RealActivity

RealActivity is a specialized healthcare services and solution advisory firm.

Mai Omar Desouki - Avid SharePointer

Egyptian & Vodafoner - Senior SharePoint Consultant

Cameron Dwyer | Office 365, SharePoint, Outlook, OnePlace Solutions

Office 365, SharePoint, OnePlace Solutions & Life's Other Little Wonders

paul.tavares

Me and My doings!

Share SharePoint Points!!

By Mohit Vashishtha

Jimmy Janlén "Den Scrummande Konsulten"

Erfarenheter, synpunkter och raljerande om Scrum från Jimmy Janlén

Aryan Nava

BigData and Blockchain expert in Toronto

SPJoel

SharePoint for everyone

SharePointRyan

Ryan Dennis is a SharePoint Solution Architect with a passion for SharePoint and PowerShell

SharePoint 2020

The Vision for a Future of Clarity

Aharoni in Unicode

Treacle tarts for great justice

... And All That JS

JavaScript, Web Apps and SharePoint

%d bloggers like this: