Back to Questions
785
views2
comments
async load svg into html
websharpersvg

What would be the Websharper idiomatic way to async load six large svg files inline into html? So far i did

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

[<JavaScript>]
module Client =
    let svgs =
      [|"frameA_Top.svg"
        "frameA_Side.svg"
        "frameA_Bot.svg"
        "frameB_Top.svg"
        "frameB_Side.svg"
        "frameB_Bot.svg"|]

    let Main () = 
        let bigsvg = JQuery.Of(".bigsvg")        
        for p in svgs do        
            let xr = JQuery.Get(p)
            xr.Done(fun _ -> bigsvg.Append xr.ResponseText |> ignore)
            |> ignore

This code also fails because it loads six times the last image. (I will later add on click events to the elemnts inside the svg.)

.

Hello,

Repeating loading only the last is indeed a bug, I have created an issue for it: https://github.com/intellifactory/websharper/issues/551

Otherwise what you do with JQuery should be fine. Quickest workaround for the bug is to use Array.iter instead of the for loop

1
2
3
4
5
6
7

    let Main () = 
        let bigsvg = JQuery.Of(".bigsvg")        
        svgs |> Array.iter (fun p ->    
            let xr = JQuery.Get(p)
            xr.Done(fun _ -> bigsvg.Append xr.ResponseText |> ignore)
            |> ignore
        )
By on 6/1/2016 8:55 AM ()

Thanks Andras, Initially I thought the issues with the reapeted loading was because JS is single threaded. I am still learning JS too. Could the async loading also be done nicely without JQuery? For example with Rpc calls that return the svg as string, and then embed it in the dom ?

By on 6/2/2016 1:13 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