Contact   •   Articles   •   Products   •   Search

Rick Strahl's Web Log

Wind, waves, code and everything in between...
ASP.NET • C# • HTML5 • JavaScript • AngularJs

WebLog Posts in Category JavaScript


The Rise of JavaScript Frameworks – Part 2: Tomorrow



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.

The Rise of JavaScript Frameworks - Part 1: Today



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.

Angular Select List Value not binding with Static Values



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.

Mixing $http Promises and $q Promises for cached Data



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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?



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



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



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



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



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



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



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



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



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



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



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



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



.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



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



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



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



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



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



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



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.

jQuery.ui Sortable



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!



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



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



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



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



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



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



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



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

jQuery Selectors



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

jQuery and jQuery UI and maintaining a custom Client Library



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



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



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



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



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



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



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



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.


West Wind  © Rick Strahl, West Wind Technologies, 2005 - 2015