How to remember the state of a popup in Crossrider?

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

Question

I have a popup in Crossrider in which I have a checkbox. It look something like this:

popup.html

<body>
    <div data-role="page" id="div1">
        <label for="checkbox1">Enable Something</label>
        <input type="checkbox" id="checkbox1">
    </div>
</body>

Now, when the user closes the popup I want the popup to remember the state of the checkbox. So if the user has enabled #checkbox1, I want it to still be enabled next time he opens the popup.

I tried doing this and it does not work:

popup.js

$(document).ready(function(){ 
    $('#checkbox1').on('change', function(){
        if ($(this).is(':checked'))
            $('#checkbox1').prop('checked', true);    
        else
            $('#checkbox1').prop('checked', false);
    })
});

What is the proper way to do this?

Thank you!!!

Was it helpful?

Solution

Popup content is not preserved between invocations of the popup; hence you must save the state outside the popup scope, usually for small quantities of data such as this in the Crossrider database using appAPI.db.

In addition, such code would best be placed in the crossriderMain function which is automatically called when the page is ready.

For example:

<!DOCTYPE html>
<html>
<head>
<!-- This meta tag is relevant only for IE -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript">
function crossriderMain($) {
  if (appAPI.db.get('checkbox1'))
    $('#checkbox1').prop('checked', true);    
  else
    $('#checkbox1').prop('checked', false);

  $('#checkbox1').on('change', function(){
    appAPI.db.set('checkbox1', $(this).is(':checked'));
  })
}
</script>
</head>
<body>
  <div data-role="page" id="div1">
    <label for="checkbox1">Enable Something</label>
    <input type="checkbox" id="checkbox1">
  </div>
</body>
</html>

[Disclosure: I am a Crossrider employee]

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top