WebLog Posts in Category JavaScript

Mixing $http Promises and $q Promises for cached Data
December 10, 2014 @ 4:35pm

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.

AngularJs and Promises with the $http Service
October 24, 2014 @ 9:25pm

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 jquery-watch Plug-in for watching CSS styles and Attributes
October 20, 2014 @ 3:42am

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.

AngularJs ng-cloak Problems on large Pages
June 02, 2014 @ 4:38pm

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.

Filtering List Data with a jQuery-searchFilter Plugin
May 12, 2014 @ 12:48pm

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.

Using CSS Transitions to SlideUp and SlideDown
February 22, 2014 @ 2:48am

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.

Book Review: Async JavaScript
January 09, 2014 @ 4:58pm

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 JSON Date Parsing and real Dates
January 06, 2014 @ 10:52am

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.

Routing to a Controller with no View in Angular
October 15, 2013 @ 1:56pm

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.

Prefilling an SMS on Mobile Devices with the sms: Uri Scheme
October 09, 2013 @ 10:04am

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.

JavaScript Arrays, References and Databinding in Angular
September 16, 2013 @ 2:52pm

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.

Using HTML 5 SessionState to save rendered Page Content
July 01, 2013 @ 3:46pm

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.

A first look at SignalR
May 22, 2013 @ 5:23am

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.

Using plUpload to upload Files with ASP.NET
March 12, 2013 @ 3:42am

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.

.NET HTML Sanitation for rich HTML Input
July 19, 2012 @ 2:24am

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.

A Key Code Checker for DOM Keyboard Events
December 08, 2011 @ 3:47am

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.

Restricting Input in HTML Textboxes to Numeric Values
April 22, 2011 @ 4:25am

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.

A jQuery Plug-in to monitor Html Element CSS Changes
February 22, 2011 @ 1:17am

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.

A Closable jQuery Plug-in
November 29, 2010 @ 12:30pm

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.

Rendering ASP.NET Script References into the Html Header
January 02, 2010 @ 3:26am

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.

ClientIDMode in ASP.NET 4.0
November 07, 2009 @ 3:58pm

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

No JavaScript IntelliSense in VS 2010 Beta 2? Reset your Settings
October 22, 2009 @ 2:52pm

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...

Making jQuery calls to WCF/ASMX with a ServiceProxy Client
September 15, 2009 @ 8:31pm

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.

jQuery UI Datepicker and z-Index
September 12, 2009 @ 8:12pm

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.

Get and Set Querystring Values in JavaScript
September 07, 2009 @ 2:12am

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.

Creating a quick and dirty jQuery contentEditable Plugin
May 25, 2009 @ 11:20pm

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.

Native JSON Parsing: What does it mean?
April 19, 2009 @ 8:20pm

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.

A Localization Handler to serve ASP.NET Resources to JavaScript
April 02, 2009 @ 1:08pm

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.

Internet Explorer Global Variable Blow ups
March 22, 2009 @ 4:03am

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 =...

Javascript Array Fun
January 26, 2009 @ 4:22pm

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 Html Document Content in other Frames
January 06, 2009 @ 5:13pm

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.

jQuery Intellisense Updates from Microsoft
November 09, 2008 @ 4:13pm

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 with jQuery
October 13, 2008 @ 5:32pm

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.

Introduction to jQuery Article posted
September 28, 2008 @ 2:04pm

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.

jQuery.position() on Invisible Elements fails
September 20, 2008 @ 4:02am

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.

jQuery CSS Property Monitoring Plug-in updated
September 12, 2008 @ 3:30am

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.

jQuery Form Serialization without ASP.NET ViewState
September 04, 2008 @ 2:31am

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.

A simple jQuery Client Centering Plugin
August 21, 2008 @ 9:30am

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.

JSON Serializers in .NET - not there yet
August 04, 2008 @ 4:00pm

.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.

jQuery with ASP.NET Presentation at Portland .NET User Group on Tuesday
August 01, 2008 @ 8:42am

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...

Forcing Client Windows to pop up as Windows in Tabbed Browsers
July 22, 2008 @ 1:05pm

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.

Inclusion of JavaScript Files
July 07, 2008 @ 4:05am

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?'

Updated jQuery and WCF 3.5 JSON Samples posted
June 25, 2008 @ 5:58am

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.

Crashing WCF 3.5 JSON Services with DateTime.MinValue
June 23, 2008 @ 5:53am

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.

A jQuery Client Status Bar
June 13, 2008 @ 2:29am

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 puts the fun back into Client Scripting
May 10, 2008 @ 3:18am

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.

1 comment
jQuery.ui Sortable
April 28, 2008 @ 12:59am

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.

Visual Studio's JavaScript Editor Really needs a Function/Class Viewer!
April 25, 2008 @ 1:17pm

One thing I really would like to see in Visual Studio's JavaScript support is the ability to see all the functions/classes defined in the code. Right now there's no mechanism for navigating code in the JavaScript editor and while that's not a problem for small bits of code, for more complex code like libraries or truly client driven Web applications the VS editor becomes problematic with its CTRL-F or scroll wheel based search navigation.

A simple formatDate function for JavaScript
March 18, 2008 @ 5:12am

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.).

Cross Domain Support in IE 8 and Silverlight/Flash Applications
March 16, 2008 @ 1:19am

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...

Embedding ASP.NET Server Variables in Client JavaScript, Part 2
February 21, 2008 @ 3:47am

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.

Embedding ASP.NET Server Variables in Client JavaScript
February 12, 2008 @ 2:23am

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.

JavaScript Errors in the Mainstream
February 08, 2008 @ 4:38am

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...

Creating an In-Place Editing Component for Table Editing with jQuery
January 28, 2008 @ 5:02am

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...

ClientScriptProxy and JavaScript Linking In Headers
December 27, 2007 @ 7:46pm

.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.

Charts for HTML
December 07, 2007 @ 5:03pm

It must be my lucky day. Earlier today I decided I needed to replace some old graphics code based on a now defunct tool. As I was browsing through my feeds today I noticed two cool things that relate: Google Chart API Basic charting, but dirt simple - the way it should be. I replaced my three...

JavaScript Minifier Utility Posted
November 26, 2007 @ 1:14pm

I've posted a quick and dirty JavaScript minifier utility based on Douglas Crockford's Java Script Minifier that minifies JavaScript by stripping comments and whitespace. The utilty provides both GUI and Command line operation with a few options for string or file conversion and batch operation. Provided with source code.

jQuery Selectors
October 26, 2007 @ 5:26pm

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...

1 comment
jQuery and jQuery UI and maintaining a custom Client Library
September 22, 2007 @ 7:15pm

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...

Creating a scrollable and grouped Repeater Layout
August 23, 2007 @ 1:49am

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.

Embedding JavaScript Strings from an ASP.NET Page
July 14, 2007 @ 3:06am

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...

JSONP for cross-site Callbacks
July 04, 2007 @ 1:10pm

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...

The JavaScript Dilemma
June 03, 2007 @ 3:00am

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...

IE DOM's dragstart Event interferes with 'manual' Mouse Movements
May 15, 2007 @ 3:41pm

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...

IE Opacity and DIV tags with no width
January 19, 2007 @ 4:08am

More fun inconsistencies: IE's opacity supports sucks anyway but apparently even the alpha filter doesn't work on DIV tags that don't have a width specified.

HREF links and javascript: Navigation
January 01, 2007 @ 7:23pm

Calling JavaScript from HREF anchors can be a little tricky if you not calling external functions. There are a few things you have to watch out for with inline code and a few workarounds for letting you embed controls that have the href and javascript all in one place.