We help IT Professionals succeed at work.

remember last toggle position (ID)

FrankPorter
FrankPorter asked
on
477 Views
Last Modified: 2011-08-18
Hi,

Please assist, I have a button that handles the toggle funtion where the user can click, how can we run the toggle when the page post back(refreshes)? so it remembers the last toggle instead of resetting everything..


Thanks

<script>
function toggle(tableID){
  var table = document.getElementById('month'+tableID);
  table.style.display = (table.style.display=='none')?'':'none';
}
</script>


<?php echo
"<input type='button' id='btnmonth' name='btnmonth' onClick='toggle(".$row['MonthNo'].")'>";
?>
Comment
Watch Question

Mark GilbertSenior Performance Engineer

Commented:
Hmm, I would consider looking into ajax as that will allow you to execute php from a javascript call without reloading the page, then store the value in a session.  If the page gets reloaded, read for the session and if it exists with the relevant value, then toggle the button.

xajaxproject.org is the best set of php ajax classes I've found.

Hope this helps.
You don't necessarily need to use ajax for something relatively simple.... all you're trying to do is keep track of state across a page load.  You could use cookies, or a hidden form field, or the querystring.... here's how to do it using a hidden form field (assumes you're using a form):

add an input of type hidden to your form in the php code:
<input type="hidden" name="hidToggleState" id="hidToggleState" value="block">
of course, you will want the value to actually be the form value... i forget how to do this in php, in asp it is Request.Form("hidToggleState")

in your javascript:

<script>
window.onload = function() {//this function runs when the page is finished loading
  document.getElementById("myTableId").style.display = document.getElementById("hidToggleState").value;
};
function toggle(tableID){
  var table = document.getElementById('month'+tableID);
  table.style.display = (table.style.display=='none')?'':'none';
//add the following:
  document.getElementById("hidTableState").value = table.style.display;
}
</script>

It looks like on your page you might have more than one table... in that case you would have one hidden form field for each table, and they would be named appropriately to match.

Commented:
Maybe you want a simple odd / even approach:

<?php session_start();
$_SESSION['counter']++;
if ($_SESSION['counter']%2) {?>
<script> toggle(tableID)</script>
x?>

I put the x there so you can see when it toggles and when it shouldn't.
Be sure to put session_start() in the beginning of your script.

Commented:
Small typo + better code:
<?php session_start();
if ($_SESSION['counter']++%2) {?>
<script> toggle(tableID)</script>
x
<?php } ?>

Author

Commented:
chloraphi,

Awsome, yes i'm using a form. One question though dont we have to store the tableID some where and then when the page loads/submit it will toggle with the correct tableID the user had previously selected in the list?

Thanks!
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.