CODEWITHSUNDEEP
phpjquerysessionhtmltoggle
DobotJr
DobotJr

Reputation: 4049

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

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?

Upvotes: 3

Views: 1477

Answers (6)

DobotJr
DobotJr

Reputation: 4049

Ended up using this. Great Tutorial.

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

Upvotes: 0

Jan Wiemers
Jan Wiemers

Reputation: 341

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

Upvotes: 0

Seder
Seder

Reputation: 2763

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();
 });

Upvotes: 0

deviousdodo
deviousdodo

Reputation: 9172

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();
    }
});

Upvotes: 2

James Allardice
James Allardice

Reputation: 165971

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.

Upvotes: 0

Benjamin Crouzier
Benjamin Crouzier

Reputation: 41905

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>

Upvotes: 1

Related Questions