Back to Questions
758
views3
comments
Doc.Checkbox 'change' event does not occur
websharperwebsharper.ui.next

I have reactive Var<bool> variable varDone and Doc.Checkbox for its representation named cbDoc. After changing the value of varDone I need to call my function. For this, I wrote the code illustrated in the following pseudo-code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

open WebSharper
open WebSharper.UI.Next
open WebSharper.UI.Next.Html
open WebSharper.UI.Next.Notation

// declaring reactive bool variable
let varDone = Var.Create false

(* something else *)

// creting Doc-representation of my model
let renderModel model = 

	// declaring its representation Doc element
	let cbDone = Div0 [ Doc.CheckBox [ "type" ==> "checkbox" ] varDone ]

	let result'doc = // a Doc-representation, that contains cbDone
    
    let my'handler()  : unit -> unit = // a function that should be called when changing the value of varDone

	// add an event handler for the element cbDone changes
	(Doc.AsPagelet cbDone).Body.AddEventListener( "change", my'handler, false )

	result'doc

But unfortunately no event occurs when checkbox changing. The question is, what am I doing wrong and is there another way to respond to changes in value of varDone variable?

UPD

The saddest thing is that an element with checkbox does not even have my event handler. This is evident when debug in browser.

.

(copy of my reply to the same question on StackOverflow)

What happens is that Doc.AsPagelet adds a wrapper around the doc, so you are adding an event listener to that wrapper. And even if it did not, you would be adding an event listener to the Div0 you created instead of the CheckBox itself.

That being said, there are two solutions here:

  • The easy solution is to use Attr.Handler in your CheckBox:

    1
2
3
4
5
6
7

    let cbDone =
  Div0 [
    Doc.CheckBox [
      "type" ==> "checkbox"
      Attr.Handler "change" (fun _ -> my'handler())
    ] varDone
  ]

  • The more complex but generally preferable solution is to listen to changes to varDone via a View, rather than listen to events on the element.

    Now, the way UI.Next works, only views that connect into the sink (ie. the rendered document) are actually computed, so nothing will happen if you only do something like this:

    1

    let _ = varDone.View |> View.Map (fun _ -> my'handler())

    Instead, the result value of the above expression (which has type View<unit>) needs to be connected to the returned document. You can use the following helper (which we'll probably add to UI.Next in some form soon):

    1
2
3
4
5

    let AddViewListener (view: View<'T>) (f: 'T -> unit) (doc: Doc) =
  view
  |> View.Map (fun x -> f x; Doc.Empty)
  |> Doc.EmbedView
  |> Doc.Append doc

    which you can use as such:

    1
2
3

    let cbDone =
  Div0 [ Doc.CheckBox [ "type" ==> "checkbox" ] varDone ]
  |> AddViewListener varDone.View (fun _ -> my'handler())

    The above code basically means "as long as cbDone is in the rendered document, any change to varDone will trigger my'handler".

By on 6/15/2015 6:57 AM ()

thank you very much, especially for the second solution. Yes, I have given does not fully correct the pseudo code. Of course, I added and was looking in the debugger event listener on chekbox, not Div0: ''' let cbDone = Doc.CheckBox "type" ==> "checkbox" varDone '''

By on 6/16/2015 9:31 PM ()

Another solution is to use UI.Next templates and bind to the change event on the checkbox.

By on 6/15/2015 12:14 PM ()

    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