jQuery timing issues? Using PHP/mssql

Question

<html>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
<?php 
    // this sets variables sot session for nodeid 
    $nid = 1;//$_GET["nnid"];

    session_start(); 
    $_SESSION['sesnodid']=$nid;
?> 

var array;

$(document).ready(function (){
    $('#itemsOnPageDiv input:checkbox').click(function(event){
        var obj = [];
        $('#itemsOnPageDiv input[type=checkbox]:checked').each(function(index, value){
        obj.push($(this).attr("value"));
        alert($(this).attr("value")+" added to array");
    });
    array = JSON.stringify(obj);
    });
});



$(document).ready(function(){
    $("#cl").click(function(){
    $.post('buildUserPage.php', { array : array }, 
    function(output){
        $('#debug').html(output).show();
    });
    alert(array);
    });
});

</script>
<div id="itemsOnPageDiv">

<?php

include("hawkfunctions.php");

newPageCheckBoxBuider();

$user_page_cell_info = getUserPageCellInfo($nid);

$i = 0;

echo "<script>";
while($i < count($user_page_cell_info)){
    echo "
    alert('Clicking ".$user_page_cell_info[$i]['tag_id']."');
    \$(document).ready(function(){
    \$('#".trim($user_page_cell_info[$i]['tag_id'])."').trigger('click');
    });";
    $i++;
}
echo "</script>";
?>

</div>

<button id="cl">Save</button>

<div id = 'debug'></div>
</html>

OK. I have a list of checkboxes built from an sql db. I use php to write jquery that gets the correct 'checked' boxes based on data in the db. I then have this script 'click' the needed checkboxes. Each 'click' is then to populate an array. This array will contain the data needed from the jquery 'clicked' boxes and any boxes checked or unchecked by the user. This array is to be used by another php script to change the db based on the changes in what boxes are checked.

Here is the problem:

The boxes that are supposed to be checked correctly get checked but. The array that is supposed to get populated doesn't get correctly populated all the time. Most noticeably the array is empty if only one of the check boxes is initially checked. The user unchecking then checking again seems to fix this but obviously this isn't ideal. Sometimes when 2 are checked one of the checkboxes data doesn't enter the array. Any amount past this seems OK.

Before I look at your code I would really recommend doing this differently. You should check the checkboxes server side (no need to do it client side) and just on the click event of save get all the checked checkboxes via `$(':checked')` and post it that way. — Snuffleupagus, Dec 03 '12 at 20:43
The page is to only load once. The plan is to have this code in a pop up window and close when clicking the "Save". Again if I'm being stupid with anything, call me out. — Mildfire, Dec 03 '12 at 20:44
i can try that Snuffleupagus. Can write 2 queries. One to get all channels. Another to get checked channels. Then change my function that builds the list of check boxes to checked='true' or whatever it is when needed. I'll post if it works thank you — Mildfire, Dec 03 '12 at 20:47
Out of curiosity I would still like to know why my original method is not working. I put in alert windows to view the "step by step" but some things that I expect to see just aren't happening. — Mildfire, Dec 03 '12 at 20:51
From what I can see you're not rendering HTML that is totally valid. — Jay Blanchard, Dec 03 '12 at 21:15

score 0 · Answer 1 · edited May 23 '17 at 11:56

Clicking a checkbox is ambiguous. Sometimes it works - sometime it doesn't. It's an unreliable method of doing it. If it's already checked, it's going to uncheck it.

The correct way to do it would be to use the .prop function, or .attr() (see debate here)

$('#".trim($user_page_cell_info[$i]['tag_id'])."').prop("checked", true)

While we're at it, here's some tips.

Separate your files. PHP / HTML / JS / CSS shouldn't be together (for clarity reason)
From what I understand.. everytime you click a checkbox, it rebuilds your checkbox JSON... and then do nothing. So if I click 3 boxes, it will query 3 times the document to construct the JSON. You should only do it when someone clicks the $("#cl") button.
Don't name your array "array". Try to name it something clearer, like, checkbox_array.

jQuery timing issues? Using PHP/mssql

1 Answers1