Back to Questions
1.3k
views12
comments
On Checkbox click works in MS Edge, but not rest of browsers
websharperui next

I have a list of checkboxes where I want to disable/enable page functionality when all checkboxes are unchecked.

When at least one checkbox is checked, the page functionality is enabled. I have got following code:

1
2
3
4
5
6
7
8

let onMyBetPositionCheckboxClick (model : MyBetPositionModel) =
    let haveSelectedMarkets = model.HaveSelectedMarkets

    model.CashOutAllEnabled.Value <- haveSelectedMarkets

    if not haveSelectedMarkets
    then
        showInfo "To cash out, you must select at least one market."

In template:

1
2
3

                    .CheckboxClick(
                        fun () -> onMyBetEventTypePositionCheckboxClick model
                    )

All works fine in Microsoft Edge, but not in Chrome, Firebox, or Internet Explorer.

.

I assume you have bound each checkbox to a reactive variable and used those to compute model.HaveSelectedMarkets? If so, you can also map their views to an "all-or-nothing" view, and use that to drive the rest of your UI and page logic.

As for the issue you are having, can you post a small snippet that exhibits it on Try WebSharper?

By on 9/28/2017 10:24 AM ()

Here is sample code:

http://try.websharper.com/snippet/StefanBelo/0000GX

You can see that it works in Edge, but not the rest of browsers.

I do not know how to use template correctly in this scenario, as in try.websharper.com we have got only one template file.

By on 9/29/2017 7:42 AM ()

Hello!

Thanks for the snippet! Based on your snippet, I've did some changes in your code, and I think I got everything you need here: http://try.websharper.com/snippet/user3332/0000Ga

I did the following changes:

  • Changed the IsSelected field from Var<bool> to bool
    • I've did this change, because you don't need that Var for the checkboxes, you can change that bool directly in the ListModel, with the help of the LensInto function. This takes a getter and an updater function and also the key of the item in the ListModel and produces an IRef. In our case the getter function takes the IsSelected field the updater sets the IsSelected field in the record so we get an IRef<bool> which we can pass to the ws-var field.
  • Changed the HaveSelectedData to a View
  • Removed the Message Var
  • Removed the click event handler
    • This way we have a dynamically changing View which indicates if there are selected items. Based on the HaveSelectedData we can create dynamic text, which will always change, when the HaveSelectedData changes, so we don't have to manually do that on the onclick handler
  • Added the SelectAll and DeselectAll onclick handlers
    • This actually features the UpdateAll function of the ListModel, which comes pretty handy in this situation. :)
By on 9/30/2017 9:25 AM ()

Thanks, Jozef. It works now, but can you say why Var<bool> on checkboxes do not work in such use case scenario?

By on 10/1/2017 2:22 AM ()

After some investigation, the "problem" seems to be that the click event handler runs before the value of the checkbox is changed, so it will always update the message shifted by one click. However this is the correct behavior. About the fact that it works in Edge, that's indeed strange, it seems to be a bug in Edge. On this page, you can check the different behaviors: https://eventorder.glitch.me/ . For me it's working incorrectly in IE11 as well, and according to the specifications FF and Chrome has the correct implementation here. Here is the issue in the tracker of Edge: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/6274500/

By on 10/2/2017 5:48 AM ()

Yes, that is the explanation for onclick event handler, that could be observed in my original example.

But my question is why it does not work with Var<bool> on checkboxes?

You introduced LensInto to update IsSelected state, but that is actually not crucial part of code to enable listening to checkbox state changes, that is I think HaveSelectedData mapping.

So, when anything is changed in Rows model, this value change is triggered "HaveSelectedData", and I suspect that the change is actually replacing the item in the list, caused by:

1
2
3
4
5

                    let isSelected =
                        model.Rows.LensInto
                            (fun d -> d.IsSelected)
                            (fun t v -> {t with IsSelected = v})
                            myRowDataModel.Id

I am sorry for not using correct wording maybe, I hope you understand what I wanted to say.

By on 10/2/2017 7:45 AM ()

Sorry for the misunderstanding, it would work with Var<bool>, however it is nicer to use Lens in this situation, because this is a perfect use case for that :) . It simplifies your data model and working with the value of Var is generally recommended with the Views and in our case, it would be nested Views because of the ListModel and the inner Var. So in my version of the snippet, the HaveSelectedData would be a more complex function. So I did that change purely for simplifying the code.

So the Var change was not exactly related to the issue, it's just some advice on working with UI.Next Vars.

About the LensInto your understanding is correct. That part of the code updates the ListModel, which change than triggers the change of the HaveSelectedData.

By on 10/2/2017 10:18 AM ()

So when I remove LensInto and replace it with Var<bool> in the model, your code does not work.

It works because LensInto changes Rows state, I think it removes old item, and adds new one, that is trigger for HaveSelectedData to push new update to view. But I think Var<bool> on checkbox should do the same, but it does not, so maybe there is some problem in websharper backend.

I think we like F# because less code means better maintenance and fewer problems.

You introduce more code, well yes I agree with you, that you must implement it this way to make it work.

By on 10/2/2017 10:52 AM ()

It's not a direct replace in this case, however I did a snippet with the Var version:

http://try.websharper.com/snippet/user3332/0000Gd

Indeed, I introduced more code, but it was purely for the better handling, because as you can see, I had to rework the HaveSelectedData a little bit with the Var version. As you can see now it has nested View's so I had to use the View.Join function. It's working with this way as well, however I prefer to use the LensInto version.

But I think Var<bool> on checkbox should do the same, but it does not, so maybe there is some problem in websharper backend.

Not exactly, if there is a Var in your model, then the change in the Var won't trigger a change in the ListModel, as it will be still the same Var object, just the value of the Var changes. It would only trigger a change, if you would update that record with assigning a newly created Var to that record.

I think we like F# because less code means better maintenance and fewer problems.

I completely agree with this, and I think maintenance-wise the LensInto version is better, however you can use the Var version as well.

By on 10/3/2017 2:41 AM ()

Thanks, Adam. I will prepare such code on try websharper. Yesterday night, I wanted to check the status of my ticket on my old Android tablet, your forum no my app works, the client code, does not work on Android browsers.

Is at least possible to know what browser is accessing web app, and in such case to offer just server-based web page?

By on 9/29/2017 5:38 AM ()

Ahh, we have given up on trying to get it running on every browser/environment - it's pretty hopeless :) What Android are you on, BTW?

By on 9/29/2017 9:45 AM ()

Asus TF101, Android 4.0.3

By on 9/30/2017 6:28 AM ()

    Topic tags

    IntelliFactory Offices Copyright (c) 2011-2012 IntelliFactory. All rights reserved.
    Home | Products | Consulting | Trainings | Blogs | Jobs | Contact Us | Terms of Use | Privacy Policy | Cookie Policy     		Built with WebSharper