checkbox state should retain state to hide/unhide text on pageload

Question

as a follow up to this question, while the checkbox value is stored on pageload, the text is displayed on pageload, even if the checkbox is unchecked. the text should hide/display only if the user has unchecked/checked the checkbox, throughout the session or till he closes the browser.

js code which stores the checkbox state:

function getStorage(key_prefix) {
    // this function will return us an object with a "set" and "get" method
    // using either localStorage if available, or defaulting to document.cookie
    if (window.localStorage) {
      // use localStorage:
      return {
        set: function(id, data) {
          localStorage.setItem(key_prefix+id, data);
        },
        get: function(id) {
          return localStorage.getItem(key_prefix+id);
        }
      };
    } else {
      // use document.cookie:
      return {
         set: function(id, data) {
           document.cookie = key_prefix+id+'='+encodeURIComponent(data);
         },
         get: function(id, data) {
           var cookies = document.cookie, parsed = {};
           cookies.replace(/([^=]+)=([^;]*);?\s*/g, function(whole, key, value) {
              parsed[key] = decodeURIComponent(value);
           });
           return parsed[key_prefix+id];
         }
       };
     }
  }

jQuery(function($) {
  // a key prefix is used for the cookie/storage
  var storedData = getStorage('com_mysite_checkboxes_'); 

  $('div.check input:checkbox').bind('change',function(){
    $('#ab_'+this.id).toggle($(this).is(':checked'));
    // save the data on change
    storedData.set(this.id, $(this).is(':checked')?'checked':'not');
  }).each(function() {
    // on load, set the value to what we read from storage:
    var val = storedData.get(this.id);
    if (val == 'checked') $(this).attr('checked', 'checked');
    if (val == 'not') $(this).removeAttr('checked');
    if (val) $(this).trigger('change');
  });

});

this ^code should work, but it while it retains the state of the checkbox, it doesn't for the text. is it because the text is being called from a php page?

html:

    $(document).ready(function() {
        $("#bquote").load("quotes_in.php");     
    });


.. ...

<div class="check">
<p><input type="checkbox" value="Name" id="name" checked /> <label for="name">Name</label></p>  
<p><input type="checkbox" value="Reference " id="reference" checked /> <label for="reference">Reference</label></p>
    </div>

.. ...

    <blockquote id="bquote">
        &nbsp;  
    </blockquote>

php:

public function formatQuotes($row)
{

    return "<p id=\"ab_name\">" . $this->h($row['cName']) . "</p><br />"
    . "<p id=\"ab_reference\">" . $this->h($row['vReference']) . "</p>"; 

}

Answer 1

You need to trigger the change() event on document ready after the p elements are generated.

Edit:

If placing the change trigger after the .load() call does not work, then that is probably due to the ajax request not being completed yet at the point of triggering. This can be solved by using callback parameter of .load(). Therefore, the code should look something like:

$(document).ready(function() {
    $("#bquote").load("quotes_in.php", function() {
        // create the P elements
        // trigger the change() event
    });
});