Back to Questions
862
views3
comments
Open Bootstrap Modal on page load
websharperwebsharper ui.next

A page has several "places" (stolen from one of your tutorials), like this:

1
2
3
4
5
6
7
8
9

let doc() =
    let vPlace = Var.Create Place.List
    let go place = vPlace.Value <- place
    vPlace.View
    |> View.Map (function
        | Place.List -> AlarmList.doc go
        | Place.New -> AlarmEdit.doc go None
        | Place.Edit id -> AlarmEdit.doc go (Some id))
    |> Doc.EmbedView

When we go to AlarmEdit.doc, it calls a remote, which may return an error, in which case I want to show a Modal, otherwise - normal page.

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

[<JavaScript>]
module Modal =
    let showError (errorMessage: string): Doc =
        divAttr [cls "modal fade"
                 attr.id "errorDialog"
                 Attr.Create "role" "dialog"] [
            divAttr [cls "modal-dialog modal-sm"] [
                divAttr [cls "modal-content"] [
                    divAttr [cls "modal-header"] [
                        buttonAttr [attr.``type`` "button"; cls "close"; Attr.Create "data-dismiss" "modal"] [text "x"]
                        h4Attr [cls "modal-title"] [text "Error"]
                    ]
                    divAttr [cls "modal-body"] [text errorMessage]
                    divAttr [cls "modal-footer"] [
                        buttonAttr [attr.``type`` "button"; cls "btn btn-default"; Attr.Create "data-dismiss" "modal"] [text "Close"]
                    ]
                ]
            ]
        ] :> _
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

[<JavaScript>]
module AlarmEdit =
    type private Page = Templating.Template<"Alarms\\Edit.html">

    let doc go (id: AlarmId option): Doc =
        let alarm =
            match id with
            | None -> Ok (Some <| AlarmDefinition.createNew())
            | Some id -> Server.AlarmsServer.getAlarm id
        
        match alarm with
        | Fail e -> Modal.showError e
        | Ok None -> Modal.showError (sprintf "Alarm with id = %O was not found" id)
        | Ok (Some alarm) ->
            let vAgg, aggSelect = aggregation
                
            Page.Doc(...)

Unfortunately, it does not work, since in order to show the Modal

1

$('#errorDialog').modal('show')

must be called. So, the problem: I have no idea how to call that JS code after the Modal is loaded to show it.

.

I think you could add the .modal('show') as an extension method on JQuery:

1
2
3
4
5

open WebSharper.JQuery

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

And then add this attribute to the main div of your showError:

1

on.afterRender (fun div -> JQuery.Of(div).ModalShow().Ignore)
By on 12/9/2015 2:59 AM ()

Thanks, but it does not work :(

By on 12/9/2015 3:34 AM ()

I am not sure why your modal isn't opening but this is how I am opening modals in my code. I have a module which installs a modal in the current page and returns a method to open it. https://gist.github.com/Kimserey/10119331280aae690b41:

1
2
3
4
5
6
7
8
9
10

let modalOptions = {
	Title = "Title of modal"
   	Content = p [ text "Some content" ]
    PositiveAction = (Title "Continue", Action (fun () -> JS.Alert "continue"))
    NegativeAction = (Title "Cancel", Action (fun () -> JS.Alert "cancel!"))
}

div [
	Doc.Button "open" [] (install modalOptions)
]

It works fine as long as I don't forget to reference bootstrap js. I know it doesn't solve your issue but hope it can help.

By on 12/10/2015 8:44 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