CODEWITHSUNDEEP
jquerytypescript
Robert Voica
Robert Voica

Reputation: 71

$.notify is not a function using Bootstrap notify in typescript

I am trying to show an alert on my site using bootstrap-notify v3.1.3 , typescript, aurelia and VS2015.

My aurelia component is:

//myAlert.ts

import * as $ from "jquery";

export class FlAlert {

    constructor() {
    }

    alert() {
        $.notify("Hello");
    }
}

//myAlert.html

<template>
    <button class="btn" click.delegate="alert()">showAlert</button>
</template>

When I click the button i receive this error: "Uncaught TypeError: $.notify is not a function"

I included in my project bootstrap-notify.d.ts, so VS recognize "notify" method from d.ts file

//bootstrap-notify.d.ts

/// <reference path="../jquery/jquery.d.ts" />

/* tslint:disable: interface-name no-any */

interface JQueryStatic {
    notify(message: string): INotifyReturn;
    notify(opts: INotifyOptions, settings?: INotifySettings): INotifyReturn;
    notifyDefaults(settings: INotifySettings): void;
    notifyClose(): void;
    notifyClose(command: string): void;
}

interface INotifyOptions {
    message: string;
    title?: string;
    icon?: string;
    url?: string;
    target?: string;
}

interface INotifySettings {
    element?: string;
    position?: string;
    type?: string;
    allow_dismiss?: boolean;
    allow_duplicates?: boolean;
    newest_on_top?: boolean;
    showProgressbar?: boolean;
    placement?: {
        from?: string;
        align?: string;
    };
    offset?: number;
    spacing?: number;
    z_index?: number;
    delay?: number;
    timer?: number;
    url_target?: string;
    mouse_over?: Function;
    animate?: {
        enter?: string;
        exit?: string;
    };
    onShow?: () => void;
    onShown?: () => void;
    onClose?: () => void;
    onClosed?: () => void;
    icon_type?: string;
    template?: string;
}

interface INotifyReturn {
    $ele: JQueryStatic;
    close: () => void;
    update: (command: string, update: any) => void;
}

Edit:

This is the entry point of Aurelia app:

export function configure(aurelia: Aurelia) {

    aurelia.use
        .singleton(Constants)
        .plugin("bootstrap", null)
        .standardConfiguration()
        .developmentLogging();

    aurelia
        .start()
        .then(a => a.setRoot('Components/Layout/app'));
}

Upvotes: 5

Views: 6326

Answers (1)

dee-see
dee-see

Reputation: 24078

I'm three years late but I had the same problem today and solved it by simply adding import 'bootstrap-notify'; to my component.

Upvotes: 4

Related Questions