jquery slide and fade kept open on reload using cookies

StackOverflow https://stackoverflow.com/questions/8202978

Pregunta

I have a working example that keeps a div open using cookies. Part of the issue is that Im using a select list instead of a radio button. Another problem is that the values of the select list and corresponding div are dynamically generated. However, making things a little easier, the value of the select is ALWAYS the same as the div id. Im just trying to make it so if the page is reloaded, the div stays open. Here is the example that I think is close to what Im looking for: 

<fieldset>
<ol class="formset">
  <li>
    <label for="fname2">First Name: </label>`
    <input type="text" id="fname2" value="" name="fname2"/>
  </li>
  <li>
    <label for="lname2">Last Name: </label><br />
    <input type="text" id="lname2" value="" name="lname2"/>
  </li>
  <li>
    <label for="email2">Email Address: </label><br />
    <input type="text" id="email2" value="" name="email2" />
  </li>
  <li>
    <label for="age2">Are you above 21 yrs old?</label><br />
    <input type="radio" name="age2" value="Yes" class="aboveage2" /> Yes
    <input type="radio" name="age2" value="No" class="aboveage2" /> No
  </li>
</ol>
<ol id="parent2" class="formset">
  <li>
    <strong>Parent/Guardian Information:</strong>
  </li>
  <li>
    <label for="pname2">Parent Name: </label>
    <input type="text" id="pname2" value="" name="pname2"/>
  </li>
  <li>
    <label for="contact2">Contact No.: </label><br />
    <input type="text" id="contact2" value="" name="contact2"/>
  </li>
</ol>
<input type="submit" name="submit" value="Submit" class="submitbtn" />  
</fieldset>

<script>
  $(document).ready(function(){
    $("#parent2").css("display","none");
    $(".aboveage2").click(function(){
      if ($('input[name=age2]:checked').val() == "No" ) {
        $("#parent2").slideDown("fast"); //Slide Down Effect
        $.cookie('showTop', 'expanded'); //Add cookie 'ShowTop'
      } else {
        $("#parent2").slideUp("fast");  //Slide Up Effect
        $.cookie('showTop', 'collapsed'); //Add cookie 'ShowTop'
      }
    });
    var showTop = $.cookie('showTop');
    if (showTop == 'expanded') {
      $("#parent2").show("fast");
      $('input[name=age2]:checked');
    } else {
      $("#parent2").hide("fast");
      $('input[name=age2]:checked');
    }
  });
</script>

As a note Im using the cookie plugin found here: http://plugins.jquery.com/project/Cookie Closer to what Im doing and need help with is the following:

<html>
  <head>
    <script>
      $(document).ready(function() {
        $('div.book').css("display","none"); // display none on all ol that doesn't have book class
        $('#book_list').change(function() {
          $('div.book').slideUp("fast"); //Slide Up Effect
          $('#' + $(this).val()).slideDown("slow"); //Slide Down Effect
        });
      });
    </script>
  </head>
  <body>
    <form>
      <select id="book_list">
        <option value="">Select</option>
        <option value="1">Number 1</option>
        <option value="2">Number 2</option>
        <option value="3">Number 3</option>
      </select>
    </form>
    <div id="1" class="book">Div number 1</div>
    <div id="2" class="book">Div number 2</div>
    <div id="3" class="book">Div number 3</div>
  </body>
</html>

I draw the values from a database. This is the PHP I use on reload to keep the menu item selected:

<?php
$bookcookie = $_COOKIE['book'];
$book_list = "<select id=\"book_list\">";
while($book = mysql_fetch_array($book_result)){
//THE BOOK LIST
$book_list .= "<option value=\"" . $book['id'] . "\"";
if(isset($bookcookie) && $bookcookie == $book['id']){
    $book_list .= " selected";
}
$book_list .= ">Number " . $book['id'] . "</option>";
}
$book_list .= "</select>";
?>
¿Fue útil?

Solución

I'm a bit loathe to write too much code; if you can provide a solid attempt, hundreds of people will be happy to help you get that last mile!

I don't mind giving advice, though.

Your initial approach isn't bad at all. Hide all appropriate divs, and then based on change event, show the appropriate one. You just need to insert some new logic:

  • On document ready, check to see if a cookie exists that tells you what div needs to be opened.
  • if the cookie exists, retrieve its value and show the appropriate div
  • if the cooke does not exist, do not open a corresponding div
  • in the change handler, when a user makes a selection, set the cookie and then perform the animation

Hope that helps!

[updated per comments below]

If you want to base it on "selected" being set, you just need to do this:

$(document).ready(function() {
  $('div.book').css("display","none"); // display none on all divs with class 'book'
  var listVal = $('#book_list').val();
  if(listVal != "") {
    $('#book-'+listVal).show();
  }


  $('#book_list').change(function() {
    $('div.book').slideUp("fast"); //Slide Up Effect
    $('#book-' + $(this).val()).slideDown("slow"); //Slide Down Effect
  });
});

Note a change I noticed along the way: your divs can't be just a number; valid IDs must start with a letter, so I added the pattern "book-" to the beginning. I didn't post updated HTML, but your divs will need to have IDs book-1 book-2 and book-3 to use my suggested code.

Not claiming it's optimized, but that's the gist. ;-) If no value is selected, the first one is selected by default, which has a value of empty string. One document ready, get the value and if it's NOT an empty string there must be a div that needs showing. Show it based on the list's value.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top