WebSharper

I used the project template UI.Next Client-Server Application and noticed on small screens the collapsed navigation menu is not expandable. Adding the bootstrap.js script works for the Home page, but jQuery is not being loaded on the About page.

I tried moving Bootstrap into a resource type using BaseResource and added a Require attribute to the MainTemplate type. The About page still does not load the required resources.

How can I ensure that jQuery and Bootstrap scripts are loaded for all pages with the navigation bar?

Regards, cadull

  • loic.denuziere

    WebSharper uses jQuery internally for some functionality, so it has a predefined resource for it. You just need to add a Require attribute on your Bootstrap resource to use it. Like this:

    1
    2
    3
    
    [<Require(typeof<WebSharper.JQuery.Resources.JQuery>)>]
    type BootstrapJs() =
        inherit Resources.BaseResource("url-of-bootstrap.js")
    • cadull

      I have the following code, which works to add jQuery and Bootstrap for the Home page.

      1
      2
      3
      4
      5
      6
      7
      
      [<Require(typeof<JQuery.Resources.JQuery>)>]
      type Bootstrap() =
          inherit Resources.BaseResource("//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/",
              "js/bootstrap.min.js", "css/bootstrap.min.css", "css/bootstrap-theme.min.css")
      
      [<assembly: Require(typeof<Bootstrap>)>]
      do ()

      The About page does not include this resource unless I insert some client side functionality.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      
      [<JavaScript>]
      module Client =
          let RequireBootstrap () = span []
      
      module Site =
          let AboutPage ctx =
              Templating.Main ctx EndPoint.About "About" [
                  h1 [text "About"]
                  p [text "This is a template WebSharper client-server application."]
                  client <@ Client.RequireBootstrap() @> // this line is required to add the Bootstrap resource
              ]

      Is there a way to include the resources without the commented line above?

      EDIT:

      I see the question http://www.websharper.com/question/80373/websharper-ui-next-templating-not-recognizing-custom-iresources is similar to mine. Since the template is shared between the Home and About pages, if I add Bootstrap to the template I will either miss the jQuery dependency on the About page or add jQuery twice on the Home page. I guess the issue is that the Bootstrap client side functionality is unknown by WebSharper, however I was expecting that some usage of the Require attribute would help.

      Regards, cadull

      • Lamk

        Have you tried:

        1
        2
        3
        4
        5
        6
        7
        
        let styledElement() =
            div [
                text "A page containing this element will include style.css"
                Doc.WebControl (Web.Require<MyResource>())
                // Or equivalently:
                Doc.WebControl (Web.Require(typeof<MyResource>))
            ]

        Copied from here http://websharper.com/blog-entry/4636/websharper-3-6-6-released.

        It should add the tag without having to add clientside code.

        • cadull

          Thanks Kimserey, this produces the desired result.

          For future reference, using the Require attribute works for client side code; it does not add dependencies when applied to server code.