In this blog article I’ll show you how to use Cookies in jQuery for your SharePoint Designer 2010 no code applications.
With help of a cookie you can write information to the user’s
computer and this can be useful if you need to store stuff like visitors
preferences, for example if the user has checked a check box or not at
some page. Cookies can be very useful in many ways, but in some
situations you need to write such information to the server like a
database instead, cookies should not be used for critical information or
any kind of sensitive information especially at a public faced site.
However a cookie can be a great choice for many tasks in your front end
development.Some examples of the usefulness of a cookie
- Change color schemes
- Hide / Show elements at the page
- Resizing fonts, scale up or down
- Form, auto save inputs in fields, selected check box or radio button
- Accordion / tabs, remember last state of collapsed/opened
- Navigation, remember the last location
- Welcome message, for example if you want to show a popup only once at specific date at the start page.
Jquery.cookies gives a couple of options like:
- Expires
The lifetime for the cookie. You can use a number of days or a specific date. If omitted, the cookie is a session cookie - Path
Where the cookie is valid. If you want it to be valid at every site in the site collection, just use a slash /, if you want it to be valid at let’s say only the news site set e.g /news/
Get going
Let’s start with a simple example just to get going, the following example will set the top row to a red or green background color depending of which link you click. Let’s say you clicked at green one and then reload the page, the green background color will remain. If you restart the browser, the top row will be white again. This script do not have any expired date, therefore, the cookie will expire automatically when you close the browser.Let’s try this out:
Download jquery.cookies.js and create a reference to this file in your custom master, don’t forget to include an reference to latest jQuery API as well.
HTML
Put this somewhere in your custom master page
1
2
3
4
5
6
| <!-- Session --><div class="Wrapper"> <div class="Red">Red</div> <div class="Pipe">|</div> <div class="Green">Green</div></div> |
Put this in an external JS file referenced from your master page
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| $(document).ready(function() {// Click red$('.Red').click(function() {$('.Wrapper').css("background-color","red");$.cookie('Wrapper', 'red');});// Click green$('.Green').click(function() {$('.Wrapper').css("background-color","green");$.cookie('Wrapper', 'green');});// Cookiesvar Wrapper = $.cookie('Wrapper');if (Wrapper == 'red') {$('.Wrapper').css("background-color","red");};if (Wrapper == 'green') {$('.Wrapper').css("background-color","green");};}); |
Put this in an external CSS file referenced from your master page
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| .Wrapper{width:100%;height:16px;background-color:#fff;color:#000;}.Red{cursor:pointer;padding-left:5px;float:left;}.Green{cursor:pointer;float:left;}.Pipe{float:left;padding:0px 5px 0px 5px} |
1
| $.cookie('Wrapper-', 'Green-'); |
1
| $.cookie('Wrapper-', 'Green-', {path: '/', expires: 2}); |
1
| C:\Users\...\AppData\Local\Microsoft\Windows\Temporary Internet Files |
1
| Wrapper-Green-ecmtest67/108815182001923024639810215318430245996* |
How to use cookies in a Data View web part
If we take this a step further and try to use cookies in a typical news roller DVWP. In this example, If you click at the icon next to the header for a news item that section will disappear, a kind of ‘I Have Read This’ function. At the bottom of the web part there’s a reset link that will delete the cookie.
The HTML part of the DVWP, it’s important to use @ID for the id, classes and href as the script shows
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <div class="NewsRow {@ID}"><div class="NewsContentContainer"> <div class="NewsTitle"><div class="NewsHider"><a href="{@ID}" id="{@ID}"><img alt="" src="/Style%20Library/Custom/Images/IhaveReadThis.png" width="22" height="22" /></a></div><div class="NewsTitleInner"><a href="/news/Pages/{@LinkFilename}"><xsl:value-of select="@Title" /></a></div><div class="GeneralClearBoth"></div></div> </div><div class="NewsAuthorCreatedWrap"><span class="NewsAuthor">By <xsl:value-of select="@PublishingContact.title" />,</span> <span class="NewsCreated"><xsl:value-of select="@ArticleStartDate" /></span></div><div class="NewsContent"><xsl:call-template name="FirstNWords"><xsl:with-param name="TextData" select="$DescText"/><xsl:with-param name="WordCount" select="15"/><xsl:with-param name="MoreText" select="'...'"/></xsl:call-template></div></div> |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| jQuery(function ($) {var removedLinks = 'removedLinks',Options = {expires: 7,path: '/news'},c=$.cookie(removedLinks)||'#DebuggingCode'$(c).remove();$(".NewsHider a").click(function (e) {e.preventDefault();var LinkClass = '.'+ $(this).attr('id'),removeLinksClasses=c.split(',')$(LinkClass).remove()removeLinksClasses.push(LinkClass)c=removeLinksClasses.join(',') $.cookie(removedLinks, c, Options)});$('#NewsResetCookie').click(function(){$.cookie(removedLinks,'',{expires:-1,path:'/news'})})}); |
