Hi again,
I was playing around with a famous jQuery plugin : jQuery Cookies by carhartl and thought of why not make it compatible with Ning? so here am I again bringing you a bit advance tip :
How to use Cookies on Your network?
Wait, Cookies?
Not the ones that you can eat , Cookies are something we can use to store a string of data in it on user's browsers. Imagine it like a simple database , just its for individuals not everyone. For individuals refers to the cookie can be only accessed and used by Javascript if its on that individual's browser.
Unlike database (mysql) , it can be accessed by PHP code anytime , anywhere.
Well, Ning dosent allow us to play around with our network database so we have to resort to other saving methods.
One common example of usage of cookie is "Remember Me" function of every site login. Yep, that uses cookie to recognize you and log you in.
Here's more info about Cookies!
So, What do I need?
Hm..some eggs , butter and sugar..
Nah, we will be needing the jQuery Cookies plugin , your network's custom code and a little jQuery magic.
Let's Get It Started
1. Add the jQuery Cookies Plugin(converted to Ning x$) to your Custom Code:
<script type="text/javascript">
(function (x$, document, undefined) {
var pluses = /\+/g;
function raw(s) {
return s;
}
function decoded(s) {
return decodeURIComponent(s.replace(pluses, ' '));
}
var config = x$.cookie = function (key, value, options) {
// write
if (value !== undefined) {
options = x$.extend({}, config.defaults, options);
if (value === null) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = config.json ? JSON.stringify(value) : String(value);
return (document.cookie = [
encodeURIComponent(key), '=', config.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// read
var decode = config.raw ? raw : decoded;
var cookies = document.cookie.split('; ');
for (var i = 0, parts; (parts = cookies[i] && cookies[i].split('=')); i++) {
if (decode(parts.shift()) === key) {
var cookie = decode(parts.join('='));
return config.json ? JSON.parse(cookie) : cookie;
}
}
return null;
};
config.defaults = {};
x$.removeCookie = function (key, options) {
if (x$.cookie(key) !== null) {
x$.cookie(key, null, options);
return true;
}
return false;
};
})(jQuery, document);
</script>
You can also put the code inside a .js file (remember to remove the script tags !) > Upload it to your network as a file > copy the link > then paste this code into your custom code >
<script type="text/javascript" src="mycookiefilelinkhere.js"></script>
Just change mycookiefilelinkhere.js to the link you copied.
2. How to use:
For example , I want to create a cookie that remembers a user input , for example . their name.
HTML(Put it in your network text box):
<p>My Name : <input class="textfield" id="cookietext" type="text" /> <input class="button" id="cookiebutton" name="cookiebutton" value="Remember Me" type="button" /></p>
The above HTML crates a textbox and a button.
jQuery(Put this in custom code , below the jQuery plugin script of step 1)
<script type="text/javascript">
//This script remembers a user input
// variable declaration
var cookie;
var name;
cookie = x$.cookie('myname');
if(cookie == null || cookie == undefined || cookie == ''){
//cookie dosent exist so we wait user input
}
else{
//cookie exist , we put the cookie value in
x$('#cookietext').val(cookie);
}
if (typeof(x$) != 'undefined') {
//when cookie button is clicked
x$('#cookiebutton').click(function(){
//set name to user input myname
name = x$('#cookietext').val();
//get the cookie "myname"
cookie = x$.cookie('myname');
if(cookie == null || cookie == undefined || cookie == '')
{
//cookie does not exist , so we create one
x$.cookie('myname', name , { expires: 1, path: '/' });
alert('Remembered Your Name');
}
else
{
//cookie exists! we update the value
x$.cookie('myname', name);
alert('Updated Your Name');
}
});
}
else{}
</script>
Each line above is explained by the comment lines in grey color. You can learn more .cookie() functions here .
Make sure you add an x before $ as always!
So that's it , real easy and fun.
You can further exploit the power of cookies to your preference and also share it in the replies below too!
Replies
Nice tip. But here in Europe we have a bunch of 80-yr old bureaucrats in Brussels (that's in Belgium not UK where I live) who have decided that every website under European ownership must put obtrusive, pointless Cookie warnings on their sites. So this would actually create more work for us. One day, people who have run businesses will run the EU. Until then.....
SP