Use Jquery to update a PHP session variable when a link is clicked

Question

I have several divs that a user can Minimize or Expand using the jquery toggle mothod. However, when the page is refreshed the Divs go back to their default state. Is their a way to have browser remember the last state of the div?

For example, if I expand a div with an ID of "my_div", then click on something else on the page, then come back to the original page, I want "my_div" to remain expanded.

I was thinking it would be possible to use session variables for this, perhaps when the user clicks on the expand/minimize button a AJAX request can be sent and toggle a session variable...IDK..any ideas?

Have you tried something or just trying someone to implement it for you? Take a look at api.jquery.com/jQuery.ajax — llullulluis
– llullulluis, Commented Oct 11, 2011 at 21:56
I have tried the $.post method for jquery, haven't quite figured how to attach it to an a tag on my page so that with the link is clicked it runs the $.post thingamajig — DobotJr
– DobotJr, Commented Oct 11, 2011 at 21:58
Can't you use a cookie for that ? If the value does not need to be stored on the server, it should be sufficient - and it's far simpler (e.g. using jquery.cookie.js) — user948581
– user948581, Commented Oct 11, 2011 at 21:58
I've updated my comment with some sample code - it uses jStorage, but the same logic can be used with cookies. — deviousdodo
– deviousdodo, Commented Oct 11, 2011 at 22:09

deviousdodo · Accepted Answer · 2011-10-11 22:07:59Z

2

There's no need for an ajax request, just store the information in a cookie or in the localstorage. Here's a library which should help you out: http://www.jstorage.info/

Some sample code (untested):

// stores the toggled position
$('#my_div').click(function() {
    $('#my_div').toggle();
    $.jStorage.set('my_div', $('#my_div:visible').length);
});

// on page load restores all elements to old position
$(function() {
    var elems = $.jStorage.index();
    for (var i = 0, l = elems.length; i < l; i++) {
        $.jStorage.get(i) ? $('#' + i).show() : hide();
    }
});

edited Oct 11, 2011 at 22:07

answered Oct 11, 2011 at 21:56

deviousdodo

9,1722 gold badges32 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Benjamin Crouzier · Accepted Answer · 2011-10-11 22:01:06Z

1

If you don't need to support old browsers, you can use html5 web storage.

You can do things like this (example taken from w3schools):

The following example counts the number of times a user has visited a page, in the current session:

<script type="text/javascript">
if (sessionStorage.pagecount) {
  sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}
else {
  sessionStorage.pagecount=1;
}
document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
</script>

edited Oct 11, 2011 at 22:01

answered Oct 11, 2011 at 21:59

Benjamin Crouzier

42.2k48 gold badges179 silver badges240 bronze badges

Comments

James Allardice · Accepted Answer · 2011-10-11 22:02:21Z

0

Others have already given valid answers related to cookies and the local storage API, but based on your comment on the question, here's how you would attach a click event handler to a link:

$("#someLinkId").click(function() {
    $.post("somewhere.php", function() {
        //Done!
    });
});

The event handler function will run whenever the element it is attached to is clicked. Inside the event handler, you can run whatever code you like. In this example, a POST request is fired to somewhere.php.

answered Oct 11, 2011 at 22:02

James Allardice

166k22 gold badges335 silver badges316 bronze badges

Comments

Seder · Accepted Answer · 2011-10-12 22:28:28Z

I had something like this and I used cookies based on which user logged in if you want only the main div don't use the

      $('#'+div_id).next().css('display','none');

use

      $('#'+div_id).css('display','none');

*Here is the code *

 //this is the div 
 <div id = "<?php echo $user; ?>1" onclick="setCookie(this.id)" ><div>My Content this will hide/show</div></div>


function setCookie(div_id)
   {
var value = ''; 
var x = document.getElementById(div_id); 
var x = $('#'+div_id).next().css('display'); 
if(x == 'none')
{
    value = 'block'; 
}
else
{
    value = 'none';
}
console.log(div_id+"="+value+"; expires=15/02/2012 00:00:00;path=/")
//alert(x); 
document.cookie = div_id+"="+value+"; expires=15/02/2012 00:00:00;path=/";

   }


    function getCookie(div_id)
    {
console.log( div_id ); 
  var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
 {
  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
  x=x.replace(/^\s+|\s+$/g,"");
if (x==div_id)
{
   return unescape(y);
   }
  }
}

 function set_status()
 {

var div_id = ''; 

for(var i = 1; i <= 9 ; i++)
{
    div_id = '<?php echo $user; ?>'+i; 


    if(getCookie(div_id) == 'none')
    {

        $('#'+div_id).next().css('display','none'); 
    }
    else if(getCookie(div_id) == 'block') 
    {
        $('#'+div_id).next().slideDown(); 
    }

}

}

$(document).ready(function(){
    get_status();
 });

Jan Wiemers · Accepted Answer · 2011-10-12 22:47:16Z

0

Look about the JavaScript Cookie Method, you can save the current states of the divs, and restore it if the User comes back on the Site. There is a nice jQuery Plugin for handling Cookies (http://plugins.jquery.com/project/Cookie)

Hope it helps

answered Oct 12, 2011 at 22:47

Jan Wiemers

3431 silver badge6 bronze badges

Comments

DobotJr · Accepted Answer · 2011-10-24 19:02:17Z

0

Ended up using this. Great Tutorial.

http://www.shopdev.co.uk/blog/cookies-with-jquery-designing-collapsible-layouts/

answered Oct 24, 2011 at 19:02

DobotJr

4,0499 gold badges38 silver badges51 bronze badges

Collectives™ on Stack Overflow

Use Jquery to update a PHP session variable when a link is clicked

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related