Sign in Register
Go to solution
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Johannes Lantz 156 posts 838 karma points c-trib
    May 24, 2021 @ 18:05
    Johannes Lantz
    0

    umbConfirm directive causing infinite loop

    Using Umbraco And Getting Started
    Umbraco 8

    Hi!

    I am trying to use the umbConfirm directive for Umbraco 8.13.0. But I can't get it to work. When I use the example given in the documentation it causes an infinite loop between the 2 browser alerts used for "cancel" & "confirm".

    https://our.umbraco.com/apidocs/v8/ui/#/api/umbraco.directives.directive:umbConfirm

    <umb-confirm caption="Title" on-confirm="vm.onConfirm()" on-cancel="vm.onCancel()"></umb-confirm>

    Controller:

       vm.onConfirm = function() {
       alert('Confirm clicked');
   };

   vm.onCancel = function() {
       alert('Cancel clicked');
   }

    If i remove the on-confirm="vm.onConfirm()" on-cancel="vm.onCancel()" nothing shows.

    Anyone have an idea how to make it work?

    //Johannes

    Copy Link
  • Johannes Lantz 156 posts 838 karma points c-trib
    May 25, 2021 @ 21:40
    Johannes Lantz
    100

    After many hours, I found that the element gets created but it dosen't have any styles attached to it. So ended up doing this to make it work:

    view.html

    <umb-confirm ng-if="vm.showConfirm" class="umb-confirm" caption="Title" on-confirm="vm.onConfirm" on-cancel="vm.onCancel"></umb-confirm>

    Controller.js

    vm.onConfirm = function () {
    alert('Confirm clicked');
};

vm.onCancel = function () {
    alert('Cancel clicked');
}

    Styles.css

     .umb-confirm {
    position: absolute;
    width: 600px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 999;
    background: #fff;
    padding: 30px 30px 0;
}
.umb-confirm .umb-abstract {
    font-size: 16px;
    color: #000;
    line-height: 16px;
    font-weight: 700;
    margin: 5px 0;
}

.umb-confirm .btn-toolbar {
    display: flex;
    justify-content: flex-end;
}

    //Johannes

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft