Back to Questions
510
views2
comments
Control the order of javascript resources (specifically jquery)
websharperjavascript semanticui resources

My websharper page is fully generated (no html with holes), and I'm using the following for the javascript resources that I need:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

module Resources = 
    open WebSharper.Resources

    module X =
        type JQuery() = 
            inherit BaseResource("https://code.jquery.com/jquery-3.1.1.min.js")
        type SemanticJS() = 
            inherit BaseResource("semantic.min.js")
        type SemanticCSS() = 
            inherit BaseResource("semantic.min.css")

    [<assembly:Require(typeof<X.JQuery>);
      assembly:Require(typeof<X.SemanticCSS>);
      assembly:Require(typeof<X.SemanticJS>)
      >]
    do()
1
2
3
4
5
6
7

  ...
  <script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript" charset="UTF-8"></script>
  <link href="/Content/WebSharper/Squid/semantic.min.css" rel="stylesheet" type="text/css">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <script src="/Scripts/WebSharper/Squid/semantic.min.js" type="text/javascript" charset="UTF-8"></script>
  <script src="http://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript" charset="UTF-8"></script>
  ...

Note that JQuery is in there twice. I'm guessing, the first time because I included it explicitly and the second time because Websharper requires it. However, it is giving me problems because, due to the second include of jquery, the methods that are in semantic.min.js disappear. In other words, it works without the second Jquery include but not with it. Is there a way to prevent the second include of JQuery, or put the include of semantic.min.js even later?

.

Yes, the first JQuery include comes from WebSharper itself. Instead of creating your own resource for JQuery, you should use the one from WebSharper, which is at WebSharper.JQuery.Resources.JQuery. And to ensure that Semantic's script appears after JQuery's, you should add a dependency on it. So:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

module Resources =
    open WebSharper.Resources

    module X =

        // Force WebSharper's jQuery*.js to appear before semantic.min.js
    	[<Require(typeof<WebSharper.JQuery.Resources.JQuery>)>]
        type SemanticJS() =
            inherit BaseResource("semantic.min.js")

        type SemanticCSS() = 
            inherit BaseResource("semantic.min.css")


    [<assembly:Require(typeof<X.SemanticCSS>);
      assembly:Require(typeof<X.SemanticJS>)
      >]
    do()
By on 5/3/2017 7:55 AM ()

That works!

By on 5/3/2017 8:32 AM ()

    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