If you simply need to run some client-side code, the best way to go is to use WebSharper's afterrender event.

Let's assume you have the following client-side module:

1
2
3
4
5
6
[<JavaScript>]
module Client =
    open WebSharper.JavaScript

    let Startup() =
        JS.Alert "Hello world!"

There are several ways to call it in your page:

  1. In the HTML template:

    You can add the following to the html file:

    1
    2
    3
    
    ...
    <body ws-onafterrender="MyCallback">
    ...

    and then in the F# template instantiation:

    1
    2
    3
    
    MainTemplate()
        .MyCallback(fun el -> Client.Startup())
        // ...
  2. Using F# doc functions:

    You can use the on.afterRender event handler:

    1
    2
    3
    
    div [on.afterRender (fun el -> Client.Startup())] [
        text "Content..."
    ]

On the other hand, if you have some client-side content to insert at a specific location, like the following:

1
2
3
4
5
6
7
8
9
10
[<JavaScript>]
module Client =
    open WebSharper.JavaScript
    open WebSharper.UI.Html
    open WebSharper.UI.Client

    let MyButton() =
        button [on.click (fun _ _ -> JS.Alert "Hello world!")] [
            text "Click me!"
        ]

Then you can use the client function and just drop it in place:

1
div [] [client <@ Client.MyButton() @>]
By on 10/30/2018 5:02 AM ()
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