Current status of the Ning Platform is always available on the Ning Status Blog.

NC for Hire

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">

/*!
* jQuery Cookie Plugin v1.3
*
* Copyright 2011, Klaus Hartl
* Dual licensed under the MIT or GPL Version 2 licenses.
*/

(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!

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Votes: 0
Email me when people reply –

Replies

  • NC for Hire

    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

This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

Pam Givens replied to Pam Givens's discussion
Landing Page
"What I meant to say, if I could spell:
I've attempted to create a landing page and have't had much…"
Dec 12
Pam Givens posted a discussion
I've attempted to crate a landing page and have't had much success.  I'd rather have one on my…
Dec 12
Luxury Residences updated their profile
Dec 6
Asumi Carol updated their profile
Dec 2
Shada Hotel updated their profile
Nov 29
Howard Sands replied to Mark Thorpe's discussion
NING is broken?
"I am not a techie, I don't understand the first thing about it, but have a HUGE problem with Ning…"
Nov 27
Howard Sands replied to Donna MacShoe's discussion
Ning Support phone number for my 20 yr old site
"I hope this helps
Ning  https://www.ning.com/contact-us/
1-855-233-6436 (USA/Canada Toll Free)…"
Nov 27
Donna MacShoe posted a discussion
I am completely locked out of my NING site that I have had for 20 years.  ladiesofthehat.org.  When…
Nov 27
Joven left a comment on Ning Networks en español
"Zzz..."
Nov 26
Ron updated their profile
Nov 25
Ron updated their profile photo
Nov 24
Mark Thorpe posted a discussion
I've run networks based on this platform in the past and never have I seen it in such dissarray as…
Nov 20
More…

Meanwhile, you can check our social media channels