Geeks With Blogs
Asif Maniar Software Engineer

At the recent Mix 2011 conference the datajs team talked about this new cross-browser JavaScript library that makes writing data centric web apps easier.

Its fairly simple to use and can be very powerful.

Here is a quick application I threw together using the library. The code uses datajs, jQuery, jQuery UI and jQuery templates.

Microsoft has an OData Service at http://live.visitmix.com/odata/Sessions which exposes all Mix sessions. I used this source to get a list of all sessions using the datajs library and bound them to a template using the templating library.

The below code uses the OData.read function to read the list of sessions and then binds the results to the sessionTemplate template.

//enable jsonp since this is a cross dom
OData.defaultHttpClient.enableJsonpCallback = true;
//read all sessions and bind to sessionsTemplate
OData.read("http://live.visitmix.com/odata/Sessions?$orderby=Title asc",
      function (data, request) {
       results = data.results;
              $("#sessionTemplate").tmpl(
              results,
              {
                  getTags: getTags
              }
).appendTo("#sessionList");
 

The getTags method is passed into the template so the tags can be loaded for each session when it renders.

function getTags(sessionId) {
       //get list of all tags for this session
       OData.read("http://live.visitmix.com/odata/Sessions(" + sessionId + ")/Tags",
        function (data, request) {
              //bind to the tagTemplate
              $("#tagTemplate").tmpl(data.results).appendTo("#" + sessionId);
         });
     return "";
 }
 

Here is the sessions template:

<script id="sessionTemplate" type="text/x-jquery-tmpl">
            <li><b><a href='http://channel9.msdn.com/events/mix/mix11/${SessionCode}' target="_blank">${Title}</a></b> <p>${Abstract}</p>
                <p id='${SessionID}'>
                                              //call the getTags method to get the tags html
                    Tags: {{html $item.getTags($item.data.SessionID)}}
                </p>
            </li>
        </script>
 
The Tags template: (links to channel9 page for that tag)
<script id="tagTemplate" type="text/x-jquery-tmpl">
   <a href='http://channel9.msdn.com/Events/MIX/MIX11?t=${TagValue}' target="_blank">${TagValue}</a>&nbsp;
</script>
 
The Tags section in the sessionList template invokes the getTags function passed to it which in turn makes a request using the OData library for all tags for the current session.

Example - tags for session with ID of 150: http://live.visitmix.com/odata/Sessions(150)/Tags

I also used the jQuery autocomplete plugin to create a autocompleted textbox so users can search for a session by title.

$("#searchTextbox").autocomplete({
  source: function (request, response) {
      response($.map(results, function (item) {
       if (item.Title.toLowerCase().indexOf($.trim(request.term.toLowerCase())) != -1) {
              return {
                        label: item.Title,
                        sessionId: item.SessionID
                      }
                  }
              }))
              },
        select: function (event, ui) {
        OData.read("http://live.visitmix.com/odata/Sessions(" + ui.item.sessionId + ")",
        function (data, request) {
                $("#sessionList").empty();
                $("#sessionTemplate").tmpl(data).appendTo("#sessionList");
                });
       }
}
 

The above code uses the source method of the autocomplete plugin to populate the list of sessions and then overrides the select method to bind to the selected session.

You can read more about the autocomplete plugin here.

Note: This isnt the most efficient way of loading data as it doesnt use paging, background fetching or local storage provided by HTML5 and datajs. Just wanted to demo the odata portion of the datajs library and how it can be used.

Hope to change this to use local storage in the future.

You may view the entire sample here: http://www.asifmaniar.com/Samples/Mix-2011-sessions-using-OData-and-datajs.aspx

 

 

 

 

 

 

Posted on Monday, April 18, 2011 5:16 PM jQuery , JavaScript , mashup , odata | Back to top


Comments on this post: Mix 2011 Session List using OData, datajs and jQuery

comments powered by Disqus

Copyright © Asif Maniar | Powered by: GeeksWithBlogs.net