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 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:
source to share
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()]
] }
source to share
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:
http://fpish.net/blog/JankoA/id/3362/201367-jquery-mobile-page-reuse-with-websharper
source to share
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()
.
source to share