Back to Questions
668
views4
comments
How to ensure resources are included on a page
websharperresourcesbootstrap

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

.

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")
By on 11/22/2016 11:08 AM ()

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

By on 11/22/2016 2:40 PM ()

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.

By on 12/14/2016 7:51 AM ()

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.

By on 1/11/2017 2:39 PM ()

    Topic tags

    IntelliFactory Offices Copyright (c) 2011-2012 IntelliFactory. All rights reserved.
    Home | Products | Consulting | Trainings | Blogs | Jobs | Contact Us | Terms of Use | Privacy Policy | Cookie Policy     		Built with WebSharper