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?

It's probably caching your previous request, try adding `cache: false,` to your `$.get` call. — tymeJV, Jun 28 '13 at 02:02
There aren't messages. I've debugged on IE 8. Change function always is invoked, but not get() function. When I select again a option that it was selected before, get() function don't call a servlet class. I tested in Eclipse — Cesar Miguel, Jun 28 '13 at 02:02
Thanks for help :D!. I try this `$.ajaxSetup ({cache: false });` and work fine. I don't know if you mean the same — Cesar Miguel, Jun 28 '13 at 02:15

score 0 · Answer 1 · answered Jun 28 '13 at 02:16

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

score 0 · Accepted Answer · answered Jun 28 '13 at 02:18

0

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

$.ajaxSetup ({cache: false });

answered Jun 28 '13 at 02:18

tymeJV

103,943
14
161
157

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

2 Answers2