asked on

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!

ASKER CERTIFIED SOLUTION

ziffgone

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

northlandadv

ASKER

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?

northlandadv

ASKER

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!

ziffgone

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

ziffgone

Also replace "#inputforuserid" with the actual ID of the username Input element.

northlandadv

ASKER

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.

northlandadv

ASKER

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

northlandadv

ASKER

It was great to get a fast solution that way easy to use for a JS noob like me. Thanks!