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>';
}
?>

Anthony Grist · Accepted Answer · 2012-05-23T10:29:59.967

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

edited May 23 '12 at 10:29

answered May 22 '12 at 10:31

Anthony Grist

38,173
8
62
76

Thanks, but how do I do that? Also the test.php file can be called a few times in the original file and not only on page load. How to handle this? – Maurice May 22 '12 at 13:22
Did some research and tried `$(document).ready(function() {` but had no luck with it. @Anthony Grist how to do this correct code wise? Any thoughts? – Maurice May 22 '12 at 22:41
@Maurice See the edit. You need to call it in the code that handles the AJAX call sending a success response. – Anthony Grist May 23 '12 at 10:34
thanks for the reply. Did the changes, but it had no effect, see http://www.mauricederegt.nl/test/index2.html – Maurice May 23 '12 at 19:19
@Maurice I'm getting a Javascript error in Firebug saying that `storedData` is undefined, which is caused by not declaring it as a global variable, but instead as a variable that's local to the anonymous function passed to the `jQuery()` function in `check.js`. Remove the `var` keyword, then give it a try. – Anthony Grist May 23 '12 at 21:09
you mean remove the `var` from `var storedData = getStorage('com_mysite_checkboxes_');`? Did that, it's now `storedData = getStorage('com_mysite_checkboxes_');` but still no luck.... or did I misunderstand? – Maurice May 23 '12 at 21:59
GOT IT! I had to put all of the JS script in it and not just a part as @Anthony suggested. That worked – Maurice May 28 '12 at 10:26

Anthony · Answer 2 · 2012-05-22T11:10:21.883

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);

UPDATE: this `$checked = ($_GET['checked'] == 1 ) ? 'checked="checked" : ';` gives me a syntax error: saying: `Parse error: syntax error, unexpected ';'` @Anthony any thoughts? — Maurice, May 22 '12 at 14:02
AH found it, there was a typo (missing a ') in it. But still it aint working. Updated the php file above, als see http://mauricederegt.nl/test/index2.html — Maurice, May 22 '12 at 20:04

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

2 Answers2