Unable to use popover confirmations form metronic theme #1564 | Support Center

hozkar created 8 years ago

Hi, I'm trying to create some popover confirmations in my app, but i am unable to use them.

[http://keenthemes.com/preview/metronic/theme/admin_4_material_design/ui_confirmations.html])

looking at the app.js file inside the metronic theme in my web project, it looks like there is something implemented:

// Handles Bootstrap confirmations
    var handleBootstrapConfirmation = function() {
        if (!$().confirmation) {
            return;
        }
        $('[data-toggle=confirmation]').confirmation({ btnOkClass: 'btn btn-sm btn-success', btnCancelClass: 'btn btn-sm btn-danger'});
    }

I try to use it like this:

<button class="btn btn-default" data-toggle="confirmation">Confirmation</button>

but nothing happens, I also try it these way:

<button class="btn btn-default" data-toggle="confirmation" ui-jq="confirmation">Confirmation</button>

And i receive the following error:

Error: ui-jq: The "confirmation" function does not exist.

Any help?

Thanks in advance.

3 Answer(s)

0

ismcagdas created 8 years ago
Support Team

Hi,

You need to include bootstrap confirmation script to your project. It is not included by default.

you can find it under metronic theme "assets/global/plugins/bootstrap-confirmation/bootstrap-confirmation.min.js"

hozkar created 8 years ago

Ok thank you so much, now it is working as an angular directive.

This is how I do it, maybe this could help someone:

Create a new folder inside libs as bootstrap-confirmation and copy bootstrap-confirmation.min.js
In ScriptPaths class, add the following const:

public const string Bootstrap_Confirmation = "~/libs/bootstrap-confirmation/bootstrap-confirmation.min.js";

In AppBundleConfig class, add the new Boostrap_Confirmation url:

bundles.Add(
                new ScriptBundle("~/Bundles/App/libs/js")
                    .Include(
                        ScriptPaths.Json2,
                        ScriptPaths.JQuery,
                        ScriptPaths.JQuery_Migrate,
                        ScriptPaths.Bootstrap,
                        ...
                        ScriptPaths.Bootstrap_Confirmation,
                        ...

now, you can create an angular directive as you want:

(function () {
    appModule.directive('bowConfirmation', [
        function () {
            return {
                restrict: 'A',
                scope: {
                    bowConfirmationOptions: '=',
                    bowConfirmationOK: '&',
                    bowConfirmationCancel: '&',
                },
                link: function ($scope, element, attrs) {
                    $(element).attr('data-toggle', 'confirmation');
                    $(element).data($scope.bowConfirmationOptions);

                    //OK click
                    $(element).on("confirmed.bs.confirmation", function () {
                        $scope.bowConfirmationOK();
                    });
                    //Cancel click
                    $(element).on("canceled.bs.confirmation", function () {
                        $scope.bowConfirmationCancel();
                    });
                }
            };
        }
    ]);
})();

finally you can use your confirmation directive:

<button class="btn btn-default" bow-confirmation bow-confirmation-OK="vm.yes()" bow-confirmation-options='{"title": "New Title", "singleton": true}'>Confirmation</button>

Thanks.

0

ismcagdas created 8 years ago
Support Team

Hi,

Thank you very much for sharing your complete solution :).

Have an answer to this question? Log in and write your answer.