Back to Questions
1.3k
views2
comments
Bootstrap modal does not hide with JQuery
websharperjquerybootstrapmodal

I've created a installModal function which install a modal in the dom. It take a content function which takes itself a close function as argument to close the modal. (Hard to follow but I pasted the full code at the bottom)

Now when I pass JQuery.Of("#" + id).ModalHide >> ignore to content which represent the close function, it does not work. But if I replace it by fun () -> JQuery.Of("#" + id).ModalHide() |> ignore, then it works properly.

I am not sure what's happening but I would rather avoid fun () -> .. when not needed, could someone help on that?

Here's the full code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

[<JavaScript; AutoOpen>]
module Modal =

    type JQuery with
        [<Inline "$0.modal('show')">]
        member this.ModalShow() = this
        
        [<Inline "$0.modal('hide')">]
        member this.ModalHide() = this

    
    let installModal id content =
        divAttr [ attr.id id
                  attr.``class`` "modal fade"
                  attr.tabindex "-1" ]
                [ //content (fun () -> JQuery.Of("#" + id).ModalHide() |> ignore)
                  content (JQuery.Of("#" + id).ModalHide >> ignore) ] 
        |> Doc.RunById "main"

        JQuery.Of("#" + id).ModalShow >> ignore

[<JavaScript>]
module Client =    
    let Main =
        
        let openModal = 
            installModal ("hello-modal") (fun close -> Doc.Button "Click here to close" [] (close >> ignore))

        openModal()

        Doc.Empty
        |> Doc.RunById "main"
.

This is a subtle issue. What happens is that JQuery.Of(...) is called immediately, when the element hasn't been inserted in the DOM yet, so it returns an empty JQuery object. Whereas in the fun () -> ... case, JQuery.Of is only called when the fun () is called, and your element is in the DOM.

By on 2/2/2016 9:04 AM ()

Hi Loic, thanks nice catch that's entirely my fault.

By on 2/2/2016 10:48 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