Best Practices - JQuery

This space is for Best practices and various do & don'ts while writing JQuery code. (please drop comments if you (like)/(don't agree with) them or if you would like to contribute to the list)

Even before we start,first question we should answer is

In what cases we should be creating a plugin and in what cases we can simply write code in the page to do all the cool stuff?
In my view one should write a plugin if-

1. There are multiple functions required to be called to achieve one's requirement.Eg we need to convert a table to a grid, now this might require ajax functionality to get the data ,we might require functions to sort, filter etc and hence we should be writing a plugin for this. Now in other case in which we simply need to hide or show an element on click of a button , in that case we don't need to write a plugin for this.

2. In case we might want to extend the functionality in future. Again taking earlier example we might want to add filter/sorting etc to the table to grid functionality , in that case a plugin gives us better way to manage the code.

3. In case we may have various dynamic options which may change how a particular functionality works.In that case its always good to write a plugin and make use of default settings and then override those defaults by providing options while calling the plugin

4. Reusable Code : In case you would want to use the same bit of code across multiple pages/sites, its always good to code the functionality in a plugin and use it anywhere you want, rather than copy pasting the same bit of code again and again on multiple pages.


References :
http://docs.jquery.com/Plugins/Authoring
http://docs.jquery.com/
http://api.jquery.com/


note : i will be updating this post continuously as the scope for the subject is too big to be written in one go.

Search elements with custom attributes

Lately someone on asp.net forums wanted help for searching elements with custom attributes
just incase you have similar requirement -

<script type="text/javascript">
       $(document).ready(function () {
           var searchText = "a";  //change this as per required
           String.prototype.startsWith = function (str) {
               return (this.match("^" + str) == str)
           }
           var divs = $("div").filter(function () {
               var elem = $(this);
               var validElem = false;
               $(elem.get(0).attributes).each(function () {
                   var node = this.nodeName;
                   if (node.startsWith(searchText) == true) {
                       validElem = true;
                       return false;
                   }
               });
               return validElem;
           });   
 //now  following will return you number of divs having custom attributes starting with "a"       
 var length = divs.length;        
 });
   </script>

.net and JQGRID

Lately one of the asp.net forum user had issues with .net and jqgrid
Thread link : http://forums.asp.net/t/1624546.aspx

anyone else who needs a reference for similar requirement , have a look at the link

BlinkMe - Blink elements

Sometimes we have required to have the elements blinked on some events and then detach it on some event

Following script will help achieve that

// Done by Anirudh Gupta
//http://mykbdump.blogspot.com/
(function ($) {

$.fn.blinkme = function (options) {

var defaults = {
bordereffect: false,
bordercolor: 'red',
backgroundeffect: true,
backgroundcolor: 'yellow',
blinkinterval: 400,
eventstoattach: 'focus',
eventstodetach: 'blur'
};
options = $.extend(defaults, options);
return this.each(function () {
var elem = $(this);
var intervalobj = null;
var bordercolor = elem.css("border-color");
var bgcolor = elem.css("backgroundColor");
elem.bind(options.eventstoattach, function () {
var blinked = false;
intervalobj = setInterval(function () {
if (blinked == true) {
elem.css({
'backgroundColor': bgcolor,
'border-color': bordercolor
});
blinked = false;
}
else {
if (options.bordereffect == true) {
elem.css({
'border-color': options.bordercolor
});
}
if (options.backgroundeffect == true) {
elem.css({
'backgroundColor': options.backgroundcolor
});
}
blinked = true;
}
}, options.blinkinterval);
});
elem.bind(options.eventstodetach, function () {
if (intervalobj) {
clearInterval(intervalobj);
elem.css({
'backgroundColor': bgcolor,
'border-color': bordercolor
});
}
});
});
}

})(jQuery);

Create Activity Feed Event by Non Admin Users

To Start with i was really excited about Activity Feed Stuff Sharepoint 2010 is providing but then when i tried using object model i realised SPServiceContext doesnt support impersonation directly. It requires HttpContext to be impersonated so that a non User Profile Admin User can also create Events .After lots of googling and modifying/updating the logic a bit , just want to share how i did this

SPServiceContext poweredCtx = null;
SPUser currentUser = SPContext.Current.Web.CurrentUser;
HttpContext currentHttpContext = HttpContext.Current;
try
{
Guid siteId = SPContext.Current.Site.ID;
SPSecurity.RunWithElevatedPrivileges(delegate()
{
using (SPSite aSite = new SPSite(sampleSite))
{
using (SPWeb web = aSite.OpenWeb())
{
SPServiceContext currentCtx = SPServiceContext.Current;
SPUser user = web.CurrentUser;
web.AllowUnsafeUpdates = true;
/*
* Impersonate here ....
*/
HttpRequest request = new HttpRequest("", web.Url, "");
HttpContext.Current = new HttpContext(request, new HttpResponse(new StringWriter(CultureInfo.CurrentCulture)));
HttpContext.Current.Items["HttpHandlerSPWeb"] = web;
WindowsIdentity wi = WindowsIdentity.GetCurrent();
typeof(WindowsIdentity).GetField("m_name", BindingFlags.NonPublic | BindingFlags.Instance).SetValue(wi, user.LoginName);
HttpContext.Current.User = new GenericPrincipal(wi, new string[0]);
WindowsIdentity wi2 = WindowsIdentity.GetCurrent();
poweredCtx = SPServiceContext.GetContext(HttpContext.Current);

m_UPM = new UserProfileManager(poweredCtx);
/*
* Create Events here and publish them
*/
}
}
});
}
finally
{
//undo the impersonated httpcontext very much required
HttpContext.Current = currentHttpContext;
WindowsIdentity wi = WindowsIdentity.GetCurrent();
typeof(WindowsIdentity).GetField("m_name", BindingFlags.NonPublic | BindingFlags.Instance).SetValue(wi, currentUser.LoginName);
HttpContext.Current.User = new GenericPrincipal(wi, new string[0]);
}


Big Thanks to STEVE CURRAN
Reference :http://sharepointfieldnotes.blogspot.com/2010/02/creating-sp2010-social-comments.html