Base solution for your next web application
Open Closed

Unable to use popover confirmations form metronic theme #1564

User avatar
0
hozkar created

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.

Go to accepted answer
3 Answer(s)
  • User Avatar
    0
    ismcagdas created
    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"

  • User Avatar
    0
    hozkar created

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

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

    1. Create a new folder inside libs as bootstrap-confirmation and copy bootstrap-confirmation.min.js
    2. In ScriptPaths class, add the following const:
    public const string Bootstrap_Confirmation = "~/libs/bootstrap-confirmation/bootstrap-confirmation.min.js";
    1. 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.

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

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

Assignee
No one
Labels
Non yet