Solved

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

Posted on 2009-05-20
8
1,278 Views
Last Modified: 2012-05-07
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
Comment
Question by:northlandadv
  • 5
  • 3
8 Comments
 
LVL 14

Accepted Solution

by:
ziffgone earned 500 total points
ID: 24442748
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
 

Author Comment

by:northlandadv
ID: 24442789
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
 

Author Comment

by:northlandadv
ID: 24443082
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
 
LVL 14

Expert Comment

by:ziffgone
ID: 24444942
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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 14

Expert Comment

by:ziffgone
ID: 24444953
Also replace "#inputforuserid" with the actual ID of the username Input element.
0
 

Author Comment

by:northlandadv
ID: 24446004
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
 

Author Comment

by:northlandadv
ID: 24446038
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
 

Author Closing Comment

by:northlandadv
ID: 31583643
It was great to get a fast solution that way easy to use for a JS noob like me.  Thanks!
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now