Posts
this.data in jQuery tmpl
In jQuery tmpl we can render properties with {{= SomeProperty }}. Here is an example:
<script type="text/javascript"> Writer = function (firstName, lastName) { this.firstName = firstName; this.lastName = lastName; }; Writer.prototype = { getFullName: function () { return this.firstName + " " + this.lastName; } }; $(document).ready(function () { var writers = \[\]; writers.push(new Writer("Gennady", "Ajgi")); writers.push(new Writer("Mišši", "Şeşpĕl")); writers.push(new Writer("Ille", "Tuktaš")); writers.push(new Writer("Kĕştenttin", "Ivanov")); $("#tmpl").tmpl(writers).appendTo("#writers"); }); </script> <script id="tmpl" type="text/html"> <li> {{= firstName }} {{= lastName }} </li> </script> <div id="writers"></div> ```It will render like: * Gennady Ajgi * Mišši Şeşpĕl * Ille Tuktaš * Kĕştenttin Ivanov But what if we want to access the object itself, not one of the properties.
Posts
Add stsadm folder to PATH in cmd
Tired to see C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\BIN\stsadm.exe? Wouldn’t be nice to run stsadm directly without going the 14 bin folder, or permanently changing %PATH%, well add this line to your script:
PATH=%PATH%;C:\\Program Files\\Common Files\\Microsoft Shared\\Web Server Extensions\\14\\BIN\\
Posts
format javascript date in ISO 8601
There is a solution in StackOverflow:
/\* use a function for the exact format desired... \*/ function ISODateString(d){ function pad(n){return n<10 ? '0'+n : n} return d.getUTCFullYear()+'-' + pad(d.getUTCMonth()+1)+'-' + pad(d.getUTCDate())+'T' + pad(d.getUTCHours())+':' + pad(d.getUTCMinutes())+':' + pad(d.getUTCSeconds())+'Z'} var d = new Date(); print(ISODateString(d)); // prints something like 2009-09-28T19:03:12Z ```But there is already a function for this: toISOString, it came with ecmascript 5. [Unfortunately, not all browsers support this](http://kangax.github.com/es5-compat-table/ "See the best comparision for ecmascript 5 support"), to solve this problem, we can provide our own prototype function for Date if it doesn't exist: if (!
Posts
Vertically align input text in IE
Well, input and IE aren’t friends, are they? I found a solution: not defining input height. The only shortcoming of this solution is…, well the solution itself, sometimes you need to define the input height. However, don’t set height, just define, font-size for text inside and padding, and it will be aligned:
input { font-size:20pt; padding: 10px; } Do you know some better ways to do it, Tell me.
Posts
accesskey
accesskey provides keyboard shortcuts. The restriction is that accesskey works well only with anchors. To bind keyboard shortcuts to other html elements, follow Scott Klarr. Here is an example of binding Alt and L:
var isAlt = false; function addShortcuts() { //add keyboard shortcut document.onkeyup = function (e) { if (e.which == 18) isAlt = false; }; document.onkeydown = function (e) { if (e.which == 18) isAlt = true; // Alt-L if (e.
Posts
javascript Module pattern
Want organize your js code in a kind of namespaces, or modules, then use the module pattern. I’ll take the dummy example for getting the current anchor. Let’s look how it would be if the prototype based approach is used:
var Contoso.Utils = function() {}; Contoso.Utils.prototype = { getCurrentAnchor: function() { var url = window.location; var anchor=url.hash; //anchor with the # character var anchor2=url.hash.substring(1); //anchor without the # character return anchor2; } }; var util = new Contoso.
Posts
Get the current anchor in javascript
To get the current anchor, we can use hash property::
var url = window.location; var anchor=url.hash; //anchor with the # character var anchor2=url.hash.substring(1); //anchor without the # character
Posts
Pass arguments from/to Modal Dialog
To pass arguments from a ModalDialog is easy. Provide some buttons and invoke close function:
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, someValue); ```The first argument is result, [it is a enumeration with three alternatives](http://msdn.microsoft.com/en-us/library/ff409060.aspx): cancel, invalid and OK. The value you pass back to the main window can be a simple string, or a complex javascript object. In this example I'll create a html element which is hidden (id="modal-form" [class="s4-die"](/2011/10/14/s4-die/)): Pass arguments to Modal Dialog and use it In options you pass to SP.
Posts
Get current user and handle a success callback
In my previous post I needed the accound id of the current user for posting new list items. To retrieve the id, we can push this to the client from the code behind, or get the current user using Client Object Model. To provide a more generic way we can write a js function which get the current user. But we must even provide some callback functionality, otherwise we don’t know if the operation was successful or not.
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.