Link to home
Start Free TrialLog in
Avatar of FrankPorter
FrankPorter

asked on

remember last toggle position (ID)

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'].")'>";
?>
Avatar of Mark Gilbert
Mark Gilbert
Flag of United States of America image

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.
Avatar of chloraphil
chloraphil

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.
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.
Small typo + better code:
<?php session_start();
if ($_SESSION['counter']++%2) {?>
<script> toggle(tableID)</script>
x
<?php } ?>
Avatar of FrankPorter

ASKER

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!
ASKER CERTIFIED SOLUTION
Avatar of chloraphil
chloraphil

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial