Alert in carousel

Webix JS
#1

I am trying to do some data validation in a view contained in a carousel of views for the settings in my web app. When switching to another view within the carousel, I want to validate the data in the current page and prevent moving on until the data is valid.

I use setActive() to set the carousel page back to the current page, and show an alert explaining the reason the data is not valid. When I click OK in the alert, the background (the carousel page) lightens up, but the alert is not dismissed. The second click dismisses the alert.

Interestingly, when I added a callback, the callback was called upon the first click of the OK button, but the alert was not dismissed until the second click.

If I comment out the setActive call, the alert works as expected. So that seems to be the key. It does not matter whether the setActive is done before or after the alert is shown.

You can try this in my web app at Gradekeeper

Click the setup tab on the lower right. Click the right arrow in the carousel twice. Enter some letters for the final exam percent. Click the right arrow again. This will show the error alert. Click OK once. Click OK again.

If there is some approach to doing this that will work, please let me know.

#2

And another interesting thing. After the first click, I can continue editing fields in the carousel behind the alert. And I can click the arrows to change to the next view in the carousel, or, bring up another alert on top of the previous one.

#3

Hello,

Could you please provide an isolated snippet or tell me which file in your application contains the carousel code?

I’m specifically interested how do you handle validation - which action/event starts it, at which moment .setActive() is called.

#4

Look in exams.js at function ValidFinalExams starting at line 48. And look at setup.js at function HandleCarouselShow at lines 114-119. The code to show the alert is in utility.js in function ShowAlert at line 893.

HandleCarouselShow will call ValidFinalExams, which will show an alert and return false if there is an invalid percent (say ‘asd’ instead of 20.0). When it comes back to HandleCarouselShow with false, then setActive is called.

I tried various things, including calling setActive before showing the alert, but the result was the same.

Thanks.

#5

Here is a much simpler example:

https://www.gradekeeper.com/bug/

The carousel has two subviews. Each has a single text field. If the text field is empty when you change subviews, an alert is shown.

For view1, setActive is called to remain on view1. This shows the odd behavior of the alert, which requires two clicks of OK to be dismissed. The first click makes the view active again (you can focus and enter text into the edit field, for example). A second click is needed to dismiss the alert.

For view2, no call to setActive is made. The alert is dismissed with one click on the OK button, as expected.

I hope this helps.

#6

Hi,

Please ensure to wrap the setActive() call into the block/unblockEvent methods. When .setActive() is called, it triggers another onShow event, that’s why the 2nd alert shows up. With event blocking you will prevent from this unnecessary event duplication:

$$('carousel').blockEvent();
$$('carousel').setActive('view1');
$$('carousel').unblockEvent();

Here’s the snippet of the correct implementation: https://snippet.webix.com/kekchs5g

#7

Thanks!