Posted by Derik Whittaker
Friday, April 12, 2013
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.