Question

I have this javascript switch statement:

function showSideMenu() {
            switch (document.forms["culinaryrequest"].culinarytype.selectedIndex) {
                case 0:
                    document.getElementById('case1').style.display="none";
                    document.getElementById('case2').style.display="none";
                    document.getElementById('case3').style.display="none";
                    document.getElementById('case4').style.display="none";
                    break;
                case 1:
                    document.getElementById('case1').style.display="table-row";
                    document.getElementById('case2').style.display="none";
                    document.getElementById('case3').style.display="none";
                    document.getElementById('case4').style.display="none";
                    break;
                case 2:
                    document.getElementById('case1').style.display="none";
                    document.getElementById('case2').style.display="table-row";
                    document.getElementById('case3').style.display="none";
                    document.getElementById('case4').style.display="none";
                    break;
                case 3:
                    document.getElementById('case1').style.display="none";
                    document.getElementById('case2').style.display="none";
                    document.getElementById('case3').style.display="table-row";
                    document.getElementById('case4').style.display="none";
                    break;
                case 4:
                    document.getElementById('case1').style.display="none";
                    document.getElementById('case2').style.display="none";
                    document.getElementById('case3').style.display="none";
                    document.getElementById('case4').style.display="table";
                    break;
                default:
                    break;
            }
        }

When a user chooses one of the options from a dropdown menu, it displays a certain element controlled by the above switch statement. The problem is upon refresh or if the user gets an error and is taken back to the page, the element is hidden again. I want to set a cookie to keep the element showing, but I'm not sure how to add cookies to a switch statement. Can I get an example? Thanks!

Was it helpful?

Solution

You could use a framework to do the job.

<html>
    <head>
        <title></title>
        <style type="text/css">
            div.case{
                display: none;
            }
        </style>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js"></script>
        <script type="text/javascript">
            (function($){
                $(document).ready(function(){
                    // Define cookie key
                    var cookiekey = "mycookiekey";

                    // Get cases
                    var cases = $('div.case').hide();

                    // Set handler
                    var handler = $('#culinarytype');

                    // Show case based on cookie
                    handler.val($.cookie(cookiekey));

                    // Define the select function
                    var selectFromHandler = function(){
                        selected = handler.val();

                        // First hide all cases
                        cases.hide();

                        // Show only wanted case
                        if(selected > 0){
                            $(cases.get(selected - 1)).show();
                        }

                        // Set cookie
                        $.cookie(cookiekey, selected, { expires: 7 });
                    }

                    // Based on handler change
                    handler.change(selectFromHandler);

                    // Default
                    selectFromHandler();
                });
            })(jQuery);
        </script>
    </head>
    <body>
        <select id="culinarytype">
            <option value="0"></option>
            <option value="1">Case 1</option>
            <option value="2">Case 2</option>
            <option value="3">Case 3</option>
            <option value="4">Case 4</option>
        </select>

        <div class="case">Case 1</div>
        <div class="case">Case 2</div>
        <div class="case">Case 3</div>
        <div class="case">Case 4</div>
    </body>
</html>

OTHER TIPS

Probably this may help. Ex. Setting the cookie

function SetCookie(cookieName,cookieValue) {
 var today = new Date();
 var expire = new Date();
 if (nDays==null || nDays==0) nDays=1;
 expire.setTime(today.getTime() + 3600000*24);
 document.cookie = cookieName+"="+escape(cookieValue)
                 + ";expires="+expire.toGMTString();
}

getting the cookie value

function ReadCookie(cookieName) {
 var theCookie=" "+document.cookie;
 var ind=theCookie.indexOf(" "+cookieName+"=");
 if (ind==-1) ind=theCookie.indexOf(";"+cookieName+"=");
 if (ind==-1 || cookieName=="") return "";
 var ind1=theCookie.indexOf(";",ind+1);
 if (ind1==-1) ind1=theCookie.length; 
 return unescape(theCookie.substring(ind+cookieName.length+2,ind1));
}

inside the each case call the method setCookie and get the cookie after refresh

function showSideMenu() {
    var choice = document.forms["culinaryrequest"].culinarytype.selectedIndex;
    for (var x = 1, y = 4; x < y; x++) {
      document.getElementById('case' + x).style.display = (x == choice ? (choice == 4 ? "table" : "table-row") : "none");
    }
    setCookie("MYAWESOMECOOKIE", choice);
}

function getCookie(c_name) {
  if (document.cookie.length > 0) {
    var c_start = document.cookie.indexOf(c_name + "=");
    if (c_start != -1) {
      c_start = c_start + c_name.length + 1 ;
      var c_end = document.cookie.indexOf(";", c_start);
      if (c_end == -1) {
        c_end = document.cookie.length;
      }
      return decodeURIComponent(document.cookie.substring(c_start, c_end));
    }
  }
  return null;
}

function setCookie(c_name, value, expires) {
  if (typeof(expires) === "undefined") {
    expires = 365;
  }
  var expiresDate = new Date();
  expiresDate.setTime(expiresDate.getTime() + (expires * 24 * 3600 * 1000));
  document.cookie = c_name + "=" + encodeURIComponent(value) + ((expires == null) ? "" : "; expires=" + expiresDate.toGMTString());
}

function removeCookie(c_name) {
  if (getCookie(c_name)) {
    document.cookie = c_name + "=" + "; expires=Thu, 01-Jan-70 00:00:01 GMT";
  }
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top