websharperwebsharper.ui.next

Zafir.UI.Next not working with IE11


Beginning with Zafir.UI.Next Version 4.0.128.30.beta6 there is an jQuery.Deferred exception with IE11:

jQuery.Deferred exception: Die Eigenschaft "insertBefore" eines undefinierten oder Nullverweises kann nicht abgerufen werden. TypeError: Die Eigenschaft "insertBefore" eines undefinierten oder Nullverweises kann nicht abgerufen werden.
   at DomUtility.InsertAt (WebSharper.UI.Next.js:423:96)
   at Docs$1.InsertNode (WebSharper.UI.Next.js:3933:3)
   at Docs$1.InsertDoc (WebSharper.UI.Next.js:3926:3)
   at Docs$1.LinkPrevElement (WebSharper.UI.Next.js:3879:3)
   at Doc.RunBetween (WebSharper.UI.Next.js:5452:3)
   at Doc.RunBefore (WebSharper.UI.Next.js:5447:3)
   at ReplaceInDom (WebSharper/WebSharper.UI.Next.js:3942:4)
   at a (WebSharper.Main.js:1264:7)
   at Anonymous function (WebSharper.Main)
SCRIPT5007: Die Eigenschaft "insertBefore" eines undefinierten oder Nullverweises kann nicht abgerufen werden.
jquery-3.1.1.js (3855,3)

The project's server part is like this:

public class Server
{
    [Website]
    public static Sitelet<object> Main => new SiteletBuilder().With<string>
    ((ctx, endpoint) => Content.Page(
        Head:
            doc(
                link(attr.href("Content/bootstrap.css"), attr.rel("stylesheet"), attr.type("text/css")),
                script(attr.src("Scripts/jquery-3.1.1.js"), attr.type("text/javascript")),
                script(attr.src("Scripts/jquery.stickytableheaders.js"), attr.type("text/javascript"))
            ),
        Body:
            doc(
                client(() => Client.Main(endpoint))
            )
    ).Install();

And the client like this:

public static IControlBody Main(string endpoint) {return div( ...);}

This works flawlessly with e.g. Chrome and Edge.

What is wrong with this? Is there a bug?

Any hint is highly appreciated.

EDIT:

I identified the offending piece of code in WebSharper.UI.Next.js of Version 4.0.132.34-beta6.

This works in both EGDE and Chrome, but not in IE11:

Docs$1.LinkPrevElement=function(el,children)
 {
  var v;
  v=Docs$1.InsertDoc(el.parentElement,children,el);
 };

I changed the code to read:

Docs$1.LinkPrevElement=function(el,children)
 {
  var v;
  v=Docs$1.InsertDoc(el.parentNode,children,el);
 };

This works in EDGE, Chrome and IE11.

Could somebody please shed some light on this?

EDIT 2:

This discourages the use of parentElement: What is this.parentElement?


Solution

  • Apparently this has been fixed in WebSharper 4 beta-7: https://github.com/intellifactory/websharper.ui.next/issues/117

    Btw, I used this in post-build to correct the generated script(s):

    powershell -c "gci $(ProjectDir)Scripts\WebSharper\*.js -recurse | foreach {(gc $_ | foreach {$_ -replace 'parentElement', 'parentNode'}) | sc $_}"
    

    Many Thanks.