Category Archives: Development

Manipulating table child elements in AJAX callback considered harmful?

This is one of those small bugs that eats away entire day. You find a workaround rather quickly, but can’t let go until you know what to heck is going on.

This happened in rather large AngularJS application, which meant I had to chip away everything that is not necessary to reproduce the issue for hours.

Application screen consists of a table with several rows, with number input boxes. When user changes a value and leaves the input field, application sends a web request to perform some kind of calculation to 3rd party service. It then replaces the row that contains the changed field (performing web callbacks onblur is due to hard requirements that customer has placed. Not mine to judge). If blur event occurred due to clicking (not tabbing) into another input in same row, buttons don’t receive click events anymore. I have to stress, that there is no flicker to indicate elements moving around the page. If you click anywhere within the table again, click events start getting fired again.

You can see the issue in action here

Wait for table to load, click one input, then click second input in same row. Now go to bottom of the table and click “Can’t click this!”. It should show an alert. More often than not, it will not fire if you are using IE.

After removing almost all of the code of the application, conclusion is following:

  • happens only in IE (even version 11)
  • happens only when modifying inputs within TABLE element
  • happens only when modifying DOM within an AJAX callback
  • happens only when inputs within a table are defocused+focused
  • disappears when something is focused again after the manipulation

Why this happens?

Can’t really give you inner workings of the browser, but a hint is that AngularJS doesn’t seem to update values in inputs when you swap the object under it. It removes the inputs, and places new ones (we’re talking about ngRepeat directive to generate table rows). If you actually modify values within bound objects, this problem doesn’t happen.

Workaround? Why, there’s an ugly workaround always, of course!

Actually, there are two.

Focus something after modifying the DOM:

document.body.focus();

Or, modify the objects to which Angular model is bound. You can use angular.copy() function for that. It’s primary use is for creating copies of objects, but it takes an optional second parameter using which you can provide destination object.

angular.copy(newItem, $scope.ItemArray[idxToReplace]);
// instead of 
$scope.ItemArray[idxToReplace] = newItem;

Although second workaround seems nicer, I prefer the first one. I don’t want workarounds to seem nice. Broken line of code shown in workaround is actually more optimal, so I assume someone may want to ‘fix’ the workaround. I prefer that fixes for ugly bugs be obvious.

Update 2015-06-18:
This also happens with current version of Spartan browser.

EntityFramework 7 – Where to next?

With a track record of doing major strategy shifts, Microsoft wasn’t the company one would expect to play by rules that someone else wrote. After era of dictating trends, they’ve learned to listen and follow paths set by someone else. They’ve open sourced a lot of things they are working on. And not just research projects. Major frameworks or components used by millions of websites.

EntityFramework is another proof that they listen. They’ve heard how people want to do data access, and they’ve followed the way set by Hibernate project. They weren’t very successful in the begging. I’ve had a lot of rows with EF 3.5, it’s object tracking, database first design et cetera. After years of playing catch-up, finally with EF 5 we got a tool which we would dare use in a production project.

After tremendous effort they’ve made, and a lot of energy invested they are neck and neck with best O/RM solutions, and they have a chance to offer something more. Strategy for EF7 has been outlined for public in their Entity Framework Everywhere initiative.

What I’ve taken away from their post is:

  • It will be lightweight. Many seldom used features will not be there. Think, one-to-one mapping will remain, inheritance mappings wont. And surely few other things.
  • It will be available everywhere. Meaning, we will finally have a worthy heir to SQLite for local storage (think Windows Store, Windows Phone)
  • It won’t be just for relational data anymore. Azure Table Storage will be one of the target stores
  • EntityFramework 7 will be a different beast, and will potentially introduce noticeable amount of breaking changes to existing projects. Those of you used to DbContext need not worry as much
  • EntityFramework 6 will be developed and maintained in parallel

FeatherThose are tactical steps they are taking. What is the strategy behind them? I’m not so sure these steps stemmed from a strategy. It is the other way around. Microsoft has invested a lot of effort into making a good O/RM tool with premium experience for developers. Now that they are there, they still have developers who’ve invested years in EF and rather than shifting to maintenance mode and disbanding part of the team, they’ve decided they can afford to innovate. We don’t see clear strategy also because now ASP.NET team which is in charge of EF, is making  a tool for Windows Store and Windows Phone.

What Microsoft is doing is providing a lot of choice to developers. Rather than risking by making a strategy and missing, they are providing many choices and hoping us developers will take them the rest of the way. I’m enthusiastic about having lightweight local storage O/RM, and hope for better performance, but I hope that developers won’t get lost in forest of choices.