CORS take 2–IE edition

I successfully implemented CORS in Firefox and Chrome, but could not get it to work in IE.  No surprise right?  My issues were:

  1. No transport error message:  When JQuery builds a ajax response object, it uses a factory to get the transport object.  So in some cases IE will use an ActiveX object to make the ajax call.  But if the proper transport to use can not be determined you’ll get the “No Transport” error message.  So the workaround is to tell jquery to use CORS:
    $.support.cors = true;
  2. Access Is Denied:  This was driving me crazy!  I wrote a spike that worked fine in IE, but the exact same code would fail to run on my web site.  There were 2 reasons:
    1. Using “localhost” in the ajax url setting – IE really doesn’t like this, so it just chucks an error.  I think there is a setting somewhere to enable this to work, but I just replaced “localhost” with my IP address to work around the problem.
    2. Document Mode : I was forcing my web page to use the IE8 standards document mode.  That combination of IE10 browser mode and IE8 standards just made IE ralph all over the place.  Removing the “meta” tag from the page header so it would default to plain ol “Standards” fixed it right up.
  3. IE8 and IE9: Once I had everything working in IE10, I moved on to the other two versions.  They laughed at my attempts.  So I downloaded a JS jquery addon from MoonScript:
    https://github.com/MoonScript/jQuery-ajaxTransport-XDomainRequest
    With this script included on the page, I made the ajax calls the same way but the big difference is it worked…
Advertisements

CORS support for web API in VisualStudio 2012

So I have 2 web services – one is a web-api service and the other is some Frankenstein.  When a CORS request comes over to the server it comes with the “OPTIONS” HTTP method, so I’m guessing there is an “options” attribute you can add to customize the request for a specific method…  Not sure why you would do that though.

Here are the notes I’ve collected from the process of adding support to both services:

ScottGu: http://weblogs.asp.net/scottgu/archive/2013/04/19/asp-net-web-api-cors-support-and-attribute-based-routing-improvements.aspx

http://aspnetwebstack.codeplex.com/wikipage?title=CORS%20support%20for%20ASP.NET%20Web%20API&referringTitle=Specs

Web API steps
My big hangup is doing this in visual studio 2012 – it doesn’t appear to be made to work out of the box in vs2012…
– Include System.Web.Cors.dll and System.Web.Http.Cors.dll – had to download the nuget package Microsoft.AspNet.WebApi.Cors.
– Enable CORS in the WebApiConfig.Register – you can then use the [EnableCors] attribute.  However the example in the codeplex example appears to be bad —  You can’t instantiate a EnableCorsAttribute object without parameters…
– To load settings from your config, you have to implement an ICorsPolicyProvider class
– Examples in the second link show how to implement it as a custom attribute
– Had to add a dependent section to the web.config:

      <dependentAssembly>
        <assemblyIdentity name="System.Web.Http" publicKeyToken="31bf3856ad364e35" />
        <bindingRedirect oldVersion="1.0.0.0-5.0.0.0" newVersion="5.0.0.0" />
      </dependentAssembly>

–  Had to follow the nuget update steps in: http://stackoverflow.com/questions/18347290/webapi-odata-5-0-beta-accessing-globalconfiguration-throws-security-error

– Added one more dependent section to the web.config

      <dependentAssembly>
        <assemblyIdentity name="System.Net.Http.Formatting" publicKeyToken="31bf3856ad364e35" />
        <bindingRedirect oldVersion="1.0.0.0-5.0.0.0" newVersion="5.0.0.0" />
      </dependentAssembly>

UPDATE: Customize JQueryUI Accordion Click

The widget event handling code has changed with the latest JQueryUI code…  Back in April I posted how I hacked the JQueryUI accordion control to restrict the click to the arrow icon.  To get this hack to work with JQueryUI 1.9.1+ the code changes to:


$(document).ready(function() {

$(“#accordion”).accordion({
active: false,
collapsible: true,
event: “”
});

$(“.ui-accordion-header .ui-icon”).bind(“click.accordion”, function(evt) {
var current = $(this.parentNode.parentNode).data(“accordion”);
console.log(current);
evt.currentTarget = this.parentNode;
current._eventHandler( evt )
});
});

The c# “yield” keyword explained

I’ve been trying to understand the “yield” keyword and it’s a tough one for me to wrap my mind around. 

…it doesn’t really end the method’s execution. yield return pauses the method execution and the next time you call it (for the next enumeration value), the method will continue to execute from the last yield return call. It sounds a bit confusing I think… (ShayF)

I found a few good resources on it:

Struggles by Lars C.

Give way to the yield keyword! (IronShay)

Calling Prototype methods in Javascript

Sometimes when one is working with jquery plugins, one desires to call a juicy method in the control.  And you know the method is there because you can see it in action.  But you can’t call it…  Because it’s in the prototype…

This very thing happened to me today using a plugin called Chosen.  Chosen is an extension of the drop down list which allows the user to filter the list of items.  Pretty cool idea, and it doesn’t look bad either.  The problem occurred with switching between chosen controls with the tab key.   When tab is pressed, the value of the first control is set and the “changed” event is fired.  In the change event, an ajax call is made to populate the values in the second control (based on the value of the first control).  The problem was I could never set focus to the second control once the populate was finished.  What I finally had to do was call the close and activate prototype methods like so:

$(portfolioCtrl).data('chosen').close_field();
property.data('chosen').activate_action();