0

problem

  • i was using jquery with angular js .

error

angular.js?v=1.6.10_1474366451:12116 TypeError: ha is not a function
at eval (eval at <anonymous> (http://localhost/weblogs-s2/web/common/assets/libs/jquery/jquery.min.js?v=1.6.10:2:2616), <anonymous>:17:349)
at eval (eval at <anonymous> (http://localhost/weblogs-s2/web/common/assets/libs/jquery/jquery.min.js?v=1.6.10:2:2616), <anonymous>:308:401)
at http://localhost/weblogs-s2/web/common/assets/libs/jquery/jquery.min.js?v=1.6.10:2:2616
at Function.globalEval (http://localhost/weblogs-s2/web/common/assets/libs/jquery/jquery.min.js?v=1.6.10:2:2627)
at text script (http://localhost/weblogs-s2/web/common/assets/libs/jquery/jquery.min.js?v=1.6.10:4:26788)
at Qc (http://localhost/weblogs-s2/web/common/assets/libs/jquery/jquery.min.js?v=1.6.10:4:18505)
at x (http://localhost/weblogs-s2/web/common/assets/libs/jquery/jquery.min.js?v=1.6.10:4:21926)
at b (http://localhost/weblogs-s2/web/common/assets/libs/jquery/jquery.min.js?v=1.6.10:4:26298)
at Object.send (http://localhost/weblogs-s2/web/common/assets/libs/jquery/jquery.min.js?v=1.6.10:4:26402)
at Function.ajax (http://localhost/weblogs-s2/web/common/assets/libs/jquery/jquery.min.js?v=1.6.10:4:21703) <div id="wrapper" ui-view="" class="container ng-scope">(anonymous function) @ angular.js?v=1.6.10_1474366451:12116(anonymous function) @ angular.js?v=1.6.10_1474366451:8976invokeLinkFn @ angular.js?v=1.6.10_1474366451:8527nodeLinkFn @ angular.js?v=1.6.10_1474366451:8034compositeLinkFn @ angular.js?v=1.6.10_1474366451:7435publicLinkFn @ angular.js?v=1.6.10_1474366451:7309updateView @ angular-ui-router.js?v=1.6.10_1474366451:2733(anonymous function) @ angular-ui-router.js?v=1.6.10_1474366451:2697$broadcast @ angular.js?v=1.6.10_1474366451:15893$state.transition.resolved.then.$state.transition @ angular-ui-router.js?v=1.6.10_1474366451:2114processQueue @ angular.js?v=1.6.10_1474366451:14347(anonymous function) @ angular.js?v=1.6.10_1474366451:14363$eval @ angular.js?v=1.6.10_1474366451:15574$digest @ angular.js?v=1.6.10_1474366451:15385$apply @ angular.js?v=1.6.10_1474366451:15679done @ angular.js?v=1.6.10_1474366451:10166completeRequest @ angular.js?v=1.6.10_1474366451:10338requestLoaded @ angular.js?v=1.6.10_1474366451:10279

Failed to parse SourceMap: http://localhost/weblogs-s2/web/metisMenu.js.map

      <div id="wrapper" ui-view="" class="container ng-scope">

angular js code

 var sbAdmin2 = angular.module('sbAdmin2', ['ui.router','ngSanitize']);


sbAdmin2.config(function($stateProvider, $urlRouterProvider) {

$urlRouterProvider.otherwise('');

$stateProvider

    // HOME STATES AND NESTED VIEWS ========================================
    .state('Dashboard', {
        url: '/dashboard/data',
        templateUrl: 'http://localhost/weblogs-s2/web/weblogs_dev.php/dashboard/data'
    })

   })

script i have used

 <html>
  <head>
    <script src="{{ asset ('common/assets/libs/jquery/jquery.min.js') }}?v={{ app_version }}"></script>
     <script src="{{ asset ('common/assets/libs/jquery/jquery-ui/js/jquery-ui.min.js') }}?v={{ app_version }}"></script>
     <script src="{{asset('common/assets/libs/angular/source/angular.js') }}?v={{ app_version }}_{{ NOW }}"></script>
     <script src="{{ asset ('common/assets/libs/angular/source/modules/angular-ui-router.js') }}?v={{ app_version }}_{{ NOW }}"></script>
     <script src="{{ asset ('common/assets/libs/angular/source/modules/angular-sanitize.js') }}?v={{ app_version }}_{{ NOW }}"></script>
 </head>
  <body>
  <div id="wrapper" ui-view class="container ng-scope" >
   </div>
 </body>
</html>

i have googled

  • jquery conflicting with angular js library.
  • when i load angular js before jquery application works fine.
  • but i need to populate the data in datatable then datatable is is not working.
  • which means for datatable require jquery to first to first load.

what i need

  • is it possible to load jquery before angular js library or it may conflicts.

    problem arise when i was using datatable using jquery then it  would not work when i used jquery after angular js.

any suggestion is most welcome

afeef
  • 4,396
  • 11
  • 35
  • 65

1 Answers1

0

Angular v1.3 only supports jQuery v2.1 and above

Angular 1.3 only supports jQuery 2.1 or above. jQuery 1.7 and newer might work correctly with Angular but we don't guarantee that.

Source: https://docs.angularjs.org/misc/faq

It looks like you are using jQuery v1.6.10 (if that even exists). Try updating to a newer version of jQuery.

(Also make sure you're using Angular v1.* and not Angular v2.*)

Daniel Crisp
  • 1,945
  • 1
  • 15
  • 23
  • hi daniel i think we cannot use jquery with angular js – afeef Sep 27 '16 at 09:34
  • we are using datatable lib of symfony2 but we are facing angular.js?v=1.6.10_1474973236:12116 TypeError: $(...).dataTable is not a function – afeef Sep 27 '16 at 10:50
  • You can definitely use jQuery with Angular! Are you including the dataTable script? Make sure you include it after jQuery. Also make sure Angular is included after jQuery – Daniel Crisp Sep 28 '16 at 09:12
  • See: http://stackoverflow.com/questions/31632294/typeerror-datatable-is-not-a-function – Daniel Crisp Sep 28 '16 at 09:13
  • i think im getting error bcs of WARNING: Tried to load angular more than once.error – afeef Sep 29 '16 at 07:41
  • i have viewd http://stackoverflow.com/questions/22595878/tried-to-load-angular-more-than-once – afeef Sep 29 '16 at 07:46