I am encountering an issue while trying to save and read the value of a button in the panel. The error message I receive is - Unable to set property 'adl' of undefined or null reference. This is my first time working with localStorage, so I'm unsure where the problem lies. Can someone assist me in identifying the error?
Thank you.
Sincerely, Joe
Below is the code snippet:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-2.1.3.min.js" data-semver="2.1.3" data-require="jquery"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).ready(function() {
// Save settings
$( "#myPanel" ).panel({
beforeopen: function( event, ui ) {}
});
$( "#myPanel" ).on( "panelbeforeopen", function( event, ui ) {} );
$( "#myPanel" ).panel({
close: function( event, ui ) {}
});
$( "#myPanel" ).on( "panelclose", function( event, ui ) {
//localStorage.adl = $("#checkbox-h-2a").is(":checked"); //$('#checkbox-h-2a').val();
if (typeof(Storage) !== "undefined") {
localStorage.adl = $("#checkbox-h-2a").is(":checked");
console.log($("#checkbox-h-2a").is(":checked"));
}
});
});
</script>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="home">
<div data-role="panel" id="myPanel" data-display="overlay">
<!-- panel content goes here -->
<fieldset data-role="controlgroup" data-type="horizontal">
<input name="checkbox-h-2a" id="checkbox-h-2a" type="checkbox">
<label for="checkbox-h-2a">Auto Detect Location</label>
</fieldset>
</div><!-- /panel -->
<div data-role="header">
<h1>Test</h1>
<a href="#myPanel" data-icon="gear" class="ui-btn-right">Open Panel</a>
</div><!-- /header -->
<div data-role="content">
<div data-role="main" class="ui-content">
<p>content will go here</p>
</div>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- end of first page -->
</body>
</html>