Search code examples
jquery-mobilef#websharper

WebSharper JQuery Mobile Page Hidden

I'm trying to put together a JQuery Mobile site using the F# WebSharper Framework. In WebSharper parlance I have created a Pagelet using JQueryMObile controls which is being served by a Sitelet. Everything compiles and runs, the problem is in the html that is generated.

The page I have declared (simplePage) clearly exists in the markup and is marked with the JQueryMobile css class ui-active to make it visible. However, it is surrounded by a div that is also a page but is not marked with the active css class, making it invisible. Therefore my page inside this div is hidden. I am not creating this containing page div. It seems to be a side-affect of loading the JQueryMobile script in the html head. How can I get rid of it?

I have taken the example from http://websharper.com/samples/JQueryMobile. I am using WebSharper version 2.5.125.62 and WebSharper.JQueryMobile version 2.5.4.198. I have one relevant code file shown below followed by the generated html.

Main:

open IntelliFactory.Html
open IntelliFactory.WebSharper
open IntelliFactory.WebSharper.Html
open IntelliFactory.WebSharper.JQuery
open IntelliFactory.WebSharper.Sitelets

type Action = | Home

[<JavaScript>]
module MyJQueryContent =

    let Main() =
        JQuery.Mobile.Mobile.Use()
        let page = Div [
                        Id "simplePage"
                        HTML5.Attr.Data "role" "page"
                        HTML5.Attr.Data "url" "#simplePage"
                        ] -< [
                        Div[Text "content"]
                    ]
        Div [page]
        |>! OnAfterRender (fun _ -> JQuery.Of(page.Body)
                                    |> JQuery.Mobile.JQuery.Page
                                    |> ignore

                                    JQuery.Mobile.Mobile.Instance.ChangePage(JQuery.Of(page.Body)))

[<Sealed>]
type MyJQueryMobileEntryPoint() =
    inherit Web.Control()

    [<JavaScript>]
    override this.Body = MyJQueryContent.Main() :> _

module Pages =

    let HomePage =
        PageContent <| fun context ->
            { Page.Default with
                Title = Some "Index"
                Body = [IntelliFactory.Html.Tags.Div[new MyJQueryMobileEntryPoint()]] }

[<Sealed>]
type Website() =
    interface IWebsite<Action> with
        member this.Sitelet = Sitelet.Content "/" Home Pages.HomePage
        member this.Actions = [Home]

type Global() =
    inherit System.Web.HttpApplication()

    member g.Application_Start(sender: obj, args: System.EventArgs) =
        ()

[<assembly: Website(typeof<Website>)>]
do ()

Output:

html output

Solution

  • I am a developer of WebSharper. Omar is right, this is a JQM thing, another workaround for it is having a dummy page node in the sitelet. Like this:

    module Pages =
    open IntelliFactory.Html

    let HomePage =
        PageContent <| fun context ->
            { Page.Default with
                Title = Some "Index"
                Body = 
                    [
                        Div [HTML5.Data "role" "page"; Id "dummy"]
                        Div [new MyJQueryMobileEntryPoint()]
                    ] }