Back to Questions
993
views3
comments
UI.Next: Insert raw HTML string into DOM?
websharperui.next

How can I insert raw HTML from a string into the DOM with UI.Next? E.g., rendered Markdown, or a user's formatted content retrieved from an API?

.

The easiest way would be to use JQuery with UI.Next's Doc.Static:

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

module InsertHtmlString

open WebSharper
open WebSharper.JavaScript
open WebSharper.JQuery
open WebSharper.UI.Next
open WebSharper.UI.Next.Client

[<JavaScript>]
let Main =
    let html = "<h1>Hello world!</h1>"
    let domNode = JQuery.Of(html).Get(0)
    Doc.Static(domNode :?> Dom.Element)
    |> Doc.RunById "main"

http://try.websharper.com/snippet/qwe2/00002L

Please, be extremeley careful though, where the HTML content is coming from, so that users cannot inject arbitrary HTML into the page. (Just in case someone is not aware of cross-site scripting.)

By on 8/22/2015 1:34 AM ()

Is there a way to insert the HTML exclusively with server-side HTML combinators?

By on 8/22/2015 7:28 PM ()

Doing it on the server is a bit more tricky. We have WebSharper.Html.Server.Html.VerbatimContent for inserting HTML content from string on the server, but I don't think there's an alternative to that in UI.Next (which should be added obviously). What you can do for now is to use Content.Page in conjunction with Doc.AsElements instead of using Content.Doc:

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

module Server =
  	open WebSharper.Sitelets
  	open WebSharper.UI.Next.Server

  	[<Website>]
  	let MyWebsite =
    	Application.SinglePage <| fun context ->
        	Content.Page(
            	[
                	yield!
                    	div [
                        	h1 [text "Enter text below"]
                        	client <@ Client.Widget() @>
                        	buttonAttr [on.click <@ Client.Alert @>] [text "Click me!"]
                    	]
                    	|> Doc.AsElements
                	yield WebSharper.Html.Server.Html.VerbatimContent "<p>Hello world!</p>"
            	])

Edit: or you can obviously pass the HTML as string to the client and insert it there but that feels much more hacky.

By on 8/25/2015 1:17 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