Question

I have a working checkbox reminder script: http://mauricederegt.nl/test/index.html

It simply remembers the checkbox status, so when you come back to the webpage later, it will still be checked to unchecked. This works all great.

Now I need to dynamically load a php page in my HTML page (the original php page gets some stuff out of my database and displays a list of names. Underneath that list, this checkbox appears, followed by another list from the db).

I’ve placed the checkbox in the php file, but it will be shown in the HTML file when the php file is loaded. The js file is still loaded in the HTML file (also tried loading it in the php file, but this had no effect).

PROBLEM: The checkbox isn’t remembered anymore 🙁 See this demo: http://mauricederegt.nl/test/index2.html

I think this is because the page is dynamically loaded now and isn’t visible in the HTML?

How can I fix this, so the checkbox is remembered again?

Please see the source code of the HTML files for the js code if needed (is too much to post here)

Kind regards,

the php code:

   <?php  
$q=$_GET["q"];
$checked = ($_GET['checked'] == 1 ) ? 'checked="checked"' : '';

if ($q == 1) {
echo '<ul>
        <li>Mike</li>
        <li>Peter</li>
        <li>Richard</li>
        <li>Quintin</li>
        </ul>
<div id="soundcheck" class="button blue"><input type="checkbox" value="Name" id="sound" '.$checked.' /><label for="sound"></label></div>
<ul>
        <li>Apple</li>
        <li>Banana</li>
        <li>Pineapple</li>
        </ul>';
}
?>

Answer 1

The problem is that the code to check and then set the remembered status for the checkboxes is only called when the page is first loaded (bound to the DOM ready event), and therefore isn’t called when you dynamically load content.

Call this part of your existing code:

$('div#soundcheck input:checkbox').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');
});

after dynamically loading your checkboxes, and that should fix the problem.

Edit:
You’ll need to add the above code to this section of your existing Javascript:

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("scoreboard").innerHTML=xmlhttp.responseText;
        // add the above code here
    }
}