[Silk UI Web] [Silk UI Framework] .Button Load - Problem with comfirmation message

[Silk UI Web] [Silk UI Framework] .Button Load - Problem with comfirmation message

  
Forge Component
(52)
Published on 15 Nov (4 weeks ago) by OutSystems R&D
52 votes
Published on 15 Nov (4 weeks ago) by OutSystems R&D

Hello,


I'm developing a page that needs a confirmation message when the user submits the form.

In my submit link I have two classes associated, .Button and .Load. The problem with that is when the user cancels the confirmation message. After that, the user can't submit the form again.

Do you have any solution for this, or is a common problem that is in your backlog to be solved?


Best Regards,

Nelson



Hi Nelson,

You mean that closing the feedback message will prevent the form from being submitted again? That doesn't sound like normal behavior - can you confirm it?

Hi Tiago,

It's not the feedback message, but the link's confirmation message. So, when you click on a link (it has the .Load css class), and the confirmation message appears. In this case, if you cancel teh confirmation message, the form won't be submitted again, at least until you refresh the page.


Regards,

Nelson

Hi Nelson!


I'm not sure if I understood your problem. What you want is something like this?

https://www.outsystems.com/forge/component/717/confirmation-dialog/

Or you are trying to use a Silk component?


If you could use some screenshots to help in describing your problem, it would be nice :)


Cheers!

Hi Nelson,

I don't recall having any issue like that before. It might be something specific existing on your web screen. With a bit more detail, we might be able to help out.

I am having the same issue.


In SilkUI, if you have a link with style "Button Load" that has a comfirmation message, when the user clicks Cancel on the browser's comfirmation dialog that opens after clicking, the button stays in its "Loading" state, which prevents further clicking.


Here's a demo: http://caiosm1005.outsystemscloud.com/ButtonLoadTest/

Hi Caio!


For some reason, your button is getting hidden (display: none;) and you are creating a clone of the button, so it looks the same button with the Loading icon.


How are you doing this confirmation message? Is it a widget? Or is it your own code?

Can you provide the sample oml?


Cheers

Alexandre Santos wrote:

Hi Caio!


For some reason, your button is getting hidden (display: none;) and you are creating a clone of the button, so it looks the same button with the Loading icon.


How are you doing this confirmation message? Is it a widget? Or is it your own code?

Can you provide the sample oml?


Cheers

Hello, Alexandre.


I am using a default SilkUI class through the Vanilla Template theme. I have not made this button on my own. All I did was create a Link with style "Button Load".


Here's a sample (refer to the red Loading button): https://silkui.outsystems.com/Patterns.aspx#Web_Controls_Buttons


I have attached my OML.

Hello Caio,


I've been looking to your sample, but I can't find a solution using that confirmation message...


I think this could be a bug of Silk UI so it's better to wait for an official answer from Silk UI Team.


In the between, you have this component:

https://www.outsystems.com/forge/component/717/confirmation-dialog/

Maybe this can solve your problem.


Cheers

Hello,

I have the same problem. When i use Confirmation Message in a button with .load class,if i click on "Cancel" on the confirmation message the button stays with the .Load class.

I also tried the forge component "Confirmation Dialog", but the problem persists.

Any workaround?

Thanks,

Vasco Mendes

Hello again,

Here is my solution\workaround using the "Confirmation Dialog" forge component.

It just needs a little tweak.

On the Web BLock (ConfirmationDialog) Javascript make the following change on the ConfirmationDialog_Cancel Method:

function ConfirmationDialog_Cancel(PopupMainContainer,ButtonId){
    //CLOSE CONFIRMATION DIALOG
    $('.conf-dialog-holder'+ButtonId.replace(/:/g, "_")).hide();
    $('.conf-dialog-background'+ButtonId.replace(/:/g, "_")).hide();    
}

to:

function ConfirmationDialog_Cancel(PopupMainContainer,ButtonId){
    //CLOSE CONFIRMATION DIALOG
    $('.conf-dialog-holder'+ButtonId.replace(/:/g, "_")).hide();
    $('.conf-dialog-background'+ButtonId.replace(/:/g, "_")).hide();
    $('a.Button.Loading').each(function(i){
        $(this).prev().show();
        $(this).remove();
    });
    
}


This will force all the loading buttons to stop its loading process. It uses the same code found in the SILK UI to stop the buttons from loading.

Hope this helps others.

Vasco Mendes