0

JQuery selectors in this page of my project doesn't work, they calls autocomplete method and datepicker in the same way as other pages where works properly.

This is my code, i reviewed it 420 times and again.

If i try to fill the input field should call get method in dati.js but it seems like the $ selector doesn't work, because is not working neither for .datepicker

Controller

angular.module('AceApp').controller('praticaCtrl', function($scope, $window, $http, $timeout, $rootScope, $state, $stateParams, $location, $auth, $uibModal, dati, $compile, $filter) {
    $( ".datapicker" ).datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: "1900:2050",
        dateFormat: 'dd-mm-yy'
});
$(".dataPickerModal").datepicker({
    changeMonth: true,
    changeYear: true,
    yearRange: "1900:2050",
    dateFormat: 'dd-mm-yy'
}).css({"z-index":10000});
////////////
$("#luogoNascita").autocomplete({
    source: function (request, resolve) {
        console.log("vvv");
        dati.getCitta(request.term)
            .success(function (data) {
               resolve(data);
            })
            .error(function () {
            });
        }
    });

$("#luogoNascita").on("autocompleteselect", function(event, ui) {
    $timeout(function() {
        $scope.cliente.comune_nascita.sigla = ui.item.sigla;
        $scope.cliente.comune_nascita.codice_catastale = ui.item.codiceCatastale;
    });
}); ETC...

HTML

<div class="col-md-3 col-sm-3 col-xs-7">
    <label for="luogoNascita">Luogo di Nascita</label>
    <input ng-model = "cliente.comune_nascita.nome" autocomplete = "on" 
           type="text" class="form-control" name="luogoNascita"
           id="luogoNascita" placeholder="Ricerca Città" style="width:100%" />
</div>

APP.JS

.state('pratica', {
    url: '/pratica/:id',
    title: 'Dati anagrafici',
    icon: 'fa fa-dollar',
    view: false,
    sottomenu: false,
    templateUrl: 'views/pages/pratiche/pratica.html',
    permissions: 'quinto-stipendio_pratica',
    controller: 'praticaCtrl',
    resolve: {
        lazyLoad: ['$ocLazyLoad', function($ocLazyLoad) {
            return $ocLazyLoad.load([
                {
                    serie: true,
                    name: 'dataTables',
                    files: ['../components/datatables/media/js/jquery.dataTables.js', '../components/_mod/datatables/jquery.dataTables.bootstrap.js', '../components/angular-datatables/dist/angular-datatables.js']
                },
                {
                    name: 'AceApp',
                    files: ['js/controllers/pages/pratiche/pratica.js']
                },
                {
                    name: 'stepF',
                    files: ['js/controllers/pages/dropzone/uploader.js']
                }
            ]);
        }]
    },
    permissions: 'leggi-cessione_quinto'
})

I've only copy-pasted this code from other pages where it works, and there are no differences.

2
  • The most common cause of this problem is that the AngularJS framework instantiates the DOM after the selector is invoked. The framework adds and removes DOM in the course of its operation. With the AngularJS framework, avoid doing DOM manipulation in controllers. Instead only do DOM manipulation in custom directives. Commented Jun 27, 2018 at 11:31
  • Where is the .datepicker class called by the first selector? It is not in the HTML shown in the question. Commented Jun 27, 2018 at 11:34

1 Answer 1

0

Well .. you cannot just use $() in AngularJS.

There are solutions to combine jquery and angularjs

Sign up to request clarification or add additional context in comments.

3 Comments

it's strange because on other pages it works fine, and i cannot use any different method to deal with that
tried also to use angular.element instead of '$', but i've the same result, that is nothing
One can use $() in AngularJS. It is just wise to avoid using it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.