External JS library not applied to tag generated by Websharper

Question

According to this post: External JS library with WebSharper in F#

And integrate the implementation here: Tag input and type ahead with Bootstrap-taginput and typeahead.js in WebSharper.

I create an empty WebSharper project and add the code above,

my test code here

After build the project and run it. The original taginput works very well, however WebSharper doesn't...

I think there is something incorrect, but I am unable to figure it out... could anyone help?

Answer 1

The problem is that you have jQuery included twice: once by you manually in your index.html, and once by WebSharper automatically for its own purposes. So all the functionality added by TypeAhead and TagsInput onto the initially loaded jQuery is lost when jQuery is reloaded from scratch a second time.

To solve this, instead of including jQuery, TypeAhead and TagsInput manually in the html file, you can use WebSharper's resources system:

• Define resources for TypeAhead and TagsInput, specifying that they depend on jQuery:

module Resources =
    open WebSharper.Core.Resources
    open WebSharper.JQuery.Resources

    [<Require(typeof<JQuery>)>]
    type TypeAhead() =
        inherit BaseResource("https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js")

    [<Require(typeof<TypeAhead>)>]
    type TagsInput() =
        inherit BaseResource("https://raw.githack.com/bootstrap-tagsinput/bootstrap-tagsinput/master/src/bootstrap-tagsinput.js")

• Specify that your Ti method depends on them:

    type JQuery
    with
        [<Require(typeof<Resources.TagsInput>)>]
        [<Inline "$0.tagsinput({ typeaheadjs: { source: $1  }})">]
        member private this.Ti (findMatches: FuncWithArgs<string * (string [] -> unit), unit>) = X<unit>

• Remove the jQuery, TypeAhead and TagsInput script tags from index.html, because they will automatically be added by WebSharper if the page contains code that calls .Ti().