JQuery mobile webpage is hidden

I am trying to put together a JQuery Mobile site using the F # WebSharper Framework. In WebSharper language, I created a floating point using the JQueryMObile controls served by the Sitelet. Everything compiles and runs, the problem is in the html being generated.

The page I declared (simplePage) explicitly exists in markup and is tagged with the jQueryMobile css class ui-active

to make it visible. However, it is surrounded by a div, which is also a page, but not marked with an active css class, making it invisible. So my page inside this div is hidden. I am not creating this containing a div page . Apparently this is a side effect of loading the JQueryMobile script in the html header. How can I get rid of it?

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


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

type Action = | Home

module MyJQueryContent =

    let Main() =
        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


type MyJQueryMobileEntryPoint() =
    inherit Web.Control()

    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()]] }

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 ()



html output


source to share

3 answers

I am a WebSharper developer. Omar is right, this is a JQM thing, another workaround for it is a dummy node page in the profile. 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()]
                    ] }




As a side note, you create one of the contained DIV

when you write Div [page]

instead of page

before adding OnAfterRender

, but this is not really your problem.

As Omar describes, with jQuery Mobile you need to have close control over when and how the page structure is initialized, especially when working with dynamic pages. I remember seeing your specific issue before, but I can't find this conversation in my inbox, however, here's an earlier article that has some useful bits to use in initializing a JQM page:




When the jQuery Mobile framework loads, it checks for a page div in the DOM. If not, it wraps the body content in a page div. To control this behavior, you need to prevent jQM from being autoInitializePage

manually initialized $.mobile.initializePage()

whenever you want.

You need to listen mobileinit

for the override autoInitializePage

. The code should be placed after jQuery (core) and before jQuery Mobile in head


/* jQuery.js */
$(document).on("mobileinit", function () {
  $.mobile.autoInitializePage = false;
/* jQuery-Mobile.js */


You can now initialize jQuery Mobile whenever you want by calling $.mobile.initializePage()




All Articles