Question

So the code I have seems correct; however, the comboboxes only change after I refresh the page; which is not what I anticipated with $.change().

Prior to the current code I had two separate ajax calls. One would clear all checkboxes, and the other would set them. This worked without a page refresh; however, sometimes would check incorrect boxes (or even not check the correct ones).

I’ve checked all the returns from the php through firebug and the results are as anticipated.

The code is with jQuery v1.5.1 because I’m using the jQuery UI.

Thanks in advance!

PHP

<?php

require 'config.php';

if(!empty($_GET['usr'])) {

    //Retrieve committee banks list
    $db->query('SELECT * FROM clas_gov_app_meeting_access_list WHERE usr="committeebank"');
    $committeebank = $db->get();

    //Retrieve selected users permissions
    $db->query('SELECT * FROM clas_gov_app_meeting_access_list WHERE usr="'. $_GET['usr'].'"');
    $accesslist = $db->get();

    //Echo user permissions
    echo $accesslist[0]['isadmin'];

    //Combine committebank's and users permissions sepereated with a slash
    $accesslist[0]['accessto'] = $committeebank[0]['accessto'] .',/,' . $accesslist[0]['accessto'];
    //Explode on commas
    $accesslist = explode(',',$accesslist[0]['accessto']);

    //Echo each value
    foreach($accesslist as $key => $value) {
        echo $value.' ';
    }
}

?>

JavaScript / jQuery

    <script type="text/javascript">
    function SetCheckboxes() {  

        var usr = $('#KUOID2').find('option:selected').val();
        $.ajax({
            url : 'ajaxLoadAccess.php?usr=' + usr,
            dataType : "text",
            success : function(response) {      


                //first char echoed is a single identifier for admin status
                var isAdmin = response.charAt(1);
                //clear that from the string
                response = response.replace(response.charAt(1), '');


                //committebank is first, and seperated from usr by a slash
                split_response = response.split("/");
                //want to clear checkboxes from the committebank and set from the usr
                ClearCheckboxes = split_response[0].split(" ");
                SetCheckboxes = split_response[1].split(" ");

                //CLEAR CHECKBOXES

                //For each value in the array
                for(var i in ClearCheckboxes) {
                    //Skipping over empty checkboxes
                    if(ClearCheckboxes[i] != '') {                              
                        //Check the boxes that need to
                        if($('input[name='+ClearCheckboxes[i]+'2]').attr('checked')) {
                            $('input[name='+ClearCheckboxes[i]+'2]').attr('checked', false);
                        }
                    }
                }

                ClearCheckboxes = [];

                //SET CHECKBOXES

                //For each value in the array
                for(var i in SetCheckboxes) {
                    //Skipping over empty checkboxes
                    if(SetCheckboxes[i] != '') {                                
                        //Check the boxes that need to
                        $('input[name='+SetCheckboxes[i]+'2]').attr('checked', true);
                    }
                }

                SetCheckboxes = [];

                if(isAdmin>0) {
                    $('input[name=isAdmin2]').attr('checked', true);
                } else {
                    $('input[name=isAdmin2]').attr('checked', false);   
                }

            }
        });
    }

$(document).ready(function() {
    $(function() {
        $( "#tabs" ).tabs();
    });

     SetCheckboxes();

     $("select").change(function() {
        SetCheckboxes();
    });
});
</script>

Answer 1

The highlighted lines are the culprits in your code. You are using SetCheckboxes as a variable in the same function and not using var to declare it. pLease use the below code hope it works for you.

<script type="text/javascript">
    function SetCheckboxes() {  

        var usr = $('#KUOID2').find('option:selected').val();
        $.ajax({
            url : 'ajaxLoadAccess.php?usr=' + usr,
            dataType : "text",
            success : function(response) {      


                //first char echoed is a single identifier for admin status
                var isAdmin = response.charAt(1);
                //clear that from the string
                response = response.replace(response.charAt(1), '');


                //committebank is first, and seperated from usr by a slash
                split_response = response.split("/");
                //want to clear checkboxes from the committebank and set from the usr
                **var ClearCheckboxes = split_response[0].split(" ");
                var SetCheckboxes = split_response[1].split(" ");//You should always use var to declare the js variables otherwise they are in global scope.**

                //CLEAR CHECKBOXES

                //For each value in the array
                for(var i in ClearCheckboxes) {
                    //Skipping over empty checkboxes
                    if(ClearCheckboxes[i] != '') {                              
                        //Check the boxes that need to
                        if($('input[name='+ClearCheckboxes[i]+'2]').attr('checked')) {
                            $('input[name='+ClearCheckboxes[i]+'2]').attr('checked', false);
                        }
                    }
                }

                ClearCheckboxes = [];

                //SET CHECKBOXES

                //For each value in the array
                for(var i in SetCheckboxes) {
                    //Skipping over empty checkboxes
                    if(SetCheckboxes[i] != '') {                                
                        //Check the boxes that need to
                        $('input[name='+SetCheckboxes[i]+'2]').attr('checked', true);
                    }
                }

                SetCheckboxes = [];

                if(isAdmin>0) {
                    $('input[name=isAdmin2]').attr('checked', true);
                } else {
                    $('input[name=isAdmin2]').attr('checked', false);   
                }

            }
        });
    }

$(document).ready(function() {
    $(function() {
        $( "#tabs" ).tabs();
    });

     SetCheckboxes();

     $("select").change(function() {
        SetCheckboxes();
    });
});
</script>