SharePoint 2010 & HTML 5 problems/fixes?

Jun 27, 2012 at 2:33 PM

I was wondering if you had found a solution to the mass amounts of problems using HTML5, IE9 and SharePoint 2010? I have been following this technet string here about the "people picker", "send to" and other problems by changing the master page to IE9 compatibility for HTML5. I am using HTML5 master pages on both publishing and non-publishing sites for both the master page and custom master page. I seem to have issues now with some of the areas in the technet article, though I have applied the js to fix the people picker (the fix doesn't seem to fix the people picker in the site collection administrators page unfortunately).

 

Thx

Coordinator
Jun 27, 2012 at 11:10 PM

Hi Karnith,

I am aware of the issues and I hope to soon find time to dig deeper.  I've just taken a new assignment and it has me distracted a bit from this project.  The issue is an interesting one.  It could be most easily resolved by Microsoft.  A simple test of not verifying the name and not selecting the lookup dialog, but rather entering the name and submitting the value demonstrates that it is something in the validation routine which is causing the issues.  I think it has something to do with rerendering the page after the validation has been done in the javascript that is injecting markup into the DOM.   I need to make a complete analysis of the "before" and "after" DOM images to determine what is being changed.  And then there is the issue of whether there is a reasonable way to code a solution.  It's non-trivial.  I'm hoping that the SharePoint team will see the writing on the wall and distribute an update.  Windows 8 development if it is to be compatible with SharePoint will require HTML5 and CSS3, so it's a not an IF they will do it ... it's when.  If you know any top-flight javascript and DOM programmers who know their way around JavaScript debugging and who would be willing to contribute, send them my way.  Otherwise, I'll get back to it as time allows.  Please be patient.  In the interim, there is nothing that stops you from developing the HTML5 branding for your sites in preparation for full compatibility.

Dan

Jun 28, 2012 at 1:35 PM

Hi Dan,

 

I was working on fixes all day yesterday and can give you them if you like. What I have fixed so far is the people picker, the item menu on lists and presence. I used the additional page head control to apply the js and overrides in my solution. The only thing that still seems to be having a bit of a problem is the site collection admin people picker to which I hope to have a solution today. let me know if you would like me to share.

 

Thx

Coordinator
Jun 28, 2012 at 10:14 PM

Hi Karnith,

I would strongly encourage you to share your code. It could provide an additional benefit of a larger audience testing it in a variety of environments. Join the project and I’ll add you to the developers. You should get the Kudos for your work.

Description: Daniel C  Kline  CEO

From: Karnith [email removed]
Sent: Thursday, June 28, 2012 8:36 AM
To: dan@klines.org
Subject: Re: SharePoint 2010 & HTML 5 problems/fixes? [SharePoint2010HTML5:361131]

From: Karnith

Hi Dan,

I was working on fixes all day yesterday and can give you them if you like. What I have fixed so far is the people picker, the item menu on lists and presence. I used the additional page head control to apply the js and overrides in my solution. The only thing that still seems to be having a bit of a problem is the site collection admin people picker to which I hope to have a solution today. let me know if you would like me to share.

Thx

Coordinator
Jul 5, 2012 at 12:21 AM

Hi Karnith,

What ever happened to those fixes? I think the community would be very grateful for your contribution.

Description: Daniel C  Kline  CEO

From: Karnith [email removed]
Sent: Thursday, June 28, 2012 8:36 AM
To: dan@klines.org
Subject: Re: SharePoint 2010 & HTML 5 problems/fixes? [SharePoint2010HTML5:361131]

From: Karnith

Hi Dan,

I was working on fixes all day yesterday and can give you them if you like. What I have fixed so far is the people picker, the item menu on lists and presence. I used the additional page head control to apply the js and overrides in my solution. The only thing that still seems to be having a bit of a problem is the site collection admin people picker to which I hope to have a solution today. let me know if you would like me to share.

Thx

Jul 5, 2012 at 3:43 AM

Hi Dan,

sorry was caught up in work. I'll post them tomorrow, although the fixes are alterations from other fixes I found on the net.

Jul 5, 2012 at 2:11 PM

Hi Dan,

Here is the fixes.

My Dropbox

 

Karnith

Coordinator
Jul 5, 2012 at 10:56 PM

Thanks Karnith,

I’ll incorporate the changes and run the tests.

Can you provide me a little info about yourself so that I can give you due credit.

Description: Daniel C  Kline  CEO

From: Karnith [email removed]
Sent: Thursday, July 05, 2012 9:12 AM
To: dan@klines.org
Subject: Re: SharePoint 2010 & HTML 5 problems/fixes? [SharePoint2010HTML5:361131]

From: Karnith

Hi Dan,

Here is the fixes.

My Dropbox

Karnith

Jul 11, 2012 at 1:33 PM

HI Dan,

 

so how did the testing go? I still notice some issues with IE and the people picker... It's funny how with the fixes FireFox is supported better than IE when using HTML5.

Coordinator
Jul 11, 2012 at 6:14 PM

Hi Karnith,

I have the same issues here. I’ll keep you posted if I find workarounds and post a solution. I’m pretty sure it has something to do with headers injected into the DOM.

Description: Daniel C  Kline  CEO

From: Karnith [email removed]
Sent: Wednesday, July 11, 2012 8:34 AM
To: dan@klines.org
Subject: Re: SharePoint 2010 & HTML 5 problems/fixes? [SharePoint2010HTML5:361131]

From: Karnith

HI Dan,

so how did the testing go? I still notice some issues with IE and the people picker... It's funny how with the fixes FireFox is supported better than IE when using HTML5.

Aug 10, 2012 at 1:26 PM

Hi Dan,

 

I found another HTML5 issue with SPFieldLookup (look up fields) in SharePoint using HTML5. Do you know of any fix for this?

 

Thanks

Aug 10, 2012 at 5:37 PM
Karnith wrote:

Hi Dan,

 

I found another HTML5 issue with SPFieldLookup (look up fields) in SharePoint using HTML5. Do you know of any fix for this?

 

Thanks

Fixed it. here is the fix.

function FilterChoice(e, d, D, u) {
    ULSrLq: ;
    var a, h = 0,
        g = false,
        l = "",
        w = e.id,
        v = e.name,
        j = "",
        s = "",
        C = d.getAttribute("choices"),
        c = C.split("|"),
        z = AbsLeft(d),
        n = AbsTop(d) + d.offsetHeight,
        r = document.getElementById("s4-workspace");
    if (r) n -= AbsTop(r);
    var B = d.optHid,
        x = c.length - 1,
        m = -1,
        q = false,
        p = "";
    if (e != null && e.selectedIndex >= 0) {
        g = true;
        p = e.options[e.selectedIndex].innerText
    }
    for (a = 0; a < c.length; a = a + 2) {
        var b = c[a];
        while (a < x - 1 && c[a + 1].length == 0) {
            b = b + "|";
            a++;
            if (a < x - 1) b = b + c[a + 1];
            a++
        }
        var k = c[a + 1],
            i = b.toLocaleLowerCase(),
            A = D.toLocaleLowerCase();
        if (u.length != 0) g = true;
        if (i.indexOf(A) == 0) {
            var o = u.toLocaleLowerCase();
            if (o.length != 0 && i.indexOf(o) == 0 && j.length == 0) g = false;
            if (i.length > 20) q = true;
            if (!g || i == p) {
                l += '<option selected value="' + k + '">' + STSHtmlEncode(b) + "</option>";
                g = true;
                j = b;
                s = k;
                m = a
            } else l += '<option value="' + k + '">' + STSHtmlEncode(b) + "</option>";
            h++
        }
    }
    var t = ' ondblclick="HandleOptDblClick()" onkeydown="HandleOptKeyDown()"',
        f = "";
    if (q) f = '<select tabIndex="-1" ctrl="' + d.id + '" name="' + v + '" id="' + w + '"' + t;
    else f = '<select class="ms-lookuptypeindropdown" tabIndex="-1" ctrl="' + d.id + '" name="' + v + '" id="' + w + '"' + t;
    if (h == 0) f += ' style="display:none;position:absolute;z-index:2;left:' + String(z) + "px;top:" + String(n) + 'px" onfocusout="OptLoseFocus(this)"></select>';
    else f += ' style="position:absolute;z-index:2;left:' + String(z) + "px;top:" + String(n) + 'px" size="' + String(h <= 8 ? h : 8) + '"' + (h == 1 ? 'multiple="true"' : "") + ' onfocusout="OptLoseFocus(this)">' + l + "</select>";
    e.outerHTML = f;
    var y = document.getElementById(B);
    if (m != 0 || c[1] != "0") y.value = s;
    else y.value = "0";
    if (m != 0 || c[1] != "0") return j;
    else return ""
}
function SetCtrlMatch(b, a) {
    var c = b.getAttribute("optHid"),
        e = c != null ? c : "",
        d = document.getElementById(e);
    d.value = a.options[a.selectedIndex].value;
    if (d.value != "0") b.match = a.options[a.selectedIndex].innerText;
    else b.match = ""
}
function HandleOptDblClick() {
    var a = event.srcElement,
        b = a.getAttribute("ctrl"),
        d = b != null ? b : "",
        c = document.getElementById(d);
    _SetCtrlFromOpt(c, a);
    SetCtrlMatch(c, a);
    a.style.display = "none"
}

Coordinator
Aug 16, 2012 at 10:11 PM

I’m just back from thatConference 2012. Send me more info. I’ve resolved the other issues with the people picker and will be publishing updates in the coming weeks.

From: Karnith [email removed]
Sent: Friday, August 10, 2012 8:26 AM
To: dan@klines.org
Subject: Re: SharePoint 2010 & HTML 5 problems/fixes? [SharePoint2010HTML5:361131]

From: Karnith

Hi Dan,

I found another HTML5 issue with SPFieldLookup (look up fields) in SharePoint using HTML5. Do you know of any fix for this?

Thanks

Coordinator
Aug 17, 2012 at 12:05 AM

Thanks.

From: Karnith [email removed]
Sent: Thursday, August 16, 2012 5:20 PM
To: dan@klines.org
Subject: Re: SharePoint 2010 & HTML 5 problems/fixes? [SharePoint2010HTML5:361131]

From: Karnith

Karnith wrote:

Hi Dan,

I found another HTML5 issue with SPFieldLookup (look up fields) in SharePoint using HTML5. Do you know of any fix for this?

Thanks

Fixed it. here is the fix.

function FilterChoice(e, d, D, u) {
    ULSrLq: ;
    var a, h = 0,
        g = false,
        l = "",
        w = e.id,
        v = e.name,
        j = "",
        s = "",
        C = d.getAttribute("choices"),
        c = C.split("|"),
        z = AbsLeft(d),
        n = AbsTop(d) + d.offsetHeight,
        r = document.getElementById("s4-workspace");
    if (r) n -= AbsTop(r);
    var B = d.optHid,
        x = c.length - 1,
        m = -1,
        q = false,
        p = "";
    if (e != null && e.selectedIndex >= 0) {
        g = true;
        p = e.options[e.selectedIndex].innerText
    }
    for (a = 0; a < c.length; a = a + 2) {
        var b = c[a];
        while (a < x - 1 && c[a + 1].length == 0) {
            b = b + "|";
            a++;
            if (a < x - 1) b = b + c[a + 1];
            a++
        }
        var k = c[a + 1],
            i = b.toLocaleLowerCase(),
            A = D.toLocaleLowerCase();
        if (u.length != 0) g = true;
        if (i.indexOf(A) == 0) {
            var o = u.toLocaleLowerCase();
            if (o.length != 0 && i.indexOf(o) == 0 && j.length == 0) g = false;
            if (i.length > 20) q = true;
            if (!g || i == p) {
                l += '<option selected value="' + k + '">' + STSHtmlEncode(b) + "</option>";
                g = true;
                j = b;
                s = k;
                m = a
            } else l += '<option value="' + k + '">' + STSHtmlEncode(b) + "</option>";
            h++
        }
    }
    var t = ' ondblclick="HandleOptDblClick()" onkeydown="HandleOptKeyDown()"',
        f = "";
    if (q) f = '<select tabIndex="-1" ctrl="' + d.id + '" name="' + v + '" id="' + w + '"' + t;
    else f = '<select class="ms-lookuptypeindropdown" tabIndex="-1" ctrl="' + d.id + '" name="' + v + '" id="' + w + '"' + t;
    if (h == 0) f += ' style="display:none;position:absolute;z-index:2;left:' + String(z) + "px;top:" + String(n) + 'px" onfocusout="OptLoseFocus(this)"></select>';
    else f += ' style="position:absolute;z-index:2;left:' + String(z) + "px;top:" + String(n) + 'px" size="' + String(h <= 8 ? h : 8) + '"' + (h == 1 ? 'multiple="true"' : "") + ' onfocusout="OptLoseFocus(this)">' + l + "</select>";
    e.outerHTML = f;
    var y = document.getElementById(B);
    if (m != 0 || c[1] != "0") y.value = s;
    else y.value = "0";
    if (m != 0 || c[1] != "0") return j;
    else return ""
}
function SetCtrlMatch(b, a) {
    var c = b.getAttribute("optHid"),
        e = c != null ? c : "",
        d = document.getElementById(e);
    d.value = a.options[a.selectedIndex].value;
    if (d.value != "0") b.match = a.options[a.selectedIndex].innerText;
    else b.match = ""
}
function HandleOptDblClick() {
    var a = event.srcElement,
        b = a.getAttribute("ctrl"),
        d = b != null ? b : "",
        c = document.getElementById(d);
    _SetCtrlFromOpt(c, a);
    SetCtrlMatch(c, a);
    a.style.display = "none"
}
Coordinator
Aug 22, 2012 at 1:51 AM

Hi Karnith,

Can you tell me how to recreate this issue.  Also, where did you place your code modifications to get the result?  I've found and fixed a few additional isses and I will be soon publishing an update to the package.  There will be one separate piece of the solution that needs to be a farm solution.  There is an override to a JS function that is added to one of the ASPX pages in the hive.  That makes the solution not 100% sandbox, but under the circumstances, it seems like a reasonable compromise to the original objective.

Aug 22, 2012 at 5:01 AM

dankline wrote:

Hi Karnith,


Can you tell me how to recreate this issue.  Also, where did you place your code modifications to get the result?  I've found and fixed a few additional isses and I will be soon publishing an update to the package.  There will be one separate
piece of the solution that needs to be a farm solution.  There is an override to a JS function that is added to one of the ASPX pages in the hive.  That makes the solution not 100% sandbox, but under the circumstances, it seems like a reasonable
compromise to the original objective.





To recreate the issue, create a lookup field that references items in another list. When in the edit form I couldn't choose anything and the drop down wouldn't display. I have been putting everything in a js farm solution with additionalpagehead as target. I also ensure that the scripts load after core.js. Since the release of 2013 preview, I have been comparing the new js to the 2010 js for my fixes, which seem to work and only changing portions of the original js functions. I figured it would be easier to modify the existing 2010 code, tracking the changes to 2013, than to make it from scratch.