• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1295
  • Last Modified:

Use JQuery to read cookie, filter, and insert result in element

Hi...

This will be used to insert a username into an element (by ID) if a username is found in a cookie.

1. If the cookie is detected, I want to filter out the username and display it in the HTML by ID
2. I also want to include a link to our account profile page
(so I need to be able to insert both the user name from the cookie and also a link)

If no cookie is detected (with the username present) then the page will simply display default content.

For example:

No cookie: Sign In or Register
Cookie w/username: Welcome Jon!  View account profile

I'd prefer to use the JQuery library since I'm already loading it, but don't mind using a JQ plugin.  I've found a few but I'm too much of a JS noob to make it work.

Here is a link to (what I think) is a viable JQ plugin:
http://code.google.com/p/cookies/wiki/Documentation


Soo....that means I'd need an entire solution (complete JS, etc)

Thanks for any help you can offer!
0
northlandadv
Asked:
northlandadv
  • 5
  • 3
1 Solution
 
ziffgoneCommented:
Attached is a jQuery cookie plugin. Download it and save it as "jquery.cookie.js". Upload this script to your web site then link to it like this:

<script type="text/javascript" src="/path/to/jquery.cookie.js"></script>

Now for the code to retrieve the cookie:


$(document).ready(function(){
   if($.cookie('username')){
       var user=$.cookie('username');
       $('#inputforuserid').val(user);
 
       // Inserts link to profile immediately after the username input:
 
       $('<a href="/path/to/profile.html">View Profile</a>').after($('#elementforuserid'));
 
       /* Alternatively you could add the link to a hidden div:
 
        $('#profilediv').append('<a href="/path/to/profile.html">View Profile</a>');
 
// Or if you have the profile link already placed but hidden, you could go with:
 
        $('#profilelink').show();
        // or fancy:
        $('#profilelink').fadeIn('slow');
 
 
       */
   }
});

Open in new window

0
 
northlandadvAuthor Commented:
Thank you!

So, just to clarify:

1. "username" is the name of my cookie.  I should replace this with my actual cookie name.
2. If I uncomment the hidden div area, I'd use "profilediv" as the div ID in the HTML location I'd like the variable data to appear?

0
 
northlandadvAuthor Commented:
Okay, so I see the potential but I'm having a tiny bit of trouble.  If I have to add a new script to the page, it will require a lot of updating.  Better to just add the JS to my exisiting files:

1. query.cookie.js I need to add to my JQuery main file, but I know there's something wrong with the syntax when I paste it in (lacking a character or an extra one) since it breaks my other scripts.  I didn't see an attached file you provided, so I downloaded the jquery.cookies.2.1.0 and used that.

2. I have a main.js file I used to insert the code to retrieve the cookie.  Can I just paste this on to the end of the JS file?

My biggest issue is that I'm not sure what the line endings are supposed to look like.  To many parenthesis, etc, and I'm sure this is the trouble.  The JQuery main file is easy to break!
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
ziffgoneCommented:
Sorry, I forgot to attach the file. it's now attached.

1. "username" is the name of my cookie.  I should replace this with my actual cookie name.

Correct, replace "username" with the actual cookie name.

2. If I uncomment the hidden div area, I'd use "profilediv" as the div ID in the HTML location I'd like the variable data to appear?

That's correct as well.

With the jquery.cookie.js file attached, you should be able to open your main jquery file, scroll all the way to the bottom and add two blank lines after the last parenthesis. Copy & Paste the contents of the jquery.cookie.js file below the two blank lines. If done correctly, it shouldn't cause any problems.

If you already have a $(document).ready() function in your main.js, simply add this code inside your current $(document).ready() function:


   if($.cookie('username')){
       var user=$.cookie('username');
       $('#inputforuserid').val(user);
 
       $('#profilediv').append('<a href="/path/to/profile.html">View Profile</a>');
   }

Open in new window

jquery.cookie.js.txt
0
 
ziffgoneCommented:
Also replace "#inputforuserid" with the actual ID of the username Input element.
0
 
northlandadvAuthor Commented:
Bah....now I see why nothing is working  :)  There's no accomodation for NO cookie!  I'm testing it without a cookie, and it should display something but it's not.  I've been pulling my hair out trying to figure it out.

I need some kind of ELSE statement, but don't know how to sneak it in.
0
 
northlandadvAuthor Commented:
BLAAHAH!!!  It finally works....

      else
         {
      $('#userinfo').append('NO COOKIES');
      }

Anything inherently wrong with this?  It seems to work, I just want to make sure I'm no sabotaging something else..
0
 
northlandadvAuthor Commented:
It was great to get a fast solution that way easy to use for a JS noob like me.  Thanks!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now