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 839 karma points c-trib
    May 24, 2021 @ 18:05
    Johannes Lantz
    0

    umbConfirm directive causing infinite loop

    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

  • Johannes Lantz 156 posts 839 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

Please Sign in or register to post replies

Write your reply to:

Draft