Rick Strahl's Web Log

WebLog Posts in Category JavaScript

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

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.

14 comments

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

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.

12 comments

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

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:25 am

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.

22 comments

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

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.

21 comments

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

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.

10 comments

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

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.

8 comments

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

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

30 comments

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

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

16 comments

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

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.

29 comments

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

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.

28 comments

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

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.

10 comments

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

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.

9 comments

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

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.

16 comments

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

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.

31 comments

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

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

16 comments

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

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.

8 comments

Accessing Html Document Content in other Frames
January 06, 2009 @ 5:13 pm

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.

12 comments

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

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.

15 comments

Client Templating with jQuery
October 13, 2008 @ 5:32 pm

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.

48 comments

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

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.

26 comments

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

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.

11 comments

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

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.

16 comments

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

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.

19 comments

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

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.

25 comments

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

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

26 comments

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

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

7 comments

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

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.

10 comments

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

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

27 comments

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

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.

2 comments

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

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.

9 comments

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

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.

14 comments

jQuery puts the fun back into Client Scripting
May 10, 2008 @ 3:18 am

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:59 am

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.

56 comments

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

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.

16 comments

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

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

20 comments

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

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

11 comments

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

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.

6 comments

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

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.

24 comments

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

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

29 comments

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

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

4 comments

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

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

3 comments

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

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

7 comments

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

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.

18 comments

jQuery Selectors
October 26, 2007 @ 5:26 pm

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

FireBug debugging Bug in If blocks
October 07, 2007 @ 6:02 pm

Here's an odd JavaScript debugging issue that pops up in FireBug from time to time: Occasionally Firebug incorrectly steps into code conditional code blocks that apparently is not actually executing in the JavaScript parsing; the debugger steps through the code but the code is not actually executed and any of the assignments in the block are never actually made.

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

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

2 comments

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

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.

6 comments

Intellisense in ASP.NET Orcas Beta 1 - what works what doesn't
July 19, 2007 @ 1:58 pm

A quick test to see what JavaScript features show up with Intellisense in the new Orcas Intellisense features. Unfortunately it looks like at least in Orcas Beta 1 a number of common JavaScript scenarios either don't produce proper Intellisense or actually break Intellisense altogether.

8 comments

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

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

48 comments

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

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

33 comments

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

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

20 comments

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

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

3 comments

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

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.

16 comments

FireBug 1.0 Beta rocks
January 09, 2007 @ 1:58 am

FireBug 1.0 beta was released last month and I've been using it for most of my JavaScript debugging in the last few weeks. It's grown up into an excellent tool from its somewhat funky earlier versions and I've almost remove the VS JavaScript debugger from my debug routines except for IE specific debugging.

9 comments

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

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.

24 comments