angular-ui/ui-sortable

Uncaught TypeError: Cannot read property 'msie' of undefined

JuanCrespo18 opened this issue · 3 comments

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)

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

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

Thanks for posting back your findings!