Encosia - ASP.NET, AJAX, jQuery, and more

Making Angular’s $http work with Request.IsAjaxRequest()

AJAX, Angular, JavaScript By . Posted May 7, 2015

A question that I see come up often is why Angular’s $http AJAX methods seem to be incompatible with server-side features in popular frameworks like ASP.NET MVC, Express, Django, and Rails that modify their responses for AJAX-based requests.

Examples range from partial rendering techniques like Rails’ Turbolinks (aka UpdatePanel 2.0) to endpoints that respond with nothing but a JSON representation of the page’s content instead of rendering HTML at all. A wide range of these sort of server-side features in various frameworks and libraries work that way, so the discrepancy between the behavior in Angular vs. client-side libraries like jQuery can be puzzling.

In this post, I’ll briefly explain the mechanism that your server-side framework uses to detect AJAX requests, show you how to make a single Angular $http request compatible with that mechanism, expand that to automatically apply to all requests sent through any $http method, and then explain why Angular doesn’t seem to work right by default.

Click here to read the rest of this post »

Setting the value of a datetime-local input with JavaScript

JavaScript, Mobile, UI By . Updated February 28, 2015

While they haven’t gained much traction on the desktop, HTML5’s new input types are great when you’re developing for mobile. Whether you use them in a mobile-friendly website or a hybrid app built with Cordova, most mobile devices will complement those regular HTML inputs with task-appropriate keyboard layouts or even show native interfaces in some cases.

Though these new inputs are pretty handy, they do still have a few rough edges. In fact, I ran into a very frustrating issue while trying set the value of a datetime-local input just today.

In this post, I’ll show you the correct syntax to set the value of a datetime-local input, and how to set it to the current date and time, while correctly accounting for the user’s time zone.
Click here to read the rest of this post »

Fix “addthis_config not defined” when using async AddThis

JavaScript, Performance By . Updated March 5, 2015

I recently decided to pony up for AddThis Pro. Spread across up to five sites, that’s not very much to pay for a wide variety of well-designed social widgets. Certainly much less than what my time would be worth to reinvent them from scratch.

However, I’m always wary of bogging the site’s performance down with poorly implemented sharing buttons, counters, toolbars, etc. I tried Buffer’s Digg Digg plugin for a little while last year, but it had a noticeable impact on page jankiness and load times even with the deferred initialization option enabled.

With performance in mind, I was happy to discover that AddThis supports loading the bulk of its client-side code asynchronously. However, I was less happy to find that it didn’t seem to work when I followed the instructions on their site, resulting in a JavaScript error and no AddThis widgets at all.

In this post, I’ll cover why you should consider using asynchronous scripts, how to fix the addthis_config not defined error, and an alternate way of asynchronously including the AddThis scripts that I think may be a better approach than the one AddThis recommends.
Click here to read the rest of this post »

The five minute contact form tweak that saves me hours

ASP.NET, Express.js, JavaScript, Node.js By . Updated March 19, 2014

Operating a website used by predominantly non-technical users can be an eye-opening experience when the time comes to support those users. It’s easy to forget how much of the nomenclature and technical understanding that we take for granted is just unintelligible jargon to others. In fact about 10% of people surveyed this year even guessed that HTML was an STD.

A particularly poignant example I dealt with recently was a user telling me they were using “Google” to browse the Internet on their desktop PC. You’d think that probably means they were using Google Chrome as their browser, right? Nope. They were using Internet Explorer with Google’s website set as their home page.

Unfortunately, assisting the most helpless users with technical issues still requires that they communicate details about their platform and browser to you at least semi-accurately. The broader problem is bigger than anyone can solve in a thousand words, but in this post I want to show you one small improvement I’ve made on my public-facing contact forms to help cut down on confusion with this specific aspect of helping non-technical users.
Click here to read the rest of this post »

A cleaner way to use setTimeout and anonymous callbacks

JavaScript By . Posted February 13, 2014

The most common syntax for using an anonymous function with JavaScript’s setTimeout has never sat well with me. For a quick, non-reusable bit of code that needs to run after some interval, you’ll often see something like this:

That works, but the placement of the closing curly brace makes the delay awkward to scan for and the code’s overall structure unnecessarily difficult to parse at a glance. That effect is exacerbated when the body of the anonymous function is more than just a line or two of code.

In this post, I want to briefly show you an simple alternative that I think is more readable and maintainable.

Click here to read the rest of this post »

Button click handlers, AJAX, and premature submission

AJAX, JavaScript By . Updated February 1, 2014

When you begin moving from server-side web development to a client-side approach to driving your user interfaces, a common first experiment is to enhance an existing button with some JavaScript that runs when the button is clicked. For example, clicking a button that should request and display the current time from a server is basically the “hello world” of AJAX.

Unfortunately, that common learning progression is prone to a confusing outcome when you’re working with buttons within form elements. The problem is that you need to take into account that the browser’s form submission mechanism is not interrupted by client-side JavaScript by default.

Click here to read the rest of this post »

My favorite alternative to JavaScript’s switch statement

JavaScript By . Posted May 23, 2013

One of my least favorite parts of nearly every programming language I’ve spent much time with has been the ubiquitous switch statement. Though it does serve a useful purpose in some compiled languages, I think switch is a clunky eyesore in most code. Its structure is prone to taking root and only growing larger and more cumbersome over time.

If you’re coming to JavaScript from a background in procedural languages like C#, Java, or PHP, it’s natural to reach for the same tools, like switch, that you’re accustomed to using in those languages. However, JavaScript’s flexible object literal syntax and first-class functions offer alternatives to switch that I believe are cleaner, more extensible, and more maintainable.

So, in this post I want to show you a few ways that you can refactor a JavaScript switch statement to use this alternate technique, and improve its extensibility and maintainability in the process.
Click here to read the rest of this post »

Interesting details on IE10’s JavaScript performance tweaks

JavaScript, Short By . Updated June 13, 2012

There’s a great article on the Internet Explorer team’s MSDN blog this week, Advances in JavaScript Performance in IE10 and Windows 8. I’ve been running Windows 8 as my primary OS for several weeks, and I must say (as bizarre as it feels to type these words), IE10 is incredibly fast and fluid. It’s almost like that first time you used Chrome after using Firefox with too many add-ons. Whatever they’re doing over there, it’s working.

The entire post was interesting, and you should probably read the whole thing if you’re a serious JavaScript developer. However, one point in particular stood out to me, regarding a new approach to deferred parsing:

The JSMeter project from Microsoft Research showed that typical Web pages use only a fraction of code that they download – generally on the order of 40-50%. Intuitively, this makes sense: developers often include popular JavaScript libraries like jQuery … but only leverage a fraction of the functionality the library supports.

To optimize such scenarios, Chakra performs only the most basic syntax-only parsing of the source code. The rest of the work (building the abstract syntax tree and generating bytecode) is performed one function at a time only when the function is about to be invoked. This strategy not only helps with the responsiveness of the browser when loading Web pages, but also reduces the memory footprint.

In IE9 there was one limitation of Chakra’s deferred parsing. Functions nested inside other functions had to be parsed immediately with their enclosing functions. This restriction proved important because many JavaScript libraries employ the so called “module pattern,” in which most of the library’s code is enclosed in a large function which is immediately executed. In IE10 we removed this restriction and Chakra now defers parsing and bytecode generation of any function that is not immediately executed.

Microsoft’s focus on real-world performance enhancement in IE9 and IE10 has been an under-appreciated breath of fresh air in the browser wars. Remember when everyone was competing to improve scores on synthetic JavaScript benchmarks instead of concentrating on actual on-page performance? I don’t miss those days.

If Microsoft would address the archaic extensibility model in Internet Explorer, I’d probably be using it to type this post right now. Given replacements for the dozen-ish essential extensions I use in Chrome, I could see myself being tempted to switch back to IE after ten years of Firefox and Chrome.

The landscape today is reminiscent of how things were shaping up just before so many of us began switching from Netscape to IE5/6, way back when. Never underestimate how fiercely Microsoft can compete and innovate when an entire division of the company commits to winning.

Adding your own callbacks to existing JavaScript functions

JavaScript, jQuery By . Posted January 11, 2012

Hey Dave, is there a way to create an event handler so when .tmpl() is done it will fire a function? I’m trying to make it global, so I was hoping I could say, when ANY template gets done, do this…

The question of how to retroactively add hooks before and/or after a pre-existing JavaScript function executes is one that comes up from time to time. Whether it’s a simple method like tmpl(), a server-generated script artifact, or a function in a third-party script, sometimes it’s desirable to alter a JavaScript function without access to change the original declaration of the function.

One of the handy things about JavaScript is that you can combine its functional and dynamic aspects to make surprisingly quick work of tasks like this one. Doing so is fairly straightforward, but it involves an approach you might not consider if you’re more familiar with languages that lack JavaScript’s unique features.

In this post, I’ll briefly cover a few examples of how to “patch” existing JavaScript functions with callbacks. We’ll begin with simple examples, then address an issue that stems from applying this approach to jQuery plugins, and finish with a more elegant way to handle the problem of patching functions that accept parameters.

Click here to read the rest of this post »

Learn from my Express.js HTTP status code blunder

Express.js, JavaScript, Node.js By . Posted November 9, 2011

Screenshot of the 200 Object] HTTP status code in Firebug

If you’re like me, HTTP status code 200 Object] unknown probably doesn’t ring any bells. Of course, that’s mainly because it doesn’t exist.

So, how did I end up with the screenshot above? I’ve been running with scissors again. It was one of the more popular web frameworks for Node.js that I cut myself with this time: Express.js

Unfortunately, a malformed status code like 200 Object] will cause some browsers (including the version of Chrome I was using at the time) to refuse loading the page at all. That quickly elevated the importance of my strange status code from a trivial oddity to an annoying thorn in the side.

As it turns out, my code was running up against a documented Express feature and the remedy was simple enough.

Click here to read the rest of this post »