Derik Whittaker : jQuery

Typescript, jQuery and the ‘this’ context causing issues

Derik Whittaker — Fri, 12 Apr 2013 15:36:26 GMT

Today I was in the middle of porting some raw javascript over to TypeScript as well as moving inline javascript into separate classes. In the middle of doing this I started to run into some really odd stuff. Namely, the ‘this’ context in one of my methods was set to window, not to the parent object. This was really weird and at first I thought maybe it had to do w/ Inheritance and Typescript (this class implemented a base class). Sadly even when I removed the base class I was still getting the results.

After a bunch of digging I was able to find the root cause, Derik was doing something stupid and jQuery was making it worse :)

In order to get some feedback and to help illustrate my issue.

Here is what my Typescript class which was having the issue looked like. The box in red is what was throwing the error.

From Chrome’s debugger when I would output ‘this’ it would be the browsers window object, not my parents object. This told me something was screwed up but I could not find the cause. That was until I started walking the call stack to see WHERE PerformSearch was being called. Turns out PerformSearch was being called by jQuery… that was odd. In fact below is the code making the call.

Again, why was jQuery calling my method I had not told it to. Well I kept walking the stack and I realized that this was being called during a .ajax call as seen below.

It turns out that the ‘data’ object I was passing across the wire was not just a property bag, but it had methods. These methods referenced ‘this’ and when jQuery tried to searlize the object it is executing the functions, and when it does the ‘this’ context is wrong and BOOM.

To solve this issue I simply refactored my code to NOT have a method and then it just worked.

My question is this. Is what I was doing just dumb and I was an idiot, or is there a way to tell jQuery to NOT try and call my methods during serialization?

Till Next time,

P.S. I know I could have guarded against this in my method by checking that ‘this != window’ but that felt dirty and I had a better solution.

Help I am getting an XMLHttpRequest exception of Access-Control-Allow-Orig

Derik Whittaker — Sun, 10 Feb 2013 12:34:06 GMT

When working on a demo application recently I was trying to get an ajax call to hit one of my Web API routes and I was immediately hit with the following exception.

XMLHttpRequest cannot load http://localhost:33884/api/ToDo/. Origin http://localhost:3462 is not allowed by Access-Control-Allow-Orig

Of course this sucked because I KNEW what the issue was but not exactly how to solve it. Well solve it the way I wanted. Of course i could have just put both my sites (MVC project and WebAPI project) under the same web application in IIS to remove this but that was not an acceptable answer for my needs.

After a bit of searching online I thought I came across an solution that would work. I thought that I could just set the crossDomain switch in my ajax call as below to get it to work, but no dice.

$.ajax({
    url: url,
    type: 'Get',
    crossDomain: true,
    success: (data) = & gt; {
        // do something here
    },
    error: (data) = & gt; { }
});

I found another suggestion telling me to change the dataType of request form json to jsonp as below, but as you may have guessed that did not work.

$.ajax({
    url: url,
    type: 'Get',
    dataType: jsonp,
    success: (data) = & gt; {
        // do something here
    },
    error: (data) = & gt; { }
});

Finally at a bit more searching I found more information which suggested I needed to add a response header on the server side to allow ‘Access-Control-Allow-Origin’ and this Stack Overflow answer gave me all the details needed to make this happen in Web API. Once I implemented the solution inside my WebApi endpoints and REMOVED the 2 un-needed attributes in my .ajax call the world was a happy place and I was able to make cross domain calls to my other services.

Till next time,

Asp.Net Web Api MediaTypeFormatter Error for x-www-formurlencoded data

Derik Whittaker — Thu, 20 Dec 2012 13:06:17 GMT

As I was breaking out some of my MVC controllers to use Web Api I ran into a not so fun error (seen below) when doing a jQuery Post.

I was trying to post a model via jQuery to my Web Api Endpoint and it was failing and it made no sense because when I used Postman via Chrome it would work just fine. My jQuery code is below

var model = {
    GroupId: self.SelectedGroup().GroupId,
    Name: self.SelectedGroup().Name,
};

$.ajax({
    url: route,
    type: 'Post',
    dataType: "json",
    data: model,
    success: function(data){ 
        alert("passed");
    },
    error: function(data) {
        alert('There was a (' + data.status + ') returned due to ' + data.statusText + '.'); //or whatever
    }
});

My Postman setup looked like

Turns out to find my issue i needed to inspect the error result passed back to jQuery which pointed me towards the real error of

"No MediaTypeFormatter is available to read an object of type 'GroupSelectionModel' from content with media type 'application/x-www-form-urlencoded'."

Now that I knew that jQuery was trying to do a FormUrlEncoded post, not a pure json post I had an idea what the root cause was… ME. I was trying to be clever and only allow for the JsonMediaTypeFormatter and removing ALL other formatters, see below.

What I needed to do was the following

Once I added the correct formatter it all just WORKED.

Till next time,

Adding JQuery UI to MVC 3 Application causes a JScript Runtime exception

Derik Whittaker — Sat, 10 Sep 2011 11:08:27 GMT

Today I added a reference to jQuery UI via Nuget to the rewrite of the Dimecasts.net website and as soon as I launched the site locally I was presented with the following dialog:

Now given the fact that the ONLY change to my code base was adding the scripts to my scripts folder as well as adding the 2 lines to my _Layout.cshtml file which includes the jQuery in the application as below I knew the error had to be w/ the adding of the script tags.

In order to prove my theory I simply removed the script tag which included jquery-ui-1.8.16 and restarted the site. Sure enough everything worked just fine. When I took a step back and better studied the error it made sense to me that jquery-ui MUST be after the jQuery script tag. So I moved the script tag to the end of the list as below and restarted the site.

Sure enough all is right with the world and I no longer have any runtime JScript engine exceptions. Now it is time to make use of the JQuery UI stuff.

Hope this helps someone in the future.

Till next time,