angular-ui / ui-sortable

jQuery UI Sortable for AngularJS
http://angular-ui.github.io/ui-sortable/
MIT License
1.26k stars 444 forks source link

Uncaught TypeError: Cannot read property 'msie' of undefined #521

Closed JuanCrespo18 closed 7 years ago

JuanCrespo18 commented 7 years ago

I'm trying to use ui-sortable to be able to reorder my table by drag and drop. I've followed the instructions from this site but when I try to drag a row from the table, I get this message at the console (the one from the title). I've included the scripts for jquery 2.2.3, jquery ui 1.9 and angular-ui-sortable 0.17.1, and also the sortable module as a dependency in my application module. I read in some sites that this could be fixed by adding the jquery migrate script, but when I did this, it seemed to generate problems with angular (by the way, I'm using angularjs).

<tbody ng-model="listaCampos" ui-sortable="{ 'ui-floating': false }">
            <tr ng-repeat="campo in camposConfigurados()">
                <td class="text-center">{{campo.Nombre}}</td>
                <td class="text-center">{{campo.FormatoDato.Formato}}</td>
                <td class="text-center">{{campo.Posicion}}</td>
                <td class="text-center">{{campo.Longitud}}</td>
                <td class="text-center">
                    <span class="glyphicon" ng-class="campo.LongitudFija ? 'glyphicon-check' : 'glyphicon-unchecked'"></span>
                </td>
                <td class="text-center">
                    <span class="glyphicon" ng-class="campo.CompletarConCeros ? 'glyphicon-check' : 'glyphicon-unchecked'"></span>
                </td>
                <td class="text-center">
                    <a class="btn btn-info btn-xs" uib-tooltip="Editar" tooltip-placement="top" ng-click="editarCampo(campo)">
                        <span class="glyphicon glyphicon-edit"></span>
                    </a>
                    <a class="btn btn-info btn-xs" uib-tooltip="Ver Traductores" tooltip-placement="top" ng-disabled="campo.Traductores.length == 0" ng-click="mostrarModalTraductores(campo)">
                        <span class="glyphicon glyphicon-list-alt"></span>
                    </a>
                    <a class="btn btn-danger btn-xs" uib-tooltip="Eliminar" tooltip-placement="top" ng-click="camposConfigurados().splice(camposConfigurados().indexOf(campo), 1)">
                        <span class="glyphicon glyphicon-remove"></span>
                    </a>
                </td>
            </tr>
        </tbody>

Here is the whole message from the chrome console:

Uncaught TypeError: Cannot read property 'msie' of undefined at e.(anonymous function).(anonymous function)._mouseMove (https://code.jquery.com/ui/1.9.0/jquery-ui.min.js:5:12346) at e.(anonymous function).(anonymous function)._mouseMove (https://code.jquery.com/ui/1.9.0/jquery-ui.min.js:5:5075) at HTMLDocument._mouseMoveDelegate (https://code.jquery.com/ui/1.9.0/jquery-ui.min.js:5:12082) at HTMLDocument.dispatch (http://localhost/RendicionLogica/js/jquery/jquery-2.2.3.min.js:3:7537) at HTMLDocument.r.handle (http://localhost/RendicionLogica/js/jquery/jquery-2.2.3.min.js:3:5620)

thgreasi commented 7 years ago

Never faced such an error before, at least in this repo's examples. Did you find a solution? I guess that updating jQuery-UI should be your first attempt

JuanCrespo18 commented 7 years ago

I did, i added this script and now it works.

jQuery.browser = {}; (function() { jQuery.browser.msie = false; jQuery.browser.version = 0; if (navigator.userAgent.match(/MSIE ([0-9]+)./)) { jQuery.browser.msie = true; jQuery.browser.version = RegExp.$1; } })();

thgreasi commented 7 years ago

Thanks for posting back your findings!