Category Archives: JavaScript

HTTP 406 Error When Using Angular $http.get Against SharePoint REST End Points

2 Replies

Update: Marc AD ndersson pointed out this great piece of info: http://blogs.office.com/2014/08/13/json-light-support-rest-sharepoint-api-released/.  That explains a lot :).

That may be the worst title of a blog post ever!  Anyhoo.

I typically do all of my prototyping against an O365 instance.  I have my personal instance so that I don’t have to be worried about affecting anyone else.  As an aside – remember when we call carried around virtual machines on our laptops with MOSS – SQL Server, IIS, deciding Hyper-V vs. VMWare?  Anyhoo…

I had developed an app using Angular in this environment that does, among other things, this:

$http.get(serverUrl)
.success(function(data, status, headers, config) {

    var getLinksResponse = data;

    getLinksResponse.value.forEach(function(theResult) {

    // and so on and so froth

This was working just fine in two different SharePoint online environments.  However, when my colleague ported it to a Cloudshare instance, he was getting an HTTP 406 error (which was the first time I ever got that one, so … yay, I guess).  We did a bit of research and noticed that the “Accept” header was off.  SharePoint online was perfectly happy with:

Accept: application/json

But the cloudshare instance (which is SP on prem, hosted in a virtual server) wanted the classic “odata=verbose” added in as well:

Accept: application/json;odata=verbose

To fix that, we added the header as such:

var config = {headers: {
‘Accept’: ‘application/json;odata=verbose’
}
};

$http.get(serverUrl,config)
.success(function(data, status, headers, config) {

  var getLinksResponse = data;

  getLinksResponse.value.forEach(function(theResult) {

  // and so on and so froth

That got rid of the 406, but it also changed the format of the response.  It was more … verbose.  (haha!)  More changes were required and here’s the final result:

var config = {headers: {
‘Accept’: ‘application/json;odata=verbose’
}
};

$http.get(serverUrl,config)
.success(function(data, status, headers, config) {

  var getLinksResponse = data;

  getLinksResponse.d.results.forEach(function(theResult) {

  // and so on and so froth

This only turned into a 30 minute problem for us, so we lucked out.  Hopefully someone finds this useful.

</end>

Angular Fails to Bootstrap in IE9

Leave a reply

I’ve been playing around with Angular.js for the last long while and for the life of me, I could NOT get my Angular apps to launch in IE9.  They all work fine in IE11 but IE9 would just show the curly braces and similar bits.

I searched around and couldn’t find anyone complaining about his problem.  It worked fine in Chrome, IE11, just not IE9.

I was thrown off by the fact that the IE console was giving me errors like this:

SEC7111: HTTPS security is compromised by res://ieframe.dll/forbidframing.htm

That error had me thinking there was some problem downloading the angular or other libraries that I needed.  As it turns out, this was not the issue.

By poking around the internets, I finally found out that the phrase I needed to search for was “bootstrap” and that it seemed like the bootstrapping was failing.  In the end, my problem was that I had decorated my <html> tag with the ng-app attribute, as in:

<html ng-app="MatrixApp">

Well, that didn’t work for IE9.  Instead, I wrapped all the rest of the HTML in the <body> inside a div and references MatrixApp that way.

Problem solved.

Hopefully this saves someone some grief.

</end>

Growing Awareness / Adoption of JavaScript Frameworks

Leave a reply

My colleague, Javed Ansari (http://www.bigapplesharepoint.com/team?showExpertName=Javed%20Ansari&rsource=pgblog), wrote a short summary blog post on frameworks he likes or at least has been using with with SharePoint: http://www.bigapplesharepoint.com/pages/View-An-Insight.aspx?BlogID=53&rsource=PGBlog).

jQuery seems to have been the victor on the field, so to speak, for years now, but the others are more new and stills sort of battling it, like Angular. (SPServices, of course, has been a life saver for years and will continue to be so I think).

What are people using? Are they focused more on Microsoft’s tooling (CSOM / JSOM) or moving more toward Angular, Knockout, Ember, etc?

I have a growing bias toward these non-Microsoft frameworks. I think the MSFT stuff is harder and harder to work with, requiring almost as much of learning curve as old-style server-side dev.

Post a comment here or over at Big Apple SharePoint if you want to discuss (Big Apple will have more likelihood of a good discussion).

</end>

Overcome Annoying Problem with Relative Urls in SharePoint Quick Launch

Leave a reply

I wanted to add a link to the quick launch navigation the other day and SharePoint told me:

image

Pure text version of that is:

Ensure that the URL is valid and begins with either a valid character (a number sign (#) or forward slash (/)) or a valid supported protocol (for example, ‘http://’, ‘https://’, ‘file://’, ‘ftp://’, ‘mailto:’, ‘news:’).

“Blech and pox!” I said.

A workaround to this is to use JavaScript to find a known link in the quick launch and override its behavior.

To test this, add a new link to your test site thusly:

image

I used jQuery.  To solve it, get some JavaScript and jQuery onto the page using your favorite technique and with a line of code like this:

 

$(document).ready( function () {

    $("a:contains('Test URL replacement')").click(function () { alert("changed click behavior!"); return false;});

});

And Bob’s your uncle.

The jQuery selector finds every <a> tag that has “Test URL replacement” in its name.  You may want to find-tune that depending on your link and such.

The .click(function() overrides whatever SharePoint would have done when the user clicked.  Make sure you “return false” or else it will do your stuff and then try to the href thing too, which is almost certainly not your goal.

This was done and test in a SharePoint online environment but should work well in 2010 and earlier too.

</end>

undefinedSubscribe to my blog.

Follow me on Twitter at http://www.twitter.com/pagalvin

Poor Man’s Caching in JavaScript

1 Reply

[TL;DR version: use cookies to store the results of async calls; render the results of past async calls immediately and then validate them after page-load.]

I’ve been working on SharePoint intranet site for a client that features, among other things, a stylized secondary navigation whose menu options are managed via a regular old custom list.  The idea is that the client gets to control “their” site’s menu without affecting or being affected by the global navigation put out by IT.

(there is something incredibly subversive about adding a CEWP that points to an HTML file that loads some CSS and JS to fundamentally alter almost everything about a site’s behavior… but that’s for another post)

The code for this pretty simple:

The sore spot here is that every time anyone hits one of the site’s pages, that user’s web browser is reaching out to get items from the list.  Once dev is complete and testing has proven things to be stable and complete, this call is unnecessary more than 99% of the time since the menu rarely changes.  It also has a weird UI affect which is common in this brave new world of hyper-ajaxy web sites – the page renders and only then does the menu render.  It’s jittery and distracting in my view.  And jittery. So, caching. 

I modified the logic thusly:

  • Look for a cookie in the browser that contains the menu as I last read it
    • If found, render it immediately.  Don’t wait for the page to finish loading.  (You need to make sure your HTML is strategically placed here, but it’s not hard to do).
  • Wait for the page to finish loading and make an async call to load up menu items from a list using REST or lists.asmx or whatever
  • Compare what I got against the cookie
    • If it matches, STOP
    • Otherwise, using jQuery, dynamically populate a bunch if <li>’s in a <ul>
  • Use CSS to do all the formatting
  • Profit!

Some of you are going to say, “hey! there’s no real caching going on here since you’re reading the menu anyway every single time.”  And you’re right – I’m not giving the server any kind of break.  But because the call is async and happens after the page’s initial HTML payload fully renders, it “feels” more responsive to the user.  The menu renders pretty much as the page draws.  If the menu happens to the change, the user is subjected to a jittery re-draw of the menu, but only that one time.

There are some ways to make this caching more effective and help out the server at the same time:

  • Put in a rule that the “cookie cache” is valid for a minimum of 24 hours or some other timeframe. As long as there is no expired cookie, use the cookie’s menu snapshot and never hit the server.

Well … that’s all that come to mind right now :). 

If anyone has any clever ideas here I’d love to know them.

And lastly – this technique can be used for other stuff.  This client’s page has a number of data-driven things on various pages, many of them changing relatively rarely (like once a week or once a month).  If you target specific areas of functionality, you can give a more responsive UI by pulling content from the local cookie store and rendering immediately.  It feels faster to the user even if you’re not saving the server any cycles.  You can save the server cycles by deciding on some conditions and triggers to invalidate this local cookie cache.  That’s all situational and artsy stuff and really the most fun :). 

</end>

undefinedSubscribe to my blog.

Follow me on Twitter at http://www.twitter.com/pagalvin