Skip to content
This repository has been archived by the owner on Sep 7, 2020. It is now read-only.

Getting error on modal.open(): this.$modal.appendTo(...).modal is not a function #17

Closed
d1820 opened this issue Mar 24, 2016 · 10 comments
Closed

Getting error on modal.open(): this.$modal.appendTo(...).modal is not a function #17

d1820 opened this issue Mar 24, 2016 · 10 comments
Labels
bug

Comments

@d1820
Copy link

d1820 commented Mar 24, 2016

I took the example given on the code tab, and an getting an error

ng2-bs3-modal.ts:19 EXCEPTION: Error during evaluation of "click"
ng2-bs3-modal.ts:19 EXCEPTION: Error during evaluation of "click"BrowserDomAdapter.logError @ ng2-bs3-modal.ts:19BrowserDomAdapter.logGroup @ ng2-bs3-modal.ts:19ExceptionHandler.call @ ng2-bs3-modal.ts:19(anonymous function) @ ng2-bs3-modal.ts:19schedulerFn @ ng2-bs3-modal.ts:19SafeSubscriber.__tryOrUnsub @ ng2-bs3-modal.ts:19SafeSubscriber.next @ ng2-bs3-modal.ts:19Subscriber._next @ ng2-bs3-modal.ts:19Subscriber.next @ ng2-bs3-modal.ts:19Subject._finalNext @ ng2-bs3-modal.ts:19Subject._next @ ng2-bs3-modal.ts:19Subject.next @ ng2-bs3-modal.ts:19EventEmitter.emit @ ng2-bs3-modal.ts:19NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ng2-bs3-modal.ts:19NgZoneImpl.inner.inner.fork.onHandleError @ ng2-bs3-modal.ts:19ZoneDelegate.handleError @ angular2-polyfills.js:326Zone.runGuarded @ angular2-polyfills.js:235NgZoneImpl.runInner @ ng2-bs3-modal.ts:19NgZone.run @ ng2-bs3-modal.ts:19outsideHandler @ ng2-bs3-modal.ts:19ZoneDelegate.invokeTask @ angular2-polyfills.js:355Zone.runTask @ angular2-polyfills.js:254ZoneTask.invoke @ angular2-polyfills.js:422
ng2-bs3-modal.ts:19 ORIGINAL EXCEPTION: TypeError: this.$modal.appendTo(...).modal is not a functionBrowserDomAdapter.logError @ ng2-bs3-modal.ts:19ExceptionHandler.call @ ng2-bs3-modal.ts:19(anonymous function) @ ng2-bs3-modal.ts:19schedulerFn @ ng2-bs3-modal.ts:19SafeSubscriber.__tryOrUnsub @ ng2-bs3-modal.ts:19SafeSubscriber.next @ ng2-bs3-modal.ts:19Subscriber._next @ ng2-bs3-modal.ts:19Subscriber.next @ ng2-bs3-modal.ts:19Subject._finalNext @ ng2-bs3-modal.ts:19Subject._next @ ng2-bs3-modal.ts:19Subject.next @ ng2-bs3-modal.ts:19EventEmitter.emit @ ng2-bs3-modal.ts:19NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ng2-bs3-modal.ts:19NgZoneImpl.inner.inner.fork.onHandleError @ ng2-bs3-modal.ts:19ZoneDelegate.handleError @ angular2-polyfills.js:326Zone.runGuarded @ angular2-polyfills.js:235NgZoneImpl.runInner @ ng2-bs3-modal.ts:19NgZone.run @ ng2-bs3-modal.ts:19outsideHandler @ ng2-bs3-modal.ts:19ZoneDelegate.invokeTask @ angular2-polyfills.js:355Zone.runTask @ angular2-polyfills.js:254ZoneTask.invoke @ angular2-polyfills.js:422
ng2-bs3-modal.ts:19 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ ng2-bs3-modal.ts:19ExceptionHandler.call @ ng2-bs3-modal.ts:19(anonymous function) @ ng2-bs3-modal.ts:19schedulerFn @ ng2-bs3-modal.ts:19SafeSubscriber.__tryOrUnsub @ ng2-bs3-modal.ts:19SafeSubscriber.next @ ng2-bs3-modal.ts:19Subscriber._next @ ng2-bs3-modal.ts:19Subscriber.next @ ng2-bs3-modal.ts:19Subject._finalNext @ ng2-bs3-modal.ts:19Subject._next @ ng2-bs3-modal.ts:19Subject.next @ ng2-bs3-modal.ts:19EventEmitter.emit @ ng2-bs3-modal.ts:19NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ng2-bs3-modal.ts:19NgZoneImpl.inner.inner.fork.onHandleError @ ng2-bs3-modal.ts:19ZoneDelegate.handleError @ angular2-polyfills.js:326Zone.runGuarded @ angular2-polyfills.js:235NgZoneImpl.runInner @ ng2-bs3-modal.ts:19NgZone.run @ ng2-bs3-modal.ts:19outsideHandler @ ng2-bs3-modal.ts:19ZoneDelegate.invokeTask @ angular2-polyfills.js:355Zone.runTask @ angular2-polyfills.js:254ZoneTask.invoke @ angular2-polyfills.js:422
ng2-bs3-modal.ts:19 TypeError: this.$modal.appendTo(...).modal is not a function
    at ModalInstance.create (ng2-bs3-modal.ts:19)
    at ModalInstance.open (ng2-bs3-modal.ts:19)
    at ModalComponent.open (ng2-bs3-modal.ts:19)
    at AbstractChangeDetector.ChangeDetector_PolicyListComponent_1.handleEventInternal (viewFactory_PolicyListComponent:264)
    at AbstractChangeDetector.handleEvent (ng2-bs3-modal.ts:19)
    at AppView.triggerEventHandlers (ng2-bs3-modal.ts:19)
    at eval (viewFactory_PolicyListComponent:547)
    at ng2-bs3-modal.ts:19
    at ng2-bs3-modal.ts:19
    at ZoneDelegate.invoke (angular2-polyfills.js:322)

Current Versions:

 "angular2": "^2.0.0-beta.11",
    "bootstrap": "^3.3.6",
    "es6-promise": "^3.1.2",
    "es6-shim": "^0.35.0",
    "font-awesome": "^4.5.0",
    "jquery": "^2.1.4",
    "ng2-bs3-modal": "^0.4.2",
    "reflect-metadata": "0.1.3",
    "rxjs": "^5.0.0-beta.3",
    "systemjs": "^0.19.24",
    "toastr": "^2.1.2",
    "zone.js": "^0.6.5"

Code is as follows

Component:

import { MODAL_DIRECTIVES } from 'ng2-bs3-modal/ng2-bs3-modal';

@Component({
    selector: 'one-policylist',
    templateUrl: 'views/policylist.view.html',
    directives: [PolicyCardComponent, ContentLoadingComponent, MODAL_DIRECTIVES]
})

View:

<ul *ngIf="policies.length > 0" class="policy-list-container">
    <li><button type="button" class="btn btn-default" (click)="modal.open()">Open me!</button></li>
</ul>
<div *ngIf="policies.length == 0">
    <one-contentloading [message]="'Retrieving policies...'"></one-contentloading> 
</div>
<modal #modal>
    <modal-header [show-close]="true">
        <h4 class="modal-title">I'm a modal!</h4>
    </modal-header>
    <modal-body>
        Hello World!
    </modal-body>
    <modal-footer [show-default-buttons]="true"></modal-footer>
</modal>

Any help would be great
@d1820 d1820 changed the title Getting error on moda.open() Getting error on modal.open(): this.$modal.appendTo(...).modal is not a function Mar 24, 2016
@dougludlow
Copy link
Owner

I haven't had any luck with angular beta.11, you might try beta.9 and see if it works from there. If not, let me know, I might've missed something on my most recent release. (I rewrote a bunch of stuff)

@d1820
Copy link
Author

d1820 commented Mar 25, 2016

rolling back to beta.9 shows the modal, and lets the default save button work.

However, pressing the cancel button on the example form causes this error:


ng2-bs3-modal.ts:19 Error: Task does not support cancellation, or is already canceled.
    at ZoneDelegate.cancelTask (http://localhost:17604/lib/shims/angular2-polyfills.js:369:24)
    at Zone.cancelTask (http://localhost:17604/lib/shims/angular2-polyfills.js:279:45)
    at zoneAwareRemoveEventListener (http://localhost:17604/lib/shims/angular2-polyfills.js:872:25)
    at HTMLDivElement.removeEventListener (eval at createNamedFn (http://localhost:17604/lib/shims/angular2-polyfills.js:953:18), <anonymous>:3:46)
    at Function.jQuery.removeEvent (http://localhost:17604/lib/commonlib.js:51305:8)
    at Object.jQuery.event.remove (http://localhost:17604/lib/commonlib.js:51030:13)
    at HTMLDivElement.<anonymous> (http://localhost:17604/lib/commonlib.js:51463:17)
    at Function.jQuery.extend.each (http://localhost:17604/lib/commonlib.js:46711:19)
    at jQuery.fn.jQuery.each (http://localhost:17604/lib/commonlib.js:46483:17)
    at jQuery.fn.extend.off (http://localhost:17604/lib/commonlib.js:51462:15)
  -------------   Elapsed: 3515 ms; At: Thu Mar 24 2016 17:12:21 GMT-0700 (US Mountain Standard Time)   -------------  
    at Object.Zone.longStackTraceZoneSpec.onScheduleTask (http://localhost:17604/lib/shims/angular2-polyfills.js:1324:23)
    at ZoneDelegate.scheduleTask (http://localhost:17604/lib/shims/angular2-polyfills.js:332:50)
    at Zone.scheduleEventTask (http://localhost:17604/lib/shims/angular2-polyfills.js:276:40)
    at zoneAwareAddEventListener (http://localhost:17604/lib/shims/angular2-polyfills.js:860:11)
    at HTMLDivElement.addEventListener (eval at createNamedFn (http://localhost:17604/lib/shims/angular2-polyfills.js:953:18), <anonymous>:3:43)
    at Object.jQuery.event.add (http://localhost:17604/lib/commonlib.js:50943:12)
    at HTMLDivElement.<anonymous> (http://localhost:17604/lib/commonlib.js:50849:16)
    at Function.jQuery.extend.each (http://localhost:17604/lib/commonlib.js:46711:19)
  -------------   Elapsed: 1107 ms; At: Thu Mar 24 2016 17:12:20 GMT-0700 (US Mountain Standard Time)   -------------  
    at Object.Zone.longStackTraceZoneSpec.onScheduleTask (http://localhost:17604/lib/shims/angular2-polyfills.js:1324:23)
    at ZoneDelegate.scheduleTask (http://localhost:17604/lib/shims/angular2-polyfills.js:332:50)
    at Zone.scheduleEventTask (http://localhost:17604/lib/shims/angular2-polyfills.js:276:40)
    at zoneAwareAddEventListener (http://localhost:17604/lib/shims/angular2-polyfills.js:860:11)
    at HTMLDivElement.addEventListener (eval at createNamedFn (http://localhost:17604/lib/shims/angular2-polyfills.js:953:18), <anonymous>:3:43)
    at Object.jQuery.event.add (http://localhost:17604/lib/commonlib.js:50943:12)
    at HTMLDivElement.<anonymous> (http://localhost:17604/lib/commonlib.js:50849:16)
    at Function.jQuery.extend.each (http://localhost:17604/lib/commonlib.js:46711:19)

This seems to happen on any second opening of the modal, then trying to click any of the buttons or close icon.
Thanks

@dougludlow
Copy link
Owner

Odd... I've only seen the "Task does not support cancellation, or is already canceled." error on versions above beta.9. The demo is using beta.9 and doesn't throw that error on close. I wonder what could be different.

When you downgraded your angular version to beta.9 did you also downgrade your zone.js to 0.5.15? I think beta.12 relies on 0.6.5 and the "Task does not support cancellation, or is already canceled." error is related to zone.js.

@d1820
Copy link
Author

d1820 commented Mar 25, 2016

Aww yes the magical dance of version matching.. downgrading zone.js to 5.15 worked.

to close this out final versions used with this version: 0.4.2

"angular2": "2.0.0-beta.9",
        "bootstrap": "^3.3.6",
        "es6-promise": "^3.1.2",
        "es6-shim": "^0.35.0",
        "font-awesome": "^4.5.0",
        "reflect-metadata": "0.1.3",
        "rxjs": "^5.0.0-beta.3",
        "systemjs": "^0.19.24",
        "zone.js": "0.5.15",

Thanks

@d1820 d1820 closed this as completed Mar 25, 2016
@nikkwong
Copy link

nikkwong commented Apr 6, 2016

I'm getting this too.

  "dependencies": {
    "angular2": "2.0.0-beta.9",
    "es6-module-loader": "^0.17.8",
    "es6-shim": "^0.33.3",
    "ng2-bootstrap": "^1.0.5",
    "ng2-cookies": "^0.1.4",
    "ng2-file-upload": "^1.0.0-beta.1",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.3",
    "systemjs": "~0.19.24",
    "underscore": "^1.8.3",
    "ws": "^1.0.1",
    "zone.js": "^0.5.15"
  }

@nikkwong
Copy link

nikkwong commented Apr 6, 2016 

angular2.js?1459916752966:23597 TypeError: this.$modal.appendTo(...).modal is not a function
    at ModalInstance.init (http://localhost/node_modules/ng2-bs3-modal/components/modal-instance.js:50:38)
    at new ModalInstance (http://localhost/node_modules/ng2-bs3-modal/components/modal-instance.js:12:14)
    at ModalComponent.ngAfterViewInit (http://localhost/node_modules/ng2-bs3-modal/components/modal.js:27:25)
    at AbstractChangeDetector.ChangeDetector_TasksForm_0.afterViewLifecycleCallbacksInternal (viewFactory_TasksForm:579:82)
    at AbstractChangeDetector.afterViewLifecycleCallbacks (http://localhost/node_modules/angular2/bundles/angular2.js?1459916752966:8206:12)
    at AbstractChangeDetector.runDetectChanges (http://localhost/node_modules/angular2/bundles/angular2.js?1459916752966:8145:14)
    at AbstractChangeDetector._detectChangesInViewChildren (http://localhost/node_modules/angular2/bundles/angular2.js?1459916752966:8218:14)
    at AbstractChangeDetector.runDetectChanges (http://localhost/node_modules/angular2/bundles/angular2.js?1459916752966:8143:12)
    at AbstractChangeDetector._detectChangesInViewChildren (http://localhost/node_modules/angular2/bundles/angular2.js?1459916752966:8218:14)
    at AbstractChangeDetector.runDetectChanges (http://localhost/node_modules/angular2/bundles/angular2.js?1459916752966:8143:12)

@dougludlow dougludlow reopened this Apr 7, 2016
@dougludlow
Copy link
Owner

@nikkwong what version of ng2-bs3-modal are you using?

@dougludlow dougludlow added the bug label Apr 7, 2016
@dougludlow
Copy link
Owner

No response, closing issue.

@dougludlow
Copy link
Owner

Please open a new issue if you are still experiencing problems.

@born2net
Copy link

having same issue

EXCEPTION: Error in ./UsersDetails class UsersDetails - inline template:1:2 caused by: this.$modal.appendTo(...).modal is not a function
  ErrorHandler.handleError	
  next	
  schedulerFn	
  SafeSubscriber.__tryOrUnsub

with angular-cli

any ideas?

@nhhockeyplayer nhhockeyplayer mentioned this issue Mar 16, 2018
Closed
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@d1820 @dougludlow @born2net @nikkwong