search

pfms84 / lb-gridstack

Angular 6 gridstack.js wrapper
18 stars 15 forks source link

Issue: $(...).gridstack is not a function #7

Open mehdirajani5 opened 4 years ago

mehdirajani5 commented 4 years ago

Here is the error can anybody help me out.

ERROR TypeError: $(...).gridstack is not a function at libria-gridstack.js:356 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150) at NgZone.push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular (core.js:16115) at GridstackComponent.push../node_modules/@libria/gridstack/fesm5/libria-gridstack.js.GridstackComponent.ngOnInit (libria-gridstack.js:340) at checkAndUpdateDirectiveInline (core.js:20665) at checkAndUpdateNodeInline (core.js:21929) at checkAndUpdateNode (core.js:21891) at debugCheckAndUpdateNode (core.js:22525) at debugCheckDirectivesFn (core.js:22485) View_DragAndDropComponent_0 @ DragAndDropComponent.html:44 proxyClass @ compiler.js:17945 push../nodemodules/@angular/core/fesm5/core.js.DebugContext.logError @ core.js:22729 push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:14645 (anonymous) @ core.js:16895 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391 push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150 push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:16115 push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:16895 (anonymous) @ core.js:16779 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391 onInvoke @ core.js:16156 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:390 push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150 push../node_modules/@angular/core/fesm5/core.js.NgZone.run @ core.js:16070 next @ core.js:16779 schedulerFn @ core.js:12609 push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.tryOrUnsub @ Subscriber.js:196 push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:134 push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77 push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54 push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47 push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:12593 checkStable @ core.js:16125 onHasTask @ core.js:16169 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask @ zone.js:443 push../node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount @ zone.js:463 push../node_modules/zone.js/dist/zone.js.Zone._updateTaskCount @ zone.js:291 push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:212 drainMicroTaskQueue @ zone.js:601 Promise.then (async) scheduleMicroTask @ zone.js:584 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:413 onScheduleTask @ zone.js:301 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404 push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238 push../nodemodules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:258 scheduleResolveOrReject @ zone.js:879 resolvePromise @ zone.js:825 (anonymous) @ zone.js:741 webpackJsonpCallback @ bootstrap:25 (anonymous) @ home-home-module.js:1 DragAndDropComponent.html:44 ERROR CONTEXT DebugContext {view: {…}, nodeIndex: 2, nodeDef: {…}, elDef: {…}, elView: {…}} View_DragAndDropComponent_0 @ DragAndDropComponent.html:44 proxyClass @ compiler.js:17945 push../nodemodules/@angular/core/fesm5/core.js.DebugContext.logError @ core.js:22729 push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:14650 (anonymous) @ core.js:16895 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391 push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150 push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:16115 push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:16895 (anonymous) @ core.js:16779 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391 onInvoke @ core.js:16156 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:390 push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150 push../node_modules/@angular/core/fesm5/core.js.NgZone.run @ core.js:16070 next @ core.js:16779 schedulerFn @ core.js:12609 push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.tryOrUnsub @ Subscriber.js:196 push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:134 push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77 push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54 push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47 push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:12593 checkStable @ core.js:16125 onHasTask @ core.js:16169 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask @ zone.js:443 push../node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount @ zone.js:463 push../node_modules/zone.js/dist/zone.js.Zone._updateTaskCount @ zone.js:291 push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:212 drainMicroTaskQueue @ zone.js:601 Promise.then (async) scheduleMicroTask @ zone.js:584 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:413 onScheduleTask @ zone.js:301 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404 push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238 push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:258 scheduleResolveOrReject @ zone.js:879 resolvePromise @ zone.js:825 (anonymous) @ zone.js:741 webpackJsonpCallback @ bootstrap:25 (anonymous) @ home-home-module.js:1 DragAndDropComponent.html:44 ERROR TypeError: Cannot read property 'batchUpdate' of undefined at GridstackComponent.push../node_modules/@libria/gridstack/fesm5/libria-gridstack.js.GridstackComponent._handleItemChanges (libria-gridstack.js:590) at GridstackComponent.push../node_modules/@libria/gridstack/fesm5/libria-gridstack.js.GridstackComponent.ngAfterViewInit (libria-gridstack.js:524) at callProviderLifecycles (core.js:20982) at callElementProvidersLifecycles (core.js:20956) at callLifecycleHooksChildrenFirst (core.js:20946) at checkAndUpdateView (core.js:21882) at callViewAction (core.js:22114) at execComponentViewsAction (core.js:22056) at checkAndUpdateView (core.js:21879) at callViewAction (core.js:22114)

seifeldinsamer commented 4 years ago

I hadthe same issue. what angular version are you using ?

federicomameli commented 4 years ago

I'm facing a similar issue : ERROR TypeError: $(...).gridstack is not a function at libria-gridstack.js:169 at ZoneDelegate.invoke (zone-evergreen.js:364) at Zone.run (zone-evergreen.js:123) at NgZone.runOutsideAngular (core.js:41565) at GridstackComponent.ngOnInit (libria-gridstack.js:158) at callHook (core.js:4708) at callHooks (core.js:4672) at executeInitAndCheckHooks (core.js:4612) at refreshView (core.js:11911) at refreshComponent (core.js:13331) In bundle with this other: ERROR TypeError: Cannot read property 'batchUpdate' of undefined at GridstackComponent._handleItemChanges (libria-gridstack.js:249) at GridstackComponent.ngAfterViewInit (libria-gridstack.js:233) at callHook (core.js:4708) at callHooks (core.js:4672) at executeInitAndCheckHooks (core.js:4612) at refreshView (core.js:11969) at refreshComponent (core.js:13331) at refreshChildComponents (core.js:11622) at refreshView (core.js:11945) at refreshComponent (core.js:13331) I don't know if it's the same problem. "@libria/gridstack": "^9.0.0", "@angular/core": "~9.1.1", "bootstrap": "^4.4.1", "gridstack": "^1.1.1", "jquery": "^3.5.0", "jquery-ui-dist": "^1.12.1",

Kuorti commented 4 years ago

Same problem

shashi97 commented 4 years ago

Same problem with me,

Package.json

"@angular/animations": "~9.0.0",
    "@angular/common": "~9.0.0",
    "@angular/compiler": "~9.0.0",
    "@angular/core": "~9.0.0",
    "@angular/forms": "~9.0.0",
    "@angular/localize": "~9.0.0",
    "@angular/platform-browser": "~9.0.0",
    "@angular/platform-browser-dynamic": "~9.0.0",
    "@angular/router": "~9.0.0",
    "@fortawesome/angular-fontawesome": "^0.5.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.26",
    "@fortawesome/free-solid-svg-icons": "^5.12.0",
    **"@libria/gridstack": "^9.0.1",**
    "@ng-bootstrap/ng-bootstrap": "^5.2.1",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "ag-grid-angular": "^22.1.1",
    "ag-grid-community": "^22.1.1",
    "bootstrap": "^4.4.1",
    "d3": "^3.5.17",
    "deepmerge": "^4.2.2",
    "font-awesome": "^4.7.0",
    **"gridstack": "^1.1.1",**
    "jquery": "^3.4.1",
    "jquery-easing": "0.0.1",
    "jquery-ui-dist": "^1.12.1",
    "jquery-ui-touch-punch": "^0.2.3",
    "moment": "^2.24.0",
    "ng-bpm": "^9.3.3",
    "ng-bpm-ui": "^9.3.3",
    "ng2-nvd3": "^2.0.0",
    "ng2-search-filter": "^0.5.1",
    "ngx-clipboard": "^12.3.0",
    "nvd3": "^1.8.6",
    "pdfmake": "^0.1.63",
    "protractor-jasmine2-html-reporter": "0.0.7",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "underscore": "^1.9.1",
    "zone.js": "~0.10.2"
adumesny commented 4 years ago

Guys, if you're you're using gridstack 1.x (and upcoming 2.x) jquery has been removed from API so $(...).gridstack is not a function anymore. There is new API to access and GridStack.init() the grid.

ranjeettamil commented 4 years ago

Hi Adumesny, I updated to latest version ("gridstack": "~v1.1.2",) and removed other API dependency (lodash, jquery) in angular json file, even after I am facing same error. Below is my config,

Package JSON

"gridstack": "~v1.1.2",

Angular.json file.

"scripts": [ "node_modules/jquery/dist/jquery.js", "node_modules/select2/dist/js/select2.min.js" "node_modules/gridstack/dist/gridstack.all.js", ]

Issue image

@adumesny Can you please suggest me to resolve this issue.

adumesny commented 4 years ago

https://github.com/gridstack/gridstack.js#migrating-to-v100 I.E. this lib code HAS TO CHANGE to support 1.x - see #4

michaelsizonenko commented 4 years ago

Same issue.

Notice the lb-gridstack angular wrapper works with gridstack v. 0.3.0

Run this:

yarn add gridstack@~0.3.0 jquery@~2.2.0 jquery-ui-dist@~1.12.1 lodash@~4.17.4

Works for me. However it would be nice to upgrade angular wrapper up to recent version of gridstack.

adumesny commented 4 years ago

you might be able to use as far as 0.6.4 - I don't know as I don't use this lib. I have my own angular component wrapper, though I've been thinking of publishing one along with gridstack since that is what I use. This lib only has 80 downloads a week (vs 25k for gridstack) so not exactly popular :(

K0d343V3r commented 4 years ago

@adumesny That would be great if you could publish your Angular wrapper. We have an Angular 8 app and looking to use GridStack for our project.

adumesny commented 4 years ago

@K0d343V3r I wouldn't wait. I barely have the time to work on gridstack (without help) so publishing my Angular wrapper (which has a lot of custom code we use at VMWare) is not gonna happen...