Javascript Session Cookie to remember last tab

Discussion in 'JavaScript' started by nafciffart, Oct 6, 2011.

  1. #1
    Hi,

    I have a website where the user can navigate different categories by tab. The problem is, when they're on a tab other than the default one and they refresh the page or click to another page, it puts them back on the first tab. I know this can be solved by using a session cookie of some type, I just need some help on implementing it into my site.

    http://www.thatswhyimbroke.com/ - so you can see what i'm talking about. If you look at the different tabs: Price High, price low, food & drink, etc. I want the user to be able to go to one of those, click to page 2 or refresh, and still be on that tab.

    Any help would be much appreciated!
     
    nafciffart, Oct 6, 2011 IP
  2. SheetalCreation

    SheetalCreation Peon

    Messages:
    42
    Likes Received:
    1
    Best Answers:
    3
    Trophy Points:
    0
    #2
    What you need to do is, you need to create a unique key(it will be a session id) and save it to user's machine as a cookie and save it on server as well as a session(you can use php session variable to store it or you can save in a file(file or DB is preferable)) and whenever user select some other tab, save that tab info along with session id.So whenever user will refresh the page cookie will send to server along with refresh request, then you need to search that key in your session file and see the user selected tab info and refresh the page and select the same tab rather then default.

    Let me know what implementation details you need.


    Sheetal
     
    SheetalCreation, Oct 6, 2011 IP
  3. nafciffart

    nafciffart Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Umm pretty much all of those details if possible haha.. i'm not good with JS at all.
     
    nafciffart, Oct 6, 2011 IP
  4. SheetalCreation

    SheetalCreation Peon

    Messages:
    42
    Likes Received:
    1
    Best Answers:
    3
    Trophy Points:
    0
    #4
    http://php.net/manual/en/function.setcookie.php

    read above link to set cookie on client machine. create a random number on server and save it to client box using setcookie function.

    To retrive cookie on server you have $_cookie[] array.

    try this much first.... then let me know i tell you what next need to be done.


    Sheetal
     
    SheetalCreation, Oct 7, 2011 IP
  5. nafciffart

    nafciffart Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Can you give me an example of a function that will create a cookie and then delete it when the browser is closed? that link is informative but a little too advanced for me, I'm still not sure which functions to use to integrate it into the tabs.
     
    nafciffart, Oct 7, 2011 IP
  6. Rukbat

    Rukbat Well-Known Member

    Messages:
    2,908
    Likes Received:
    37
    Best Answers:
    51
    Trophy Points:
    125
    #6
    Since the site is never notified that the browser is closed, unless you have a logout link and the user clicks it, that's not possible.
     
    Rukbat, Oct 8, 2011 IP
  7. nemanja.todic

    nemanja.todic Well-Known Member

    Messages:
    69
    Likes Received:
    4
    Best Answers:
    1
    Trophy Points:
    130
    #7
    I think that cookie solution isn't the best one.

    Simply, what if I have selected second tab an want to share link to that tab here, at this forum? I can't do that, because URL to the first and to the second tab is the same.

    I recommend editing URL on tab click.

    if your url is myurl.com/index.php and when user clicks on second tab you should "redirect" it to myurl.com/index.php#tab=2. When he click third tab you should change the url to myurl.com/index.php#tab=3 etc. This won't cause page to reload and still your URL is changed according to the selected tab.

    Once you have done this, only thing still left to do is to, on JS "page load" event, check URL and simulate "click" on one of the tabs based on "#tab" parameter in URL.
     
    nemanja.todic, Oct 9, 2011 IP