Checkbox reminder script doesn't remember checkbox status when dynamically load test.php which contains the checkbox

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
    }
}

Answer 2

If the php that loads the GET, I assume it returns the following:

<php
echo <<<OUTPUT
<div id="soundcheck" class="button blue">
<input type="checkbox" value="Name" id="sound">
This is the checkbox, uncheck it and refresh the page. It should remain unchecked!
</div>
OUTPUT;

Instead, have it return:

To make it a bit tighter, I would would go with:

<php
echo <<<OUTPUT
<div id="soundcheck" class="button blue">
<input type="checkbox" value="Name" id="sound">
<label for="sound">This is the checkbox, uncheck it and refresh the page. It should remain unchecked!</label>
</div>
OUTPUT;

This will always return a blank checkbox, regardless of what they submitted.

Now if the issue is that it should stay checked unless they uncheck the box, go with:

<php
$checked ($_GET['checked'] == 1 ) ? 'checked="checked" : '';
echo <<<OUTPUT
<div id="soundcheck" class="button blue">
<input type="checkbox" value="Name" id="sound" $checked>
<label for="sound">This is the checkbox, uncheck it and refresh the page. It should remain unchecked!</label>
</div>
OUTPUT;

With the following in your js:

xmlhttp.open("GET","test.php?q="+str+"&checked=1",true);