asked on

Bootstrap alert not closing onclick of "X" on its window

Experts,

I have an angularJS , Bootstrap application. I have an bootstrap alert window which dont close when I hit the "X" on the right hand top corner. I think the problem came after I updated my version of Bootstrap libraries.

My current versions are:

 
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
 <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.2.js"></script>

Open in new window

calling place:

<div ng-repeat="alertMessage in alert.alertMessages">
    <uib-alert type="{{alertMessage.type}}" class="alert anim-fade" close="alert.removeAlert(alertMessage)"><span ng-bind-html="alertMessage.message"></span></uib-alert>
</div>

Open in new window

SRF.directive("systemAlert", ['SystemAlertSvc', function (SystemAlertSvc) {
    return {
        templateUrl: 'Scripts/directives/system-alert/system-alert.html',
        restrict: 'E',
        replace: true,
        scope: {
            successDisplaySeconds: '=?',
            errorDisplaySeconds: '=?',
            infoDisplaySeconds: '=?',
            warningDisplaySeconds: '=?',
            instanceId: '=?'
        },
        controllerAs: 'alert',
        controller: ['$scope', '$timeout', function ($scope, $timeout) {
            this.alertMessages = [];
            
            this.newAlert = function (_type, _message) {
                var alertMessage = null;
                var displayMilliseconds = null;

                if (_message === undefined && _type === 'success') {
                    _message = 'Save Successful';
                }
                else if (_message === undefined && _type !== 'success') {
                    throw new Error("Error message missing from non-success alert");
                }

                switch (_type) {
                    case "success":
                        displayMilliseconds = $scope.successDisplaySeconds * 1000;
                        break;
                    case "danger":
                        displayMilliseconds = $scope.errorDisplaySeconds * 1000;
                        break;
                    case "info":
                        displayMilliseconds = $scope.infoDisplaySeconds * 1000;
                        break;
                    case "warning":
                        displayMilliseconds = $scope.warningDisplaySeconds * 1000;
                        break;
                    default:
                        throw new TypeError("Unknown alert message type");
                }

                // check if we have an error message that came back from the server, otherwise, it's a straight up string message
                if (typeof _message === 'object') {
                    if (_message.data && _message.data.Message && _message.data.MessageDetail) { // 404 error generally
                        alertMessage = _message.data.Message + '  ' + _message.data.MessageDetail;
                    }
                    else if (_message.data && _message.data.ExceptionMessage && _message.data.StackTrace) { // standard .Net exception
                        alertMessage = _message.data.Message + "  " + _message.data.ExceptionType + " " + _message.data.ExceptionMessage + " <br/> Stack Trace: " + _message.data.StackTrace;
                    }
                    else if (_message.data && typeof _message.data === 'string') { // .Net HttpResponseException
                        alertMessage = _message.data;
                    }
                }
                else if (typeof _message === 'string') {
                    alertMessage = _message;
                }

                if (alertMessage === null) {
                    throw new TypeError("Unknown object passed as the message parameter in the 'newAlert' function.  The object was: " + JSON.stringify(_message));
                }

                var alert = {
                    message: alertMessage,
                    type: _type
                };

                this.alertMessages.unshift(alert);

                // remove the alert message from the stack
                $timeout(function () { this.removeAlert(alert); }.bind(this), displayMilliseconds);
            }.bind(this);

      [b]      this.removeAlert = function (alert) {
                var index = this.alertMessages.indexOf(alert);
                this.alertMessages.splice(index, 1);
            }.bind(this);[/b]

        }],
        link: function ($scope, iElem, iAttr, ctrl) {
            if (!$scope.successDisplaySeconds) {
                $scope.successDisplaySeconds = 5;
            }

            if (!$scope.errorDisplaySeconds) {
                $scope.errorDisplaySeconds = 40;
            }

            if (!$scope.infoDisplaySeconds) {
                $scope.infoDisplaySeconds = 10;
            }

            if (!$scope.warningDisplaySeconds) {
                $scope.warningDisplaySeconds = 20;
            }

            $scope.instanceId = SystemAlertSvc.registerInstance(ctrl);

            $scope.$on('$destroy', function () {
                SystemAlertSvc.unregisterInstance($scope.instanceId);
            });
        }
    };
}]);

SRF.factory('SystemAlertSvc', [function () {
    var instances = {};
    var lastInstanceId = 0;

    var systemAlertSvc = {
        alertTypes: {
            success: 'success',
            error: 'danger',
            info: 'info',
            warning: 'warning'
        },

        clearAlerts: function (instanceId) {
            if (instanceId) {
                if (instances[instanceId.toString()]) {
                    instances[instanceId.toString()].alertMessages = [];
                }
                else {
                    throw new Error("'instanceId' " + instanceId.toString() + " does not exist.");
                }
            }
            else {
                // clear the alerts in all instances
                for (var prop in instances) {
                    instances[prop].alertMessages = [];
                }
            }
        },

        newAlert: function (type, message, instanceId) {
            if (!instanceId) {
                var maxInstance = 0;
                // locate the most recently added instance
                for(var prop in instances) {
                    var currentInstance = Number(prop);

                    if (currentInstance > maxInstance) {
                        maxInstance = currentInstance;
                    }
                }

                instanceId = maxInstance;
            }

            if (!instances[instanceId.toString()]) {
                throw new Error("'instanceId' " + instanceId.toString() + " does not exist.");
            }

            var systemAlertCtrl = instances[instanceId.toString()];

            systemAlertCtrl.newAlert(type, message);
        },

        registerInstance: function (systemAlertCtrl) {
            var instanceId = lastInstanceId + 1;

            instances[instanceId.toString()] = systemAlertCtrl;

            lastInstanceId = instanceId;

            return instanceId;
        },

        unregisterInstance: function (instanceId) {
            if (!instances[instanceId.toString()]) {
                throw new Error("'instanceId' " + instanceId.toString() + " does not exist.");
            }

            delete instances[instanceId.toString()];
        }
    };

    return systemAlertSvc;
}]);

Open in new window

Subbu G

ASKER

I tried to use this link to create mine , it works here but not in my code :(
https://angular-ui.github.io/bootstrap/#/alert

Subbu G

ASKER

@JulianH

can you help?

Subbu G

ASKER

My plunker: http://plnkr.co/edit/YkUpFveriXntm342Qk17?p=preview

It works but not in my application. Any ideas?

Julian Hansen

Do you have a link to the page - or can you post full source.

Subbu G

ASKER

Thanks @JulianH

here you go!

Full source

<!DOCTYPE html>
<html lang="en" ng-app="StateRevolvingFund">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>State Revolving Fund</title>
    <base id="baseUrl" href="/" />

    <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/Content/animate.css" rel="stylesheet"/>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Scripts/directives/multi-selector/angular-multi-select.css" rel="stylesheet"/>
<link href="/Content/font-awesome.css" rel="stylesheet"/>
<link href="/Content/som-custom.css" rel="stylesheet"/>
<link href="/Content/som-custom.desktop.css" rel="stylesheet"/>
<link href="/Content/som-custom.tablet.css" rel="stylesheet"/>
<link href="/Content/Site.css" rel="stylesheet"/>
<link href="/Content/Site.desktop.css" rel="stylesheet"/>
<link href="/Content/Site.tablet.css" rel="stylesheet"/>

    
    <link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css">
</head>
<body id="body" ng-cloak>
    <a class="sr-only" href="#main">Skip to main content</a>
    <a class="sr-only" href="#main-navigation">Skip to main navigation</a>
    <div class="mainWrap">
        <nav class="navbar navbar-inverse som-brandbar" role="navigation" aria-label="Global Navigation">
    <div class="container">
        <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" ng-click="mainMenu.isMainMenuCollapsed = !mainMenu.isMainMenuCollapsed">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div uib-collapse="mainMenu.isMainMenuCollapsed" class="collapse navbar-collapse global">
                    <ul class="nav navbar-nav global-links">
                            <ng-form name="roleSwitch" class="navbar-form navbar-left">
                                <div class="input-group input-group-sm" ng-click="$event.stopPropagation()" ng-controller="RoleSwitchCtrl">
                                    <select name="roleSelect" class="role-switcher form-control" ng-model="roleSwitch.selectedRole" class="form-control"
                                            ng-options="item as item.RoleName for item in roleSwitch.roles">
                                        <option value="">Select A Role</option>
                                    </select>
                                    <span class="input-group-btn">
                                        <button class="btn btn-agency" type="button" ng-click="roleSwitch.switchRole()">Change</button>
                                    </span>
                                </div>
                            </ng-form>
                        <li ng-click="mainMenu.isMainMenuCollapsed = true">
                            <a href="Home">Home</a>
                        </li>
                        <li ng-if="mainMenu.HasPermissions('EditProject')">
                            <a href="Project/">Create Project</a>
                        </li>
                        <ng-form name="findForm" class="navbar-form navbar-left">
                            <div class="input-group input-group-sm" ng-click="$event.stopPropagation()">
                                <input type="text" ui-mask="9999-99" placeholder="####-##" ng-model="mainMenu.projectNumber" class="form-control project-search" id="project_search" enter-key-press="mainMenu.GetProject()" />
                                <span class="input-group-btn">
                                    <button class="btn btn-agency" type="button" ng-click="mainMenu.GetProject()">Find</button>
                                </span>
                            </div>
                        </ng-form>
                        <li ng-if="mainMenu.HasPermissions('GenerateReport')">
                            <a href="Report">Reports</a>
                        </li>
                            <li class="dropdown" uib-dropdown>
                                <a href="#" class="dropdown-toggle" uib-dropdown-toggle data-toggle="dropdown" role="button" aria-expanded="false">Admin <span class="caret"></span></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li ng-click="mainMenu.isMainMenuCollapsed = true" ng-if="mainMenu.HasPermissions('EditAdminDisbursement')"><a href="EditAdminDisbursements">Admin Disbursements</a></li>
                                    <li ng-click="mainMenu.isMainMenuCollapsed = true" ng-if="mainMenu.HasPermissions('EditDivision')"><a href="EditDivisions">Divisions</a></li>
                                    <li ng-click="mainMenu.isMainMenuCollapsed = true" ng-if="mainMenu.HasPermissions('EditEmployee')"><a href="EditEmployees">Employees</a></li>
                                    <li ng-click="mainMenu.isMainMenuCollapsed = true" ng-if="mainMenu.HasPermissions('EditFirm')"><a href="EditFirms">Firms</a></li>
                                    <li ng-if="mainMenu.HasPermissions('EditFundingSource')"><a href="#"><span class="fa fa-caret-left caret-left"></span> Funding Sources</a>
                                        <ul class="dropdown-menu sub-menu">
                                            <li ng-click="mainMenu.isMainMenuCollapsed = true" ng-if="mainMenu.HasPermissions('EditFundingSource')"><a href="EditFundingSources/{{srfEnums.fundingSourceTypes.CapGrant}}">Cap Grants</a></li>
                                            <li ng-click="mainMenu.isMainMenuCollapsed = true" ng-if="mainMenu.HasPermissions('EditFundingSource')"><a href="EditFundingSources/{{srfEnums.fundingSourceTypes.Bond}}">Bonds</a></li>
                                        </ul>
                                    </li>
                                    <li ng-click="mainMenu.isMainMenuCollapsed = true" ng-if="mainMenu.HasPermissions('EditPoliticalContact')"><a href="EditPoliticalContacts">Political Contacts</a></li>
                                    <li ng-click="mainMenu.isMainMenuCollapsed = true" ng-if="mainMenu.HasPermissions('EditTreasuryDraw')"><a href="EditTreasuryDraw">Treasury Draw</a></li>
                                </ul>
                            </li>
                    </ul>
                </div>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="http://www.michigan.gov" class="miGovHome" title="Michigan’s Official Web Site" ng-click="externalLinkClick($event)">
                        MI.gov
                    </a>
                </li>
            </ul>
        </div>

    </div>
</nav>
        <header class="header bottom-border-accent-A" role="banner">
            <div class="container header-background">
                <!--link to home page-->
                <a href="http://www.michigan.gov/deq" class="logo pull-left" ng-click="externalLinkClick($event)"></a>
                <h1 class="siteTitle"><a href="http://www.michigan.gov/deq" ng-click="externalLinkClick($event)">State Revolving Fund</a></h1>
                <span class="tagline"><a href="http://www.michigan.gov/deq" ng-click="externalLinkClick($event)">Michigan Department of Environmental Quality</a></span>
            </div>
        </header>
        <main id="main" role="main" class="main">
            <div class="container">
                    <system-alert instance-id="mainAlertInstance"></system-alert>

                
<div class="view-anim" id="mainView" ng-view>
</div>
            </div>
        </main>
    </div>
    <footer class="footer" role="contentInfo">
        <div class="container">
            <ul class="footer-links">
                <li class="footer-link-trail"><a href="http://www.michigan.gov" class="footer-link" title="Michigan’s Official Web Site" ng-click="externalLinkClick($event)">MI.gov</a></li>
                <li class="footer-link-trail"><a href="Home" class="footer-link">Application Home</a></li>
                <li class="footer-link-trail"><a href="http://www.michigan.gov/deq/0,4561,7-135--281460--,00.html" class="footer-link" ng-click="externalLinkClick($event)">Policies</a></li>
                <li class="footer-link-trail"><a href="#body" class="footer-link visible-xs visible-sm">Back to Top</a></li>
            </ul>
            <p class="hidden-xs">
                Copyright 2001-<span id="current-year">2015</span> State of Michigan
            </p>
        </div>
    </footer>
        <script type="text/javascript">
            window.SRFConfiguration = {
                mapServicesUrl: 'http://gisdev.mcgi.state.mi.us/arcgis/rest/services',
                politicalDistrictsMapUrlSegment: '/BaseMap/CommonQueries/MapServer',
                senateDistrictLayerId: 22,
                houseDistrictLayerId: 21,
                congressionalDistrictLayerId: 23,
                riverBasinsMapUrlSegment: '/BaseMap/CommonQueries/MapServer',
                basinsLayerId: 24,
            };
        </script>
<script src="/Scripts/angularjs/angular.js"></script>
<script src="/Scripts/angularjs/angular-animate.js"></script>
<script src="/Scripts/angularjs/angular-aria.js"></script>
<script src="/Scripts/angularjs/angular-messages.js"></script>
<script src="/Scripts/angularjs/angular-mocks.js"></script>
<script src="/Scripts/angularjs/angular-resource.js"></script>
<script src="/Scripts/angularjs/angular-route.js"></script>
<script src="/Scripts/angularjs/angular-sanitize.js"></script>
<script src="/Scripts/angular-ui/ui-bootstrap-tpls.js"></script>
<script src="/Scripts/angular-ui/ui-utils.js"></script>
<script src="/Scripts/uiBootstrapTemplateOverrides.js"></script>
<script src="/Scripts/directives/pagination/dirPagination.js"></script>
<script src="/Scripts/directives/ngmodel-format/ngmodel.format.js"></script>
<script src="/Scripts/directives/multi-selector/angular-multi-select.js"></script>
<script src="/Scripts/directives/angular-esri-map/angular-esri-map.js"></script>
<script src="/Scripts/app.js"></script>
<script src="/Scripts/directives/amountFieldValidator.js"></script>
<script src="/Scripts/directives/dirtyFormHandling.js"></script>
<script src="/Scripts/directives/disableAllFields.js"></script>
<script src="/Scripts/directives/duplicateProjectNumberValidator.js"></script>
<script src="/Scripts/directives/enterKeyPress.js"></script>
<script src="/Scripts/directives/ngMessagesInclude.js"></script>
<script src="/Scripts/directives/paginationPageChange.js"></script>
<script src="/Scripts/directives/projectNumberExistsValidator.js"></script>
<script src="/Scripts/directives/revalidateChildren.js"></script>
<script src="/Scripts/directives/revalidateOnChange.js"></script>
<script src="/Scripts/directives/riverBasinList.js"></script>
<script src="/Scripts/directives/submitOnClick.js"></script>
<script src="/Scripts/directives/textarea.js"></script>
<script src="/Scripts/directives/disbursement/disbursement.js"></script>
<script src="/Scripts/directives/master-detail/srfMasterDetail.js"></script>
<script src="/Scripts/directives/panel/srfPanel.js"></script>
<script src="/Scripts/directives/panel/srfPanelContent.js"></script>
<script src="/Scripts/directives/panel/srfPanelHeading.js"></script>
<script src="/Scripts/directives/switch/srfSwitch.js"></script>
<script src="/Scripts/directives/system-alert/systemAlert.js"></script>
<script src="/Scripts/directives/line-item/srfLineItem.js"></script>
<script src="/Scripts/controllers/AdminDisbursementCtrl.js"></script>
<script src="/Scripts/controllers/ApplicationInformationCtrl.js"></script>
<script src="/Scripts/controllers/ApprovalInformationCtrl.js"></script>
<script src="/Scripts/controllers/AssignmentInformationCtrl.js"></script>
<script src="/Scripts/controllers/CompletionInformationCtrl.js"></script>
<script src="/Scripts/controllers/CreateEditProject.js"></script>
<script src="/Scripts/controllers/DisbursementInformationCtrl.js"></script>
<script src="/Scripts/controllers/DivisionCtrl.js"></script>
<script src="/Scripts/controllers/EmployeeCtrl.js"></script>
<script src="/Scripts/controllers/FinalLineItemCtrl.js"></script>
<script src="/Scripts/controllers/FirmCtrl.js"></script>
<script src="/Scripts/controllers/FundingSourceCtrl.js"></script>
<script src="/Scripts/controllers/HomeCtrl.js"></script>
<script src="/Scripts/controllers/ModalAbbreviationCtrl.js"></script>
<script src="/Scripts/controllers/ModalContactCtrl.js"></script>
<script src="/Scripts/controllers/ModalMapBaseCtrl.js"></script>
<script src="/Scripts/controllers/ModalPermitCtrl.js"></script>
<script src="/Scripts/controllers/ModalRiverBasinCtrl.js"></script>
<script src="/Scripts/controllers/NGAALineItemCtrl.js"></script>
<script src="/Scripts/controllers/PoliticalContactCtrl.js"></script>
<script src="/Scripts/controllers/PoliticalDistrictsMapCtrl.js"></script>
<script src="/Scripts/controllers/ProjectContactCtrl.js"></script>
<script src="/Scripts/controllers/ProjectCtrl.js"></script>
<script src="/Scripts/controllers/ReceivablesCtrl.js"></script>
<script src="/Scripts/controllers/RepaymentInformationCtrl.js"></script>
<script src="/Scripts/controllers/ReportCtrl.js"></script>
<script src="/Scripts/controllers/RiverBasinsMapCtrl.js"></script>
<script src="/Scripts/controllers/TreasuryDrawCtrl.js"></script>
<script src="/Scripts/services/Abbreviation.js"></script>
<script src="/Scripts/services/AdminDisbursement.js"></script>
<script src="/Scripts/services/Authorization.js"></script>
<script src="/Scripts/services/ContactType.js"></script>
<script src="/Scripts/services/County.js"></script>
<script src="/Scripts/services/DirtyPageSvc.js"></script>
<script src="/Scripts/services/Disadvantage.js"></script>
<script src="/Scripts/services/DisadvantageType.js"></script>
<script src="/Scripts/services/DisbursementType.js"></script>
<script src="/Scripts/services/District.js"></script>
<script src="/Scripts/services/Division.js"></script>
<script src="/Scripts/services/Employee.js"></script>
<script src="/Scripts/services/ErrorLogJavaScript.js"></script>
<script src="/Scripts/services/Firm.js"></script>
<script src="/Scripts/services/FirmContact.js"></script>
<script src="/Scripts/services/FundingExplanation.js"></script>
<script src="/Scripts/services/FundingSource.js"></script>
<script src="/Scripts/services/FundingSourceType.js"></script>
<script src="/Scripts/services/LineItem.js"></script>
<script src="/Scripts/services/LocalMatch.js"></script>
<script src="/Scripts/services/Lookups.js"></script>
<script src="/Scripts/services/NewsFeed.js"></script>
<script src="/Scripts/services/Permission.js"></script>
<script src="/Scripts/services/Permit.js"></script>
<script src="/Scripts/services/PoliticalContact.js"></script>
<script src="/Scripts/services/Project.js"></script>
<script src="/Scripts/services/ProjectApplicationInformation.js"></script>
<script src="/Scripts/services/ProjectApprovalInformation.js"></script>
<script src="/Scripts/services/ProjectAssignmentInformation.js"></script>
<script src="/Scripts/services/ProjectBoxNumber.js"></script>
<script src="/Scripts/services/ProjectComment.js"></script>
<script src="/Scripts/services/ProjectCompletionInformation.js"></script>
<script src="/Scripts/services/ProjectContact.js"></script>
<script src="/Scripts/services/ProjectDisbursementInformation.js"></script>
<script src="/Scripts/services/ProjectLineItemInvoice.js"></script>
<script src="/Scripts/services/ProjectReceivables.js"></script>
<script src="/Scripts/services/ProjectRepaymentInformation.js"></script>
<script src="/Scripts/services/ProjectStatus.js"></script>
<script src="/Scripts/services/ProjectType.js"></script>
<script src="/Scripts/services/Report.js"></script>
<script src="/Scripts/services/RiverBasin.js"></script>
<script src="/Scripts/services/Role.js"></script>
<script src="/Scripts/services/SubType.js"></script>
<script src="/Scripts/services/SubTypeManagementPlan.js"></script>
<script src="/Scripts/services/TreasuryDraw.js"></script>
<script src="/Scripts/routes.js"></script>
<script src="/Scripts/customerService.js"></script>
        <script src="http://js.arcgis.com/3.12/"></script>
<script src="/Scripts/controllers/development-only/RoleSwitchCtrl.js"></script>
    <div class="loader" ng-show="showLoadingMessage">
        <div class="loader-content">
            <span>Loading, please wait...</span>
        </div>
    </div>
</body>
</html>

Open in new window

Julian Hansen

Ah yes well with all those dependencies not really much chance of emulating locally. I don't suppose you have a link?
Have you checked your console for errors?
Are you using Chrome + Batarang to check for any issues there?

Subbu G

ASKER

I dont have an emulation place to show you what is going on. I can see the onclick event dont fire when I click X icon to close it. Otherwise I have been using chrome dev tools to debug. I will try to utilize Batarang as well. Never heard of that before.

Julian Hansen

When you mouse over the close X does it highlight?

Subbu G

ASKER

Yes it does highlight on mouseover the X icon.

however when I put an alert on the onclick event, it does not call.

Subbu G

ASKER

Julian Hansen

however when I put an alert on the onclick event, it does not call.

So you are adding an ng-click to the element and that is not firing?

Two possible scenarios I can think of

1. The link (x) is blocked by something else - which is most likely not the case because the hover works
2. The click is being intercepted somewhere else and not being propagated.

If you take out your directives and use the alert out of the box does it work?

Subbu G

ASKER

2. The click is being intercepted somewhere else and not being propagated.

I feel this is what happening. I removed the directives and put a generic alert box call onclick. it wouldnt still call.. interesting.

SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Subbu G

ASKER

Sure @JulianH

I feel the same too. I will work as suggested and see what happens. I feel when I upgraded the angular version, it stopped working anyways will check and let you know the results if I am lucky and could able to find some solution.

SOLUTION

BigRat

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Subbu G

ASKER

thanks @BigRat for your insight.

I threw some alert messages to see if removeAlert() gets called when I click X in the bootstrap alert, actually it never called or triggers my alert written in lines 76 to 79.

your statement: " To solve this problem I'd separate the two until it works."

Let me know what I can do to fix this issue. I am open to ideas. right now I made it to fade out after 10 seconds but I would like to ability to click X and close the alert as well.

ASKER CERTIFIED SOLUTION

Subbu G

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

BigRat

And I don't know why? Again: close="alert.removeAlert(alertMessage)" try changing it to close="removeAlert(alertMessage)"

Julian Hansen

You are welcome.

Subbu G

ASKER

Thanks guys for your help.

Bootstrap alert not closing onclick of &quot;X&quot; on its window

Bootstrap alert not closing onclick of "X" on its window