JQuery GET function only work first time when call on change() function

Question

I've following method asscoiated a drown box

$('#cboUsuario').on('change',
            function cargarAccesos(){
                var username = $('#cboUsuario').val();
                $.get('listEmpresasAcceso', {usuario: username, accion: 'SELECT'}, function(responseJson) {
                    $('#tblAccesosEmpresa').empty();
                    $('#tblAccesosEmpresa').append('<tr><td></td><td>Empresa</td></tr>');
                    for(var i = 0; i < responseJson.length; i++){
                        $check = '<input id="id' + responseJson[i].id + '" type="checkbox" value="' + responseJson[i].id + '" onclick="insertarAcceso(this)">';
                        $empresa = responseJson[i].descripcion;
                        $row = $('<tr><td>' + $check + '</td><td>' + $empresa + '</td></tr>');
                        $('#tblAccesosEmpresa').append($row);
                        $('#id' + responseJson[i].id).prop('checked', responseJson[i].flagAcceso == "1" ? true : false);
                    }
                });
            }
        );

In GET function I call a servlet that load data from database. This is drown box

<select id="cboUsuario" onchange="cargarAccesos()">

Suppose that these are the values on drown box:

<option value="1">Default Value</option>
<option value="2">Car</option>
<option value="3">Phone</option>
<option value="4">Computer</option>

When I select the Car option, change() function is invoked and GET function also is invoked. When I select the Phone options, change() function is invoked anew and also GET function. But when I select again the Car option, change() function is invoked, but don't GET function. GET function don't invoke to servlet and only return the old values ​​of the first time it was invoked.

Anybody can explain what's going on?

Answer 1

The page is most likely caching your old request, try adding cache: false, to your $.get call.

$.ajaxSetup ({cache: false });

Answer 2

you have two triggers assigned, one from a jquery event and the other from standard javascript. either change your code to use jquery or standard javascript.

Do the following with no onchange trigger on html.

$('#cboUsuario').on('change',
        function (){
            var username = $('#cboUsuario').val();
            $.get('listEmpresasAcceso', {usuario: username, accion: 'SELECT'}, function(responseJson) {
                $('#tblAccesosEmpresa').empty();
                $('#tblAccesosEmpresa').append('<tr><td></td><td>Empresa</td></tr>');
                for(var i = 0; i < responseJson.length; i++){
                    $check = '<input id="id' + responseJson[i].id + '" type="checkbox" value="' + responseJson[i].id + '" onclick="insertarAcceso(this)">';
                    $empresa = responseJson[i].descripcion;
                    $row = $('<tr><td>' + $check + '</td><td>' + $empresa + '</td></tr>');
                    $('#tblAccesosEmpresa').append($row);
                    $('#id' + responseJson[i].id).prop('checked', responseJson[i].flagAcceso == "1" ? true : false);
                }
            });
        }
    );

or remove the event attachment with on and just have the function

        function cargarAccesos(){
            var username = $('#cboUsuario').val();
            $.get('listEmpresasAcceso', {usuario: username, accion: 'SELECT'}, function(responseJson) {
                $('#tblAccesosEmpresa').empty();
                $('#tblAccesosEmpresa').append('<tr><td></td><td>Empresa</td></tr>');
                for(var i = 0; i < responseJson.length; i++){
                    $check = '<input id="id' + responseJson[i].id + '" type="checkbox" value="' + responseJson[i].id + '" onclick="insertarAcceso(this)">';
                    $empresa = responseJson[i].descripcion;
                    $row = $('<tr><td>' + $check + '</td><td>' + $empresa + '</td></tr>');
                    $('#tblAccesosEmpresa').append($row);
                    $('#id' + responseJson[i].id).prop('checked', responseJson[i].flagAcceso == "1" ? true : false);
                }
            }