When using async events, it's important to understand how events work when called asynchronously. Specifically if you need to interact with the event context for things like preventDefault(), cancelBubble() or returning values that determine completion state, you need to be careful as these may have no effect if called after an `await` call.

The native date picker in HTML is a bit of a pain to work with as it's overly simplistic in features and how you have to assign and retrieve values from it. It also isn't customizable so if you need to build custom behavior like a button date popup that doesn't show the input control, you're out of luck. In this post I discuss the challenges of the HTML date picker control, provide small component to make binding values easier, and provide an example on how to create a button only date picker both with plain JavaScript and as a small Vue component.

In this post I describe a small, very specialized addon component for the HighlightJs Syntax highlighter that displays a badge that lets you copy the code snippet and displays the syntax language. The post covers how to use this simple component, and a look behind the scenes on how it works.

When you're creating HTML Anchor links that are non-navigating and handled via script code or through some JavaScript framework, what's the best way to handle the `HREF` navigation link in the HTML? In this back to basics post I look at a few different approaches and what works best.

Getting value out of maps that are treated like collections is always something I have to remind myself how to do properly. In this post I look at JavaScript object iteration and picking out values from a JavaScript object by property name or index.

When creating list content in Web pages, it's often quite useful to allow users to sort or reverse the order of items displayed. Creating client side sortable lists is easy to do and in this post Rick shows an easy way to make a list reversible using jQuery.

Last week I posted about a small jquery-resizable plug-in I'd built. Many questions came in about how to handle table column resizing using this plug-in and in this post I demonstrate how with a little extra work, you can also create resizable table columns using the jquery-resizable plugin.

I recently had a need for a simple resize component and couldn't find a lightweight implementation. I ended up creating a small jquery-resizable plug-in. In this post I discuss a few use cases for resizables and show the jquery-resizable plug-in, how it works and how it's implemented.

JavaScript frameworks are undergoing a huge change for their V2 releases, going through the growing pains of providing a more modern platform and bridging new technologies. While the new frameworks promise improved performance and usability, there is also quite a bit of pain involved in respect to the build process and making the move to ES6.

JavaScript frameworks have moved front and center in the mainstream in the last year and a half or so. When building modern Web applications, the bar has been raised significantly by what is possible in large part due to the more accessible mainstream frameworks that are available today to build rich client and mobile Web applications. In this post I'll explore why JavaScript frameworks have become so popular so quickly and how it effects the future of Web development. This two part series addresses the current state in this post, and the new crop of V2 frameworks arriving later this year in the Part 2.

Ran into a problem converting from Angular 1.3 to 1.4rc a couple of days ago. The issue is that the way ng-model bindings work has changed, in that Angular 1.4 and later uses exact type matching for value comparisons which results in behavior changes. In my case I ran into a problem with static list values binding to a non-string value which caused the binding to effectively not work at all. Here's what the problem is and how to work around it.

When creating services it's often useful to return data from the $http service, or cached data that already exists. You can't however just return the cached data, but have to turn it into a promise so it matches the $http callback signature. Here's how to deal with this frequent scenario.

The AngularJs $http object returns custom promises which can be surprising when you try to work with them. You can use either .then() or the easier .success() and .error() methods - at the cost of some inconsistency in Promise usage as these extension are specific to the $http functions. In this post I review a few different ways you can use promises and more importantly what the various $http methods return.

A few years back I wrote about a jquery-watch plugin I wrote that can monitor CSS property and Attribute changes and let you get notified if one of the monitored properties are changed. Unfortunately the plugin broke a while back as browser and jQuery dropped some older APIs. In this post I describe an update to the jquery-watch plugin using the newer and more widely supported MutationObserver API that brings high performance DOM node monitoring.

Angular supports the ng-cloak directive to address hiding initially unrendered template content. I found out the hard way that sometimes with very large pages this mechanism doesn't quite work and still results in slight page flicker of the unrendered template content. In this post I describe the problem and several easy solutions to get around it the edge case scenario.

When dealing with HTML based list data, filtering that data based on search text is a nice UI feature that's very useful for quickly finding what you're looking for. In this post I show you how to can create this nice UI effect with a few lines of jQuery code, and then provide a jQuery plug-in that simplifies the process further.

CSS Transitions are a nice way to replace jQuery animations with smoother counterparts. Some transitions however, like height and width transitions can be tricky to handle with pure CSS code due to container sizing issues. In this post I show how create create transitions to mimic most of jQuery's slideUp() and slideDown() functions using CSS and small jQuery plug-in.

This is a brief review of the Aysync JavaScript book by Trevor Burnham. It's great, small book that's easy to read and get through, that blazes through various Async concepts in a really easy to understand and practical way. Great read and highly recommended.

JavaScript doesn't have a date literal, and for this reason JSON serializes dates as strings rather than real JavaScript dates. In this post I show how JSON date serialization works, a few approaches how you can manage dates and how to automate the process of converting JSON dates to 'real' dates more easily.

Angular provides a nice routing, and controller to view model that makes it easy to create sophisticated JavaScript views fairly easily. But Angular's views are destroyed and re-rendered each time they are activated - what if you need to work with a persisted view that's too expensive to re-render? Here's how to build a headless controller that doesn't render a view through Angular, but rather manages the the view or markup manually.

Popping up the native SMS app from a mobile HTML Web page is a nice feature that allows you to pre-fill info into a text for sending by a user of your mobile site. The syntax is a bit tricky due to some device inconsistencies, but here's how to do it.

Ran into a snag with Angular Databinding where items added to an array $scope variable were not 'overwriting' other array elements. Turns out this isn't an Angular issue, but a JavaScript referencing issue, that can be easy to miss when using data binging.

SessionStorage and LocalStorage provide easy client side storage for Web applications. In this post I describe a specific scenario for caching list display data and state for a server rendered HTML application using sessionState. See how you can make a server rendered HTML application more user friendly and faster caching content on the client and redisplaying it when the user returns to a page he navigated from.

Last month I finally had a chance to use SignalR in a live project for the first time, and I've been impressed by what this technology offers to .NET developers. It's easy to use and provides rich real-time two way messaging between client and server applications, as well as the ability to broadcast message to all connected clients. This is technology that offers many opportunities to rethink of what we can build with Web applications.

plUpload is a popular client side multi-file upload component. In this article I describe a small library that abstracts the server side processing of uploaded files with an HTTP handler demonstrate putting it all together with a small Image Upload sample application.

If you need to sanitize raw HTML for display in Web applications, the job at hand is scary for .NET backends. Unfortunately it seems there aren't a lot of tools available to help in this formidable tasks and the tools that are tend to be inflexible to the point of often being unusable. In this post I show a base implementation of an HTML Sanitizer that can be customized for your own needs.

Handling keyboard input events in JavaScript can be tricky when you need to deal with key codes. There are browser difference and different behaviors for various key events. Here's a refresher on how keyboard events work and a utility that lets you test key strokes and their resulting key codes in the various events available.

There are lots of examples limiting HTML textbox input to numeric values only but most examples fail to capture valid keys like navigation and edit keys properly so as to not interfere with normal textbox behaviors. Here's a simple plug-in that takes special keys into account.

I have the need to monitor movement of elements in an HTML document via JavaScript. Unfortunatey there are no events that fire if HTML elements are moved around the document either via dragging or by programmatic location changes. As a workaround I created a jQuery CSS monitoring plugin that fires event when a given CSS property changes.

I've found it very useful to have a closeable plug-in that hide the content of an HTML element providing a visual close image cue. Almost every UI I build these days requires either closing pop up windows or even more commonly requires that items are removed and visually hidden which usually implies 'close' behavior. In addition to removing a bunch of HTML markup, having a plug-in is also quite useful for server controls especially if multiple behaviors (plug-ins) need to be applied.

ASP.NET natively supports script embedding only into the body of the HTML document which is limited in many ways if you need more control over how scripts load under program control. In this post I'll show one of my components that allows embedding scripts and script references in the header of the document as well as many useful script embedding features for ASP.NET.

The new ClientIDMode in ASP.NET 4.0 is one of my most anticipated features to reduce the naming clutter that ASP.NET naming container naming has traditionally introduced into page. In this post I describe the ClientIDMode behavior and the various ways of how you can control ClientID generation with ASP.NET 4.0

When I installed Visual Studio 2010 a couple of days ago I was really disappointed to see that Intellisense failed to work completely in the new install. No workey in .js files, or ASPX pages inside of script blocks. After some back and forth with folks on the ASPInsiders list and the product teams it looks like there is an issue somewhere with the default settings that get set when Visual Studio...

This post revisits the WCF/ASMX ServiceProxy that can be used to make native jQuery calls to ASMX and WCF AJAX services. The component is self contained and provides JSON conversions including dates, as well as a simple class interface for simple one line service calls and consistent error trapping. This is an update that handles native JSON parsers. Includes examples and a detailed walk through on how it works.

The jQuery UI datepicker is a nice and easy to use datepicker control but if you're using it with other components that use absolute positioning you might run into issues with z-Index precendence. Here's a discussion of the problem and a couple of easy solutions around it.

Reading and writing query string values is often useful in Javascript code especially when dealing with client side initiatiated paging, sorting and ordering operations. If you need to modify the query string from the client before submitting the page it's nice to have a couple of small routines to do this easily. This short post demonstrates the setUrlEncodedKey and getUrlEncodedKey that do just that.

Inline editing content is a feature that's novel and highly useful at the same time. I've been using it in a number of admin interfaces to provide very easy and quick text updates to existing content. There are a number of ways to accomplish this but in this post I'll discuss a contentEditable jQuery plugin that makes any content inline editable using the DOM's contentEditable attribute that maintains text formatting in the editable text.

The new native JSON support in new and upcoming browsers is going to improve JSON parsing performance. But there are still issues you need to deal with like the age-old JSON issue of date persistance with a JavaScript date literal. In this post I discuss various aspects of the native JSON parsers and how you can have one set of code that deals with either native parsers or the existing JSON2 interface.

Here's an implementation of an HTTP handler that can serve ASP.NET Server resources to JavaScript clients easily. The handler can provide both local and global, normalized server resources to client JavaScript pages so that you can localize resources in one place on the server. Use standard Resx resources or our custom database resource provider.

I ran into an odd behavior/bug with Internet Explorer today that I hadn’t noticed before in relation to global variable assignments. Check out the following code that fails for me in IE 8 both in compatibility and standards mode: $(document).ready(function() { panelNewResource = $("#panelNewResource"); panelRename = $("#panelRename"); panelTranslate =...

Arrays in Javascript are really dynamic and have behaviors that in some cases might be unexpected. In this post I talk about a bug reported in a component to me recently that involves one of these dynamic behaviors and caused me some confusion at first.

Accessing content across HTML frames can be quite useful in some scenarios when operations need to be abstracted and separated from the main content but still provide some feedback back to a calling frame or vice versa. While cross frame access should be minimized as much as possible, when you do need it there are a few easy and effective ways you can communicate across frames with the HTML DOM.

With Microsoft's recent releases of the jQuery Intellisense file plus the hotfix released this week using jQuery in Visual Studio has become a lot easier and more convenient. Here is a little more detail on what you need and how it works.

Client templating in Javascript can be a great tool to reduce the amount of code you have to write to create markup content on the client. There are a number of different ways that templating can be accomplished from a purely manual approach.

I've posted Part 1 in a two part series on jQuery today. Part 1 covers the client side features of jQuery from the basics all the way through creating simple plugins and extending jQuery. This is a long article that discusses a host of the really useful features that jQuery brings to the table for client side Javascript development. Part 2 will then follow up with server side ASP.NET integration.

Ran into a little issue today with jQuery.position() failing when elements are not visible. Apparently when elements are hidden jQuery is unable to retrieve the computed styles necessary to get the positioning information and bombs. Making the element visible first fixes the problem.

I've revisited a jQuery plug-in that can be used to monitor changes in CSS properties and be notified when a specific property changes providing an Observer style callback. This can be a handy feature when building behavior components that attach functionality to other elements and need to keep these behaviors in sync with the original object. This update utilizes a more efficient approach and allows monitoring many properties at once.

When building AJAX applications that send client form content to the server, ViewState and EventValidation fields can get in the way. Using jQuery you can make short work skipping over these fields and send only the raw POST data to the server.

Centering content is a useful client side UI feature especially when working with pop ups or popup windows when displayed for the first time. Here's a little jQuery plug in that handles centering in the window and in other container elements easily.

.NET Framework 3.5 provides a couple of choices for JSON Serialization and Deserialization. Find out how you can use them and also some of the problems that both of these tools impose.

I'll be doing my annual presentation at the Portland Area .NET User Group (PADNUG). The topic this time around is Using jQuery with ASP.NET which is a fun presentation that covers JavaScript and specifically jQuery use with ASP.NET without using ASP.NET Ajax. Here's the presentation abstract: Using jQuery with ASP.NET jQuery is a compact and powerful JavaScript library that is quickly becoming...

By default if you open a new window in Tab based browsers like FireFox 3 or IE 7 new windows pop up in new tabs. In most situations this is the desirable behavior, but sometimes it's in fact required to get a new window to pop up on the desktop and get it activated immediately.

I find myself struggling with effectively managing JavaScript scripts across multiple projects. Between version changes and updates to my own components I spend a lot of time comparing versions and trying to sync up files. There are a number of different ways to load and manage script resources, and in this post I show a few with their pro's and con's, but none of them seem ultimately satisfying. What are you using to manage 'Script File Hell?'

I've updated my slides and samples for last spring's Devconnection's sessions to reflect some of the recent updates in jQuery and jQuery.ui, which now have been updated to release versions. In addition there have been a few bug fixes and better configuration documentation for the samples.

Ran into some odd issues with WCF 3.5 and HTTP JSON services hanging up an ASP.NET application. It appears that there are a couple of problems with null serialization and small date value serialization that are causing this problem.

Status bars are very useful in client applications to display well status information and having a reusable and easily callable and configured status component to display messages is extremely handy. Here's an implementation that uses jQuery plus a bit of CSS to make short work of displaying status content.

jQuery is a small, yet very powerful and extremely addictive JavaScript library, that's rescued me from my JavaScript phobia I've had for many years. Although I've dabbled for years off and on with JavaScript I've not really had any joy with it until I started using jQuery. Here is my take on why this library is such a kick ass tool to have in your Web development toolkit.

Sortable lists are a common thing to work on and jQuery.ui's Sortable plug in makes it super easy to create very nice looking sortable lists that work consistently even in complex layouts.

JavaScript lacks unfortunately built in string formatting functionality. Here is a .formatDate function that provides basic dateformatting for displaying digit based date strings (ie. 10/31/2008 or 2008-10-31 20:22 or 10:24pm etc.).

Peter Bromberg posts a quick note about the IE 8 Cross Domain Request object which allows making cross domain calls from within the browser. If you'll recall traditionally the XmlHttp object now standard in all main stream browsers does not explicitly support cross domain calls, which are blocked for security reasons. What's a real pisser about this though is that there are other ways to make...

This post discusses some updates to the wwScriptVariables class I talked about last week. This class provides an easy way to access server variables in client script, automatically expose ClientIDs as simply ID values and provides a mechanism for client code to send updated values back to the server to consume easily.

Getting Server Variables embedded into a page and using them from JavaScript code can be a pain. Following Jon Galloway's post a few days ago I thought that maybe a more generic solution that doesn't rely on ASP.NET AJAX and is more generic might be useful to make the task easier and apply much broader scope. The result is an easy to use, generic class that generates a JavaScript object from key value pairs created on the server with static values or dynamic control or object properties.

I kept a list of a few major sites that have been bombing for me with JavaScript errors just today in the last few hours since I decided to write this up: Hawaiian Airlines Expedia Amazon's MP3 Download Site Facebook (Email app) Musician's Friend Checkout site Authorize.NET's Admin interface American Express Bill Payment Yahoo - certain news stories of the portal home page And here are a few more...

Here's a jQuery based implementation of an Editable extender that makes any simple text element editable. You can apply it against simple tags or entire tables or grids and make them editable. Callbacks fire when data changes and there are host of useful features like editing anchor text, limited keyboard navigation, visual change indication and more...

.NET 3.5 includes a new DataContractJsonSerializer that makes it real easy for serializing and deserializing .NET objects to and from JSON. This post shows code for simple serialization and deserialization as well as discussion of some of the features and limitations.

One of the things I love about jQuery (and a few other JavaScript libraries) are how selectors can make life very easy when dealing with many objects in the HTML DOM via JavaScript. For example, someone asked a question the other day during training of how to check client side validation in a...

I've been spending some time over the last couple of days working with jQuery and a few helper components. jQuery a week ago or so released version 1.2 and a few days later a new jQuery UI library which looks to be pretty cool for a number of reasons. If you haven't looked at jQuery before I...

A couple of people asked me today about a layout I put together for an application. The layout is bascially a scrollable and grouped repeater that looks a little like a ListView control in WinForms. This sort of layout can be great for longer lists when paging is not really the right choice - a common scenario in AJAX applications actually. Here's a quick walk through on how this layout is put together.

I'm looking at a piece of code that's a custom control that embeds a bit of JavaScript into a page. Part of this JavaScript is generating some static string text directly into the page. I've been running this code for a while now as part of an application I'm working on with a customer. But a...

Here's the JSONP code that uses the code I mentioned in my last post. JSONP is an unofficial protocol that allows making cross domain calls by generating script tags in the current document and expecting a result back to calls a specified callback handler. The client JavaScript code to make a JSONP...

In the last year or so the Ajax lifestyle has become common practice for Web development even in the developer mainstream after a few years where the technology was primarily treated as bleeding edge technology. Today however, Ajax is drifting more and more into the mainstream of Web development...

I'm working on some JavaScript code for my library that does drag and drop. It's working pretty well and I'd been testing most of my code against dragging around Div tags with drag handles and content which works great. However, depending on how even bubbling is set up in certain browsers the...