Posts

jQuery tmplItem and no ids

tmplItem() works even without ids. To get the current data:

$(this).tmplItem().data;
```If you want to remove, just invoke the ajax and remove with [$.parents](http://api.jquery.com/parents/):

$(this).parents(“li”).remove();


##### Updating data inside tmplItems

If you want to achieve some fancy dependency tracking, consider [knockout.js](http://knockoutjs.com/). But if you just want to update the data object inside a tmplItem, just change the object and call update:

var t = $(this).tmplItem(); var obj = t.data; obj.Address = “hello avenue”; t.update();

read more
Posts

Update list items with listdata.svc

In one of my previous posts I showed how to retrieve data from listdata.svc with jQuery $.getJSON method. Getting data is very simple, listdata.svc provides a powerful restful interface with filtering, expanding and other features. Read the best and short introduction to listdata.svc by Suneet Sharma or a more detailed and technical article about filters, functions and operators by Mike Flasko at Microsoft with short examples here. Now back to listdata.svc in the SharePoint environment. Corey Roth provides a good images and sample results. For REST the “http verbs” are very important: GET, POST, PUT, DELETE.. SharePoint RESTful interface defines these verbs like that:

read more
Posts

The cleanest auto resize for a textarea

The cleanest way to auto-resize a textarea while typing (like wall post on Facebook) is George Papadakis solution. It uses only standard javascript and provides eventlisteners for IE (attachEvent) and other browsers (addEventListener):

window.onload = function () {
  var t = document.getElementsByTagName('textarea')[0];
  var offset = !window.opera ? (t.offsetHeight - t.clientHeight) : (t.offsetHeight
    + parseInt(window.getComputedStyle(t, null)
      .getPropertyValue('border-top-width')));
  var resize = function (t) {
    t.style.height = 'auto';
    t.style.height = (t.scrollHeight + offset) + 'px';
  }
  t.addEventListener && t.addEventListener('input',
    function (event) {
      resize(t);
    });
  t['attachEvent'] && t.attachEvent('onkeyup',
    function () {
      resize(t);
    });
}

Other solutions are jQuery.fn.autoResize, jQuery.autogrow, elastic.

read more
Posts

javascript load callback for UpdatePanel

Using asp:UpdatePanel isn’t so easy with jQuery(document).ready() or jQuery(window).load(). The jQuery selectors can’t find elements which are not shown in the beginning. All other elements which are loaded dynamically are difficult to catch. I found a solution in forums.asp.net. A user called germanz creates an jQuery event listener AjaxReady, he uses the ASP.NET built-in PageRequestManager. If there only few usages of it it can be invoked directly from a PageRequestManager instance:

read more
Posts

jQuery UI Datepicker

As an alternative to asp:Calendar we can use the fancy jQuery UI Datepicker:

$(document).ready(function () {
	$.datepicker.setDefaults($.datepicker.regional\["sv"\]);
	$("#").datepicker({
		changeMonth: true,
		changeYear: true,
		yearRange: "-120:+0" 
	});
});
```I found this a much simple and best solution for an [birthdate input](http://stackoverflow.com/questions/339956/whats-the-best-ui-for-entering-date-of-birth). We can set [international options](http://stackoverflow.com/questions/1865091/jquery-datepicker-language-problem), [year range](http://stackoverflow.com/questions/269545/jquery-datepicker-years-shown), [year](http://stackoverflow.com/questions/3164898/jquery-ui-datepicker-next-and-previous-year) and [month navigation](http://jqueryui.com/demos/datepicker/dropdown-month-year.html). Other options I have tried are asp:Calendar, ajaxtoolkit:CalendarExtender and DateJs. jQuery UI is the most simple much more than datepicker and works smoothily with SharePoint.
read more
Posts

Push a copy of an object to client

To reduce postbacks and database calls, a copy of the current object(s) can be pushed down to the client in JSON format. Say a webpart renders information about a person, another webpart shows related information which is retrieved dynamically (like web services). Instead of getting the current person from the database in the second webpart again, we can reuse the same person object from the first webpart. To do so we must provide a DataContract for the Person class:

read more
Posts

json serializer in Sharepoint

There is a very handy JSON lib for serializing javascript objects. It is hosted on github under douglas crockford. Download json2.js and serialize with JSON.stringify function: EDIT: There is actually this function in core javascript. It exists since javascript 1.7 and ecmascript 5. So you don’t have to add anything to get this functionality:

var t = { name: "dev", city: "new york" };
JSON.stringify(t);
```There are actually built-in goodies for serializing javascript objects in [ASP.NET](http://msdn.microsoft.com/en-us/library/bb310857.aspx): Sys.Serialization.JavaScriptSerializer.serialize

var t = { name: “dev”, city: “new york” }; Sys.Serialization.JavaScriptSerializer.serialize(t);

read more
Posts

Load Profile Image with javascript

See a great post in “Learning Sharepoint” with an example how to get a picture of user with Client Object Model and javascript.

read more
Posts

jQuery timeago and the localization

jQuery timeagoIf you have used SPUtility.TimeDeltaAsString you must know how useful it is. There is also the jQuery plugin that can perform counting of time deltas and (!) translate it. jQuery timeago is available for many languages, Swedish among others:

// Swedish
jQuery.timeago.settings.strings = {
  prefixAgo: "för",
  prefixFromNow: "om",
  suffixAgo: "sedan",
  suffixFromNow: "",
  seconds: "mindre än en minut",
  minute: "ungefär en minut",
  minutes: "%d minuter",
  hour: "ungefär en timme",
  hours: "ungefär %d timmar",
  day: "en dag",
  days: "%d dagar",
  month: "ungefär en månad",
  months: "%d månader",
  year: "ungefär ett år",
  years: "%d år"
};
```The code is hosted on [Github](https://github.com/rmm5t/jquery-timeago). In order the time deltas to be localized in SharePoint a ScriptLink has to be used:

<SharePoint:ScriptLink ID=“timeagoLanguage” runat=“server” Language=“javascript” Name=“jquery.timeago.lang.js” Localizable=“True” LoadAfterUI=“True” OnDemand=“False” ></SharePoint:ScriptLink>

read more
Posts

Filtering in javascript

The simplest and the best way to filter an array is to extend the Array.prototype as described here:

if (!Array.prototype.filter) {
    Array.prototype.filter = function (func) {
        var len = this.length;
        if (typeof func != "function")
            throw new TypeError();

        var res = new Array();
        var thisp = arguments\[1\];
        for (var i = 0; i < len; i++) {
            if (i in this) {
                var val = this\[i\];
                if (func.call(thisp, val, i, this))
                    res.push(val);
            }
        }

        return res;
    };
}

```Then let's filter on [titles](/2011/11/21/sorting-dates-in-javascript/ "See an example for Sorting with Titles"), which [start with](http://stackoverflow.com/questions/646628/javascript-startswith "See the solution for startsWith in javascript on Stackoverflow") "N":

function startsWithN(element, index, array) { return element.toLowerCase().indexOf(“n”) == 0; }

read more