Back to Questions
821
views5
comments
Can Websharper access HTML elements by name?
websharpertutorialbeginnerexample

Many of the simple Websharper examples create a document programmatically. That's great, but what if I have a complicated web page that I want to add a little F# support to? Can I access elements by name? If I do that, can I eventually add reactive variables incrementally?

I apologize if this is completely outside the Websharper model, but I'd like for web designers to create static web content and then programmers to add the dynamic funcionality afterwards. Perhaps I just haven't found the example that shows how that might be accomplished.

.

On the client-side, you can use UI.Next's Doc.RunById to access a DOM element by ID and insert a Doc value into it.

As for templating, have a look at HTML templates via Content.Template (which provide templates that are bound at runtime, used in server-side sitelets) and UI.Next's reactive templates (which provide type-checked, compile-time templates for both the server and client side.) You can see Doc.RunById and UI.Next templating in action in the UI.Next SPA project template.

By on 4/4/2016 9:02 PM ()

Here is the best I've come up with so far. I would like to connect to a Canvas already declared in HTML, but for now I must create it programmatically and append it to an existing Div in order to gain access to the context:

1
2
3
4
5
6
7
8
9
10
11

let Main =
    let element = Tags.Canvas []
    let canvas = As<CanvasElement> element.Dom
    canvas.Height <- 500
    canvas.Width <- 500
    let ctx = canvas.GetContext("2d")
    Div [
        element -< [Attr.Style "border: 1px solid gray"]
        Div [Attr.Style "clear:both"]
    ]
    |> fun e -> e.AppendTo "main"

This isn't too bad, but I'd prefer to specify the position, size, and other attributes of the Canvas in HTML, where they can be more easily maintained by HTML editors.

By on 4/5/2016 5:58 PM ()

Having the WebSharper.JavaScript namespace open you can do JS.Document.GetElementById just as you would in JavaScript. So if you have a <canvas id="my-canvas"></canvas> you can do let element = JS.Document.GetElementById "my-canvas". Other than that, you can use WebSharper.JQuery for more complex DOM queries. If you have a JQuery element you can convert it to Dom.Eelement by calling the Get: int -> Dom.Node instance member on it.

1
2
3
4
5
6
7
8
9
10
11
12

open WebSharper.JQuery

let Main =
	let jq = JQuery.Of "#my-canvas"
    // JQuery represents the selected DOM nodes as a list
    // but we now we have exactly one so we can do Get(0)
    // to select it.
    // For some reason Get returns a Dom.Node so we have to
    // cast it to a Dom.Element if we want to use it as such.
    let element = jq.Get(0) :?> Dom.Element
    ...
By on 4/6/2016 3:01 AM ()

Excellent. Thanks for the thorough responses!

By on 4/6/2016 2:49 PM ()

Thanks, Adam. I've been trying to figure out how to use Doc.RunById to access an HTML5 Canvas element. I see that there are special functions for accessing SVG, so I'm wondering whether I might have to create the Canvas programmatically as you do in your HTML5 examples.

By on 4/5/2016 8:54 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