There currently are two entry points to execute code in WebSharper. One is the control rendering mechanism. Since control rendering happens after the document has loaded, document "ready" event will not fire at this time. Another mechanism is using let-bound properties in modules, but as of 2.4 that code too executes after "ready" event.
Note that this makes it unnecessary to subscribe to "ready", just fire off your code from controls or modules.
Looking at your code, there are a number of problems with it. First and foremost, please clearly separate client and server code and use
You also need to emit valid JSON (proper quoting) to get the jQuery callback to fire in your example.
Finally I use "OnAfterRender" to attach code to execute after the control has rendered, this is handy in many situations where the code must assume that DOM nodes have been already inserted into the document tree.
Note that this makes it unnecessary to subscribe to "ready", just fire off your code from controls or modules.
Looking at your code, there are a number of problems with it. First and foremost, please clearly separate client and server code and use
IntelliFactory.WebSharper.Html on the client and IntelliFactory.Html on the server. To call into client-side code from the server, use Web.Control control objects. Otherwise you are attempting to call into client-side code directly, which causes failure.You also need to emit valid JSON (proper quoting) to get the jQuery callback to fire in your example.
Finally I use "OnAfterRender" to attach code to execute after the control has rendered, this is handy in many situations where the code must assume that DOM nodes have been already inserted into the document tree.
namespace Website
open IntelliFactory.WebSharper
type Action =
| Home
| About
/// Hello World API client.
type HelloWorldData = { Message : string }
module Client =
open IntelliFactory.WebSharper.JQuery
open IntelliFactory.WebSharper.Html
[<JavaScript>]
let HelloWorld () =
Div [Id "message"] -< []
|>! OnAfterRender (fun self ->
JQuery.GetJSON("HelloWorld", fun (data,_) ->
self.Text <- data.Message)
|> ignore)
[<Sealed>]
type HelloWorldControl() =
inherit Web.Control()
[<JavaScript>]
override this.Body = Client.HelloWorld() :> _
module Server =
open IntelliFactory.Html
open IntelliFactory.WebSharper.Sitelets
/// The hello world api.
let HelloWorld : Content<Action> =
CustomContent <| fun ctx ->
{
Status = Http.Status.Ok
Headers = [ Http.Header.Custom "Content-Type" "application/json" ]
WriteBody = fun stream ->
use tw = new System.IO.StreamWriter(stream)
tw.WriteLine "{\"Message\": \"hello, world!\"}"
}
/// A client page for the HelloWorld api.
let Message : Content<Action> =
Content.PageContent <| fun ctx ->
{
Page.Default with
Body =
[
H1 [Text "Message"]
Div [new HelloWorldControl()]
]
}
let Main =
Sitelet.Sum [
Sitelet.Content "/" Home Message
Sitelet.Content "/HelloWorld" About HelloWorld
]
type Website() =
interface IWebsite<Action> with
member this.Sitelet = Main
member this.Actions = [Home; About]
[<assembly: WebsiteAttribute(typeof<Website>)>]
do ()
Thanks, Anton. My last comment was eaten by taking too long to submit it, so I was logged out. The gist was that I was curious when, if ever, one would ever use the
Less important, I thought it strange that I needed to wrap my control in a
JQuery.Of(Dom.Document.Current).Ready(fun _ -> ...)and how you would hook it up. As everything seems to need to be hooked up to some element, this function seems a little difficult to hook in correctly.
Less important, I thought it strange that I needed to wrap my control in a
Div []when I already have a div element. Is there another container that wouldn't require unnecessary div nesting?
You are right about JQuery "ready", does not seem to be useful in WebSharper.
In order to get rid of the extra div you may upcast both the control and the H1 element to INode like this:
Body
[
H1 [Text "Message"] :> INode<_>
new HelloWorldControl() :> _
]
Ah, thanks for clarifying. I didn't follow the hierarchy far enough to see that Element implemented INode. Thanks!
Topic tags
- f# × 3656
- compiler × 263
- functional × 199
- c# × 119
- websharper × 112
- classes × 96
- web × 94
- book × 84
- .net × 82
- async × 72
- parallel × 43
- server × 43
- parsing × 41
- testing × 41
- asynchronous × 30
- monad × 28
- ocaml × 26
- tutorial × 26
- haskell × 25
- workflows × 22
- html × 21
- linq × 21
- introduction × 19
- silverlight × 19
- wpf × 19
- fpish × 18
- collections × 14
- pipeline × 14
- templates × 12
- monads × 11
- opinion × 10
- reactive × 10
- plugin × 9
- scheme × 9
- sitelets × 9
- solid × 9
- basics × 8
- concurrent × 8
- deployment × 8
- how-to × 8
- python × 8
- complexity × 7
- javascript × 6
- jquery × 6
- lisp × 6
- real-world × 6
- workshop × 6
- xaml × 6
- conference × 5
- dsl × 5
- java × 5
- metaprogramming × 5
- ml × 5
- scala × 5
- visual studio × 5
- formlets × 4
- fsi × 4
- lift × 4
- sql × 4
- teaching × 4
- alt.net × 3
- aml × 3
- enhancement × 3
- reflection × 3
- blog × 2
- compilation × 2
- computation expressions × 2
- corporate × 2
- courses × 2
- cufp × 2
- enterprise × 2
- entity framework × 2
- erlang × 2
- events × 2
- f# interactive × 2
- fsc × 2
- google maps × 2
- html5 × 2
- http × 2
- interactive × 2
- interface × 2
- iphone × 2
- iteratee × 2
- jobs × 2
- keynote × 2
- list × 2
- mvc × 2
- numeric × 2
- obfuscation × 2
- oop × 2
- packaging × 2
- pattern matching × 2
- pipelines × 2
- rx × 2
- script × 2
- seq × 2
- sockets × 2
- stm × 2
- tcp × 2
- trie × 2
- type × 2
- type provider × 2
- xna × 2
- zh × 2
- .net interop × 1
- 2012 × 1
- abstract class × 1
- accumulator × 1
- active pattern × 1
- addin × 1
- agents × 1
- agile × 1
- android × 1
- anonymous object × 1
- appcelerator × 1
- architecture × 1
- array × 1
- arrays × 1
- asp.net 4.5 × 1
- asp.net mvc × 1
- asp.net mvc 4 × 1
- asp.net web api × 1
- aspnet × 1
- ast × 1
- b-tree × 1
- bistro × 1
- bug × 1
- camtasia studio × 1
- canvas × 1
- class × 1
- client × 1
- clojure × 1
- closures × 1
- cloud × 1
- cms × 1
- coding diacritics × 1
- color highlighting × 1
- combinator × 1
- confirm × 1
- constructor × 1
- continuation-passing style × 1
- coords × 1
- coursera × 1
- csla × 1
- css × 1
- data × 1
- database × 1
- declarative × 1
- delete × 1
- dhtmlx × 1
- discriminated union × 1
- distance × 1
- docs × 1
- documentation × 1
- dol × 1
- domain × 1
- du × 1
- eclipse × 1
- edsl × 1
- em algorithm × 1
- emacs × 1
- emotion × 1
- error × 1
- etw × 1
- euclidean × 1
- event × 1
- example × 1
- ext js × 1
- extension methods × 1
- extra × 1
- facet pattern × 1
- fantomas × 1
- fear × 1
- fp × 1
- frank × 1
- fsdoc × 1
- fsharp.core × 1
- fsharp.powerpack × 1
- fsharpx × 1
- function × 1
- functional style × 1
- gc × 1
- generic × 1
- geometry × 1
- getlastwin32error × 1
- google × 1
- group × 1
- hash × 1
- history × 1
- hosting × 1
- httpcontext × 1
- https × 1
- hubfs × 1
- ie 8 × 1
- if-doc × 1
- inheritance × 1
- installer × 1
- interpreter × 1
- io × 1
- ios × 1
- ipad × 1
- kendo × 1
- learning × 1
- licensing × 1
- macro × 1
- macros × 1
- maps × 1
- markup × 1
- marshal × 1
- math × 1
- metro style × 1
- micro orm × 1
- minimum-requirements × 1
- multidimensional × 1
- multithreading × 1
- mysql × 1
- mysqlclient × 1
- nancy × 1
- nested × 1
- nested loops × 1
- node × 1
- object relation mapper × 1
- object-oriented × 1
- offline × 1
- option × 1
- orm × 1
- osx × 1
- owin × 1
- paper × 1
- parameter × 1
- performance × 1
- persistent data structure × 1
- phonegap × 1
- pola × 1
- powerpack × 1
- prefix tree × 1
- principle of least authority × 1
- programming × 1
- projekt_feladat × 1
- protected × 1
- provider × 1
- ptvs × 1
- quant × 1
- quotations × 1
- range × 1
- raphael × 1
- razor × 1
- rc × 1
- real-time × 1
- reference × 1
- restful × 1
- round table × 1
- runtime × 1
- scriptcs × 1
- scripting × 1
- service × 1
- session-state × 1
- sitelet × 1
- stickynotes × 1
- stress × 1
- strong name × 1
- structures × 1
- tdd × 1
- template × 1
- tracing × 1
- tsunamiide × 1
- type inference × 1
- type providers × 1
- upload × 1
- vb × 1
- vb.net × 1
- vector × 1
- visual f# × 1
- visual studio 11 × 1
- visual studio shell × 1
- visualstudio × 1
- web api × 1
- webapi × 1
- windows 8 × 1
- windows-phone × 1
- winrt × 1
- xml × 1
|
Copyright (c) 2011-2012 IntelliFactory. All rights reserved. Home | Products | Consulting | Trainings | Blogs | Jobs | Contact Us |
Built with WebSharper |
[<JavaScript>] let jQueryReady () = JQuery.Of(Dom.Document.Current).Ready(fun () -> // stuff )However, I can't figure out how to attach this to the document. All of the examples I've seen show how to hook up a script as an element event handler, but I've seen nothing for just adding a script. I found a `Script` element, but the resulting `JQuery` object doesn't inherit from `Element<'a>`.
This is what I have at the moment, with which I receive a number of errors about a missing JavaScriptAttribute:
/// Hello World API client. [<JavaScriptType>] type HelloWorldData = { Message : string } [<JavaScript>] let HelloWorldClient () = JQuery.Of(Dom.Document.Current).Ready(fun () -> JQuery.GetJSON("HelloWorld", fun (data,_) -> let data = As<HelloWorldData> data JQuery.Of("#message").Text(data.Message).Ignore ) |> ignore ).Ignore Div [Id "message"] -< []/// The hello world api. let HelloWorld : Content<Action> = CustomContent <| fun ctx -> { Status = Http.Status.Ok Headers = [ Http.Header.Custom "Content-Type" "application/json" ] WriteBody = fun stream -> use tw = new System.IO.StreamWriter(stream) tw.WriteLine "{message: 'hello, world!'}" }/// A client page for the HelloWorld api. let Message : Content<Action> = Template "Message" <| fun ctx -> [ H1 [Text "Message"] HelloWorldClient () ]NOTE: I know I can use the [<Rpc>] attribute to create a service endpoint. I'm trying to sort out how to translate code I write all the time to WebSharper. I'm also anticipating that I'll be connecting to existing services I've written in platforms other than WebSharper.