Scott On Writing.NET : jQuery

Creating a Currency Masked TextBox with On-the-Fly Currency Formatting

Scott Mitchell — Fri, 24 Jun 2011 23:21:54 GMT

By default, a user can enter any character into a textbox. Masked textboxes help reduce user input error by limiting what characters a user can type into a textbox. Masked textboxes have been a standard user input element in desktop applications for decades, but are less common in web applications for a variety of reasons. However, it’s not terribly difficult to implement masked textboxes. All that’s required is a touch of JavaScript and a sprinkle of jQuery.

In a recent project the client wanted a masked textbox for the textboxes on the page collecting currency information. Moreover, he wanted the user’s input to automatically be displayed as a formatted currency value in the textbox after entering their value. (Check out a live demo of my script…) But first things first, let’s see how to create a currency masked textbox.

Allowing Only Currency-Related Characters In a TextBox

There are a number of existing masked input plugins for jQuery. After trying some out I decided to roll my own JavaScript functions. I intend to come back to these and turn them into jQuery plugins, but for now they’re just JavaScript functions. As you can see in the script below, I created four functions:

numbersOnly – allows just number inputs, whether they are from the letters at the top of the keyboard or from the number pad.
numbersAndCommasOnly – allows number inputs and commas.
decimalsOnly – allows numbers, commas, and periods (either from the main keyboard or the number pad).
currenciesOnly – allows numbers, commas, periods, and the dollar sign.

In addition to the allowed characters discussed above, the functions also permit “special character key codes,” namely Delete, Backspace, left arrow, right arrow, Home, End and Tab. What keycodes are valid are listed in the variables at the top of the script; see Javascript Char Codes for a table listing the keys and their corresponding key codes.

Here is the script of interest:

// JavaScript I wrote to limit what types of input are allowed to be keyed into a textbox 
var allowedSpecialCharKeyCodes = [46,8,37,39,35,36,9];
var numberKeyCodes = [44, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105];
var commaKeyCode = [188];
var decimalKeyCode = [190,110];

function numbersOnly(event) {
    var legalKeyCode =
        (!event.shiftKey && !event.ctrlKey && !event.altKey)
            &&
        (jQuery.inArray(event.keyCode, allowedSpecialCharKeyCodes) >= 0
            ||
        jQuery.inArray(event.keyCode, numberKeyCodes) >= 0);

    if (legalKeyCode === false)
        event.preventDefault();
}

function numbersAndCommasOnly(event) {
    var legalKeyCode =
        (!event.shiftKey && !event.ctrlKey && !event.altKey)
            &&
        (jQuery.inArray(event.keyCode, allowedSpecialCharKeyCodes) >= 0
            ||
        jQuery.inArray(event.keyCode, numberKeyCodes) >= 0
            ||
        jQuery.inArray(event.keyCode, commaKeyCode) >= 0);

    if (legalKeyCode === false)
        event.preventDefault();
}

function decimalsOnly(event) {
    var legalKeyCode =
        (!event.shiftKey && !event.ctrlKey && !event.altKey)
            &&
        (jQuery.inArray(event.keyCode, allowedSpecialCharKeyCodes) >= 0
            ||
        jQuery.inArray(event.keyCode, numberKeyCodes) >= 0
            ||
        jQuery.inArray(event.keyCode, commaKeyCode) >= 0
            ||
        jQuery.inArray(event.keyCode, decimalKeyCode) >= 0);

    if (legalKeyCode === false)
        event.preventDefault();
}

function currenciesOnly(event) {
    var legalKeyCode =
        (!event.shiftKey && !event.ctrlKey && !event.altKey)
            &&
        (jQuery.inArray(event.keyCode, allowedSpecialCharKeyCodes) >= 0
            ||
        jQuery.inArray(event.keyCode, numberKeyCodes) >= 0
            ||
        jQuery.inArray(event.keyCode, commaKeyCode) >= 0
            ||
        jQuery.inArray(event.keyCode, decimalKeyCode) >= 0);

    // Allow for $
    if (!legalKeyCode && event.shiftKey && event.keyCode == 52)
        legalKeyCode = true;

    if (legalKeyCode === false)
        event.preventDefault();
}

My script is, admittedly, very US-centric. I have not tested the key codes with a non-English keyboard and for currencies I only allow a dollar sign. For the project I wrote this script for this is (currently) a non-issue since it is used within the corporate firewall and all sales are domestic, but clearly the above script would not work as well for international settings.

Applying the Currency Masking Script to a TextBox on the Page

With the above script in place you can have a textbox on the page mask its input by having the appropriate function called in response to the keydown event. The following jQuery syntax wires up this logic to all single-line textboxes that have the CSS class currenciesOnly.

$(document).ready(function () {
    $("input[type=text].currenciesOnly").live('keydown', currenciesOnly);
});

That’s it!

Formatting the Just-Entered Currency

Another requirement my client had was to format the just-entered number as a currency. That is, to change the user’s input – say, 45000 – to a formatted value like $45,000.00 immediately after their tabbed out of the textbox. To accomplish this I used Ben Dewey’s jQuery Format Currency Plugin, which you can see a demo of at http://www.bendewey.com/code/formatcurrency/demo/. This plugin adds a formatCurrency function that you can call on a set of elements returned by a jQuery selector.

To use this plugin I updated the $(document).ready event handler shown above to also call the formatCurrency function on blur:

$(document).ready(function () {
    $("input[type=text].currenciesOnly").live('keydown', currenciesOnly)
                        .live('blur', 
                                 function () { 
                                     $(this).formatCurrency(); 
                                 }
                              );
});

In short, whenever a textbox with a CSS class of currenciesOnly is blurred, the just-blurred textbox’s inputs are formatted as a currency thanks to the formatCurrency function.

And that’s all there is to it, folks.

To see a live demo of the above code, check out this jsfiddle script: http://jsfiddle.net/CBDea/1/

Happy Programming!

Select a textbox’s text on focus using jQuery

Scott Mitchell — Tue, 01 Feb 2011 00:23:20 GMT

A fellow ASP.NET developer asked me today how he could have the text in a TextBox control automatically selected whenever the TextBox received focus.

In short, whenever any textbox on the page receives focus you want to call its select() function. (The JavaScript select() function is the function that actually selects the textbox’s text, if any.) Implementing this functionality requires just one line of JavaScript code, thanks to jQuery:

$("input[type=text]").focus(function() { $(this).select(); });

In English, the above line of code says, “For any <input> element with a type=”text” attribute, whenever it is focused call it’s select() function.” If you only wanted certain textboxes on the page to auto-select their text on focus you’d update the selector syntax accordingly. For example, the following modification only auto-selects the text for those textboxes that use a CSS class named autoselect:

$("input[type=text].autoselect").focus(function() { $(this).select(); });

That’s all there is to it! You can view the complete script and try a working demo at http://jsfiddle.net/ScottOnWriting/Kq7A4/2/

One final comment: if one or more of the textboxes you want to auto-select exist within an UpdatePanel control then consider using jQuery’s live() function. The live() function maintains the event bindings even when the HTML is regenerated due to a partial page postback; for more information, see my article – Rebinding Client-Side Events After a Partial Page Postback. For more information on jQuery, see Using jQuery with ASP.NET.

EDIT [2011-03-29]: To get this to work in Safari / Chrome you will need to add a mouseup event handler and disable the default event, as the onmouseup event is causing the textbox to be unselected. For more details, see this Stackoverflow post: Selecting text on focus using jQuery not working in Safari and Chrome.

$("input[type=text].autoselect").focus(
    function() { 
         $(this).select(); 
    }
 )
 .mouseup(
    function(e) {
        e.preventDefault();
    }
 );

jQuery Usage Among Top Sites

Scott Mitchell — Wed, 05 Jan 2011 21:11:31 GMT

If you use jQuery on your website two things to consider are:

What version of jQuery to use, and
How should the jQuery library be referenced from your website

Concerning the first question… Ideally everyone would use the latest and greatest version of jQuery. With each new version, the guys and gals building jQuery fix bugs, add new and useful features, and improve the library’s performance. But with any updated product there are potentially breaking changes with each new release, so upgrading carries with it some friction in the form of regression testing your script (and any plug-ins you are using). So then the question really becomes, when does the benefits of the new version outweigh the cost of upgrading – and that is a question you’ll have to answer for yourself.

Concerning the second question… Rather than hosting the jQuery library locally, public facing websites should use a Content Delivery Network (CDN). In his blog post, 3 reasons why you should let Google host jQuery for you, Dave Ward provides an excellent summary of what a CDN is and why you should use one:

A CDN — short for Content Delivery Network — distributes your static content across servers in various, diverse physical locations. When a user’s browser resolves the URL for these files, their download will automatically target the closest available server in the network. …

Potentially the greatest (yet least mentioned) benefit of using … a CDN is that your users may not need to download jQuery at all.

No matter how aggressive your caching, if you’re hosting jQuery locally then your users must download it at least once. A user may very well have dozens of identical copies of jQuery-1.3.2.min.js in their browser’s cache, but those duplicate files will be ignored when they visit your site for the first time.

On the other hand, when a browser sees multiple subsequent requests for the same … hosted version of jQuery, it understands that these requests are for the same file. … This means that even if someone visits hundreds of sites using the same hosted version of jQuery, they will only have to download it once.

(As an aside, a common concern I hear from clients when I suggest using a CDN is the fear that if the CDN goes offline then their site will break. The good news is that you can use a CDN as your primary source for jQuery and provide a local, fall-back version should the CDN be down. This Stackoverflow question - Best way to use Google's hosted jQuery, but fall back to my hosted library on Google fail – shows a couple of ways to accomplish this.)

Dave Ward’s jQuery CDN Survey

In September 2010, Dave Ward ran an interesting experiment – he wrote some software that crawled the 200,000 most popular websites (as reported by Alexa) and examined how they referenced the jQuery library (if at all) and to answer questions like:

Did they use a CDN?
If so, which CDN?
And so on.

In 6,953 reasons why I still let Google host jQuery for me Dave shares his results, which I’ve summarized here:

Only one top 1,000 ranked Alexa site uses the Microsoft jQuery CDN (Microsoft.com)
47 of the top 1,000 ranked Alexa sites use the Google CDN
6,953 of the top 200,000 sites use the Google CDN

The lesson to take away from Dave’s study is that you should use the Google CDN to host the jQuery library because using that CDN gives you the greatest likelihood that your visitors already have that version of the jQuery in their browser cache.

Repeating Dave’s Study

I decided to repeat Dave’s study so that I could see what interesting unreported information lie in the data. So I whipped up my own application to crawl the 13,247 top rated Alexa sites using the Html Agility Pack to grab all <script> elements with an src attribute, saving the src path if it contained the substring “jquery”. Before showing you my data, let me repeat the same considerations/warnings Dave noted with regard to the accuracy of his survey:

I’ll be the first to admit that my approach is fraught with inaccuracies:

Alexa – Alexa itself isn’t a great ranking mechanism. It depends on toolbar-reported data and individual rankings must be taken with a grain of salt. However, I believe that aggregate trends across its top 200,000 sites represents a useful high-level view.

HTTP errors – About 10% of the URLs I requested were unresolvable, unreachable, or otherwise refused my connection. A big part of that is due to Alexa basing its rankings on domains, not specific hosts. Even if a site only responds to www.domain.com, Alexa lists it as domain.com and my request to domain.com went unanswered.

jsapi – Sites using Google’s jsapi loader and google.load() weren’t counted in my tally, even though they do eventually reference the same googleapis.com URL. Both script loading approaches do count toward the same critical mass of caching, but my crawler’s regex doesn’t catch google.load().

Internal usage – It’s not uncommon for sites to pare their landing pages down to the absolute bare minimum, only introducing more superfluous JavaScript references on inner pages that require them. Since I only analyzed root documents, I undercounted any sites taking that approach and using the Google CDN to host jQuery on those inner pages.

That’s a very thorough way of saying, These results are not definitive, but are meant to give a general overview or understanding of the jQuery and CDN usage landscape.

I leave you with what I found to be some interesting statistics…

Resurrecting the Microsoft CDN Bit By Bit

For die-hard supporters of the Microsoft CDN, you’ll be happy to know that there is now more than one top 1,000 ranked site that uses the CDN! In addition to Microsoft.com (rank 24), SparkStudios.com (rank 359) and XBox.com (rank 650) now also use the Microsoft CDN. However, none of these three sites (nor www.asp.net – rank 1,226) use the suggested CDN URL:

The CDN used to use the microsoft.com domain name and has been changed to use the aspnetcdn.com domain name. This change was made to increase performance because when a browser referenced the microsoft.com domain it would send any cookies from that domain across the wire with each request. By renaming to a domain name other than microsoft.com performance can be increased by as much to 25%. Note ajax.microsoft.com will continue to function but ajax.aspnetcdn.com is recommended.

Only two sites in my survey actually use the ajax.aspnetcdn.com - wwwwwwwwwww.net (rank 7,542) and mmajunkie.com (rank 8,057). A total of 20 websites in my survey use ajax.microsoft.com.

The Ten Most Popular Websites That Host jQuery at Google’s CDN

Here are the ten most popular sites that use jQuery hosted at the Google CDN, along with which version of jQuery they use:

Alexa Rank	Domain	jQuery Version
10	twitter.com	1.3.0
98	fileserve.com	1.3.2
111	taringa.net	1.4.2
117	twitpic.com	1.4.2
123	xtendmedia.com	1.4.1
145	stumbleupon.com	1.4.2
174	guardian.co.uk	1.4.2
175	stackoverflow.com	1.4.2
187	imgur.com	1.4.1
204	reference.com	1.4.2

jQuery Version Popularity

The following graph shows the popularity of different versions of jQuery. The bar height represents the total number of sites in my survey that use the particular jQuery version, whereas the red portion indicates the number that host jQuery on the Google CDN.

Note that my method for determining the jQuery version was by examining the URL itself and did not actually search for the version in the actual jQuery file. Google’s CDN uses URLs that embed the version number. Microsoft’s CDN embeds the version number in the file name. For those that hosted jQuery locally (or with some other CDN), I searched both the URL and file name for a version string. The vast majority of sites that self-host jQuery did not include any version identification in the URL or filename (e.g., the file was hosted at a path like /scripts/jquery.min.js) and therefore aren’t represented in this graph. However, I think the pattern here can be extrapolated to those site’s where the version number isn’t part of the URL/file name. Namely, version 1.3.2 and 1.4.2 are the most used.

For the record, there are only two sites in my survey that use version 1.3.0 – Twitter.com (rank 10) and MagicBricks.com (rank 4,324).

jQuery Usage in Aggregate

Of the 13,247 sites surveyed, more than 35% of the sites (4,689) use jQuery…

Of these 4,689 sites…

Only 18% of these sites use the Google or Microsoft CDNs…

22 use the Microsoft CDN
826 use the Google CDN

Resetting Form Field Values in an ASP.NET WebForm

Scott Mitchell — Wed, 22 Dec 2010 23:14:13 GMT

A recent question on Stackoverflow.com asked if there was a general method to clear a form in ASP.NET. The person asking the question had a form with many TextBox and DropDownList controls and wanted some way to be able to “reset” all of those values; specifically, the TextBoxes would be cleared out and the DropDownLists would have their first item selected.

At first blush, this seems like a job for the reset button. HTML has long supported the ability to reset a form by clicking a reset button, which is a button of type reset.

<input type="reset" value="Reset Form!" />

The reset button’s functionality can also be invoked from JavaScript by calling the form object’s reset function. The following snippet of script checks to see if there is at least one form in the document and, if so, calls its reset function:

if (document.forms && document.forms[0])
    document.forms[0].reset();

The Problem with Reset…

However, there is a potential issue when resetting form values in an ASP.NET WebForms application using this approach. The issue arises because the reset button (or reset function) does not clear out textboxes and return drop-down lists to their first value, but instead returns the forms fields to their initial values. That is, if you have a page with a textbox whose markup contains a value attribute, like:

<input type="text" value="Hello, World!" ... />

And then a user changes the textbox’s text to “Goodbye!” and then clicks the reset button, the textbox does not go blank – rather, it reverts to “Hello, World!” In an ASP.NET WebForm application anytime there is a postback on the page – such as if there is a DropDownList whose AutoPostBack property is set to True – the page’s markup is re-rendered and the text values and DropDownList selections made by the user are remembered because the re-rendered markup includes the user-entered values. Long story short, if you use the reset button approach described above and have a form where there are postbacks going on, if a user enters values into textboxes (or drop-downs), then does a postback, then clicks the reset button, the form fields will be reset to their values immediately after the postback and not to empty textboxes.

jQuery to the Rescue!

The good news is that with just a couple of lines of jQuery code we can implement the reset functionality we desire, regardless of postbacks. The following two lines of script set the value of all textboxes on the page to an empty string and set the selectedIndex of all drop-down lists on the page to be 0, which selects the first item:

$("input[type=text]").val("");
$("select").attr('selectedIndex', 0);

That’s all there is to it! You could tinker with the selector syntax to limit the affected textboxes and drop-downs to those in a specific <div> or form or whatnot; likewise, you could add additional lines of code if you need to reset checkboxes, radio buttons, or other input fields.

A Server-Side Approach…

If the client-side approach doesn’t cut it for you, you can opt to reset form fields using server-side logic. You could, of course, set the Text property of each TextBox control to an empty string and clear the selections of all DropDownLists, but a more general approach is possible using recursion. Each ASP.NET control has a Controls property that contains its children controls. Put together, the controls in an ASP.NET page form a control hierarchy. We can recurse through this control hierarchy, examining each control and modifying any TextBoxes and DropDownLists we come across.

The following code snippet illustrates such a recursive method, ClearInputs. Note that ClearInputs is passed in a ControlCollection object. This collection is enumerated and checked for TextBoxes and DropDownLists. If a TextBox is found, its Text property is set to string.Empty; if a DropDownList is found its ClearSelection method is invoked. Finally, the ClearInputs method is called again and passed the current control’s Controls collection for it to be examined.

void ClearInputs(ControlCollection ctrls)
{
    foreach (Control ctrl in ctrls)
    {
        if (ctrl is TextBox)
            ((TextBox)ctrl).Text = string.Empty;
        else if (ctrl is DropDownList)
            ((DropDownList)ctrl).ClearSelection();

        ClearInputs(ctrl.Controls);
    }
}

To reset all TextBox and DropDownList values you’d call this method like so:

ClearInputs(Page.Controls);

To reset the TextBoxes and DropDownLists in a particular control (such as a Panel), you’d call ClearInputs passing in that control’s Controls collection.

Happy Programming!

Checking All CheckBoxes in a GridView Using jQuery

Scott Mitchell — Fri, 03 Dec 2010 23:41:59 GMT

How do I love thee, jQuery? Let me count the ways.

In May 2006 I wrote an article on 4GuysFromRolla.com titled Checking All CheckBoxes in a GridView Using Client-Side Script and a Check All CheckBox, in which I showed how to add a column of checkboxes to a GridView along with a checkbox in that column’s header that enabled the user to check/uncheck all checkboxes in one fell swoop. This check/uncheck all functionality was accomplished using JavaScript.

While the JavaScript presented in the article worked then (and still works today, of course), it is a less than ideal approach for a couple of reasons.

First, each checkbox in the grid is programmatically assigned a client-side onclick event handler in the GridView’s DataBound event handler that calls a function that determines whether to check or uncheck the checkbox in the head – having a client-side event handler defined directly in an HTML element violates the design goal of unobstrusive JavaScript.
Second, because programmatically assigned client-side attributes are not remembered across postbacks and because these client-side attributes are only assigned when data is bound to the grid, the script is lost when there is a postback that doesn’t cause the grid to have its data re-bound to it. Long story short, the check/uncheck all functionality stops working after such postbacks. I provide a workaround for this, but it’s extra steps, extra script, and another thing that you have to remember to do.
Third, the solution entails quite a bit of script, much more than is necessary using modern JavaScript libraries.

When I authored the article jQuery had not yet been released. Fortunately, today we have jQuery (and other JavaScript libraries) at our fingertips. jQuery is a free, open-source JavaScript library created by John Resig. In a nutshell, jQuery allows us to accomplish common client-side tasks with terse, readable script. With jQuery, I can rewrite the entire GridView check/uncheck all functionality with zero lines of server-side code and a scant 25 or so lines of JavaScript.

To demonstrate jQuery’s power, consider a GridView with the following markup:

<asp:GridView ID="gvProducts" runat="server" ...>
    <Columns>
        <asp:TemplateField>
            <HeaderTemplate>
                <asp:CheckBox runat="server" ID="chkAll" />
            </HeaderTemplate>
            <ItemTemplate>
                <asp:CheckBox runat="server" ID="chkSelected" />
            </ItemTemplate>
        </asp:TemplateField> 
        ...
    </Columns>
</asp:GridView>

Note the TemplateField – this is where the two CheckBox controls live. The CheckBox control in the HeaderTemplate (chkAll) is the check/uncheck all checkbox, while the CheckBox control in the ItemTemplate (chkSelected) is the checkbox that appears in each of the grid’s data rows.

Now, I need script that does the following:

When one of the chkSelected checkboxes is checked or unchecked, I need to determine whether the all option needs to be checked or unchecked. In the case where all chkSelected checkboxes are checked, I want to check chkAll. Likewise, in the case when any chkSelected checkbox is unchecked, I want to uncheck chkAll.
When chkAll is checked or unchecked, I need to check or uncheck all chkSelected checkboxes.

To address the first concern I created a function named CheckUncheckAllCheckBoxAsNeeded. This function determines the total number of chkSelected checkboxes in the grid and the number of checked chkSelected checkboxes. If the two numbers match then chkAll is checked, otherwise it’s unchecked.

function CheckUncheckAllCheckBoxAsNeeded() {
    var totalCheckboxes = $("#<%=gvProducts.ClientID%> input[id*='chkSelected']:checkbox").size();
    var checkedCheckboxes = $("#<%=gvProducts.ClientID%> input[id*='chkSelected']:checkbox:checked").size();

    if (totalCheckboxes == checkedCheckboxes) {
        $("#<%=gvProducts.ClientID%> input[id*='chkAll']:checkbox").attr('checked', true);
    }
    else {
        $("#<%=gvProducts.ClientID%> input[id*='chkAll']:checkbox").attr('checked', false);
    }
}

This function is executed whenever one of the chkSelected checkboxes is checked or unchecked. This event wiring is handled in the $(document).ready event handler. Also, the CheckUncheckAllCheckBoxAsNeeded function is called right off the bat in case the grid’s checkboxes are already all checked when the page loads.

$(document).ready(function () {
    $("#<%=gvProducts.ClientID%> input[id*='chkSelected']:checkbox").click(CheckUncheckAllCheckBoxAsNeeded);

    ...

    CheckUncheckAllCheckBoxAsNeeded();
});

Finally, we need to check/uncheck all chkSelected checkboxes when chkAll is checked or unchecked. This logic is also in the $(document).ready event handler (where the ellipsis is positioned in the above snippet).

$("#<%=gvProducts.ClientID%> input[id*='chkAll']:checkbox").click(function () {
    if ($(this).is(':checked'))
        $("#<%=gvProducts.ClientID%> input[id*='chkSelected']:checkbox").attr('checked', true);
    else
        $("#<%=gvProducts.ClientID%> input[id*='chkSelected']:checkbox").attr('checked', false);
});

Pretty neat and a whole heck of a lot simpler than the technique I initially showcased in Checking All CheckBoxes in a GridView Using Client-Side Script and a Check All CheckBox. A more detailed look at this code, along with a downloadable working example, will be on 4Guys within the next couple of weeks.

UPDATE [2010-12-07]: A 4Guys article that provides much more detail and screen shots and a downloadable demo is now available: Checking All Checkboxes in a GridView Using jQuery. Also, special thanks to Elijah Manor, who offered a number of suggestions on how to improve and tighten up my jQuery script.

Happy Programming!

Use jQuery to Open “External” URLs in a New Browser Window

Scott Mitchell — Tue, 14 Sep 2010 23:24:14 GMT

As any web developer knows, the HTML anchor element (<a>), when used in the following form:

<a href="http://www.scottonwriting.net">Click Me!</a>

creates a hyperlink with the text “Click Me!” that, when clicked, whisks the user to the specified href value, in this case my blog, ScottOnWriting.NET. By default, clicking a link opens the specified URL in the user’s existing browser window; however, using the <a> tag’s target attribute it is possible to open the URL in a new window. Adding target=”_blank” to the <a> element will cause the browser to open the link in a new browser window:

<a target="_blank" href="http://www.scottonwriting.net">Click Me!</a>

Some websites like to have all links to “external” web pages open in a new browser window, while having “internal” links open in the same browser window. I use the words external and internal in quotes here because their definitions can depend on the website. Some websites would consider URL that specifies a hostname in the href to be “external” – such as http://www.4guysfromrolla.com/ScottMitchell – while URLs that lack a hostname would be “internal” – such as /sowblog/archive/2010/09.aspx. Other websites might want links to partner websites to still be considered “internal,” even though they include a hostname.

I recently worked on a project where the client wanted this kind of behavior. He had hundreds of existing web pages, each with dozens of links, all of which lacked a target attribute. He didn’t want to have to go through the pages and links, one at a time, adding the target attribute where needed. To help address this problem I wrote a very simple jQuery plugin that can be used to automatically add a target attribute to “external” URLs.

WARNING: I know just enough JavaScript and jQuery to be dangerous, so please don’t presume my plugin is in any way an example of best practices. In fact, if you have any feedback or suggestions on how to improve it, please let me know in the comments!

The plugin defines a single function, UrlTarget([whiteList], [targetName]). The following line of code (which you’d place in $(document).ready, presumably) will add a target=”_blank” attribute to all “external” links. Without specifying a whiteList, all URLs that start with http:// or https:// are considered external, whereas all that don’t are considered internal:

$("a").UrlTarget();

If you want certain hostnames to be considered “internal,” simply specify one or more regular expressions in an array as the whiteList. If the hostname for a hyperlink matches on any of the regular expressions then it is considered “internal” and the target attribute is not added. For instance, to have all URLs that point to 4GuysFromRolla.com or ScottOnWriting.NET considered “internal,” you’d specify the following whiteList value:

$("a").UrlTarget([
    '^(www\.)?4guysfromrolla\.com$',
    '^(www\.)?scottonwriting\.net$'
]);

If you specify a targetName value, the target attribute added to external URLs is assigned that targetName. If this input parameter is omitted then the target value “_blank” is used. Also, note that if a hyperlink with an external URL already has its target attribute set then it is not overwritten by UrlTarget. Likewise, if a hyperlink with an internal URL has a target attribute set, it is not removed.

To use my plugin you’ll need to download the script at http://scottonwriting.net/sowblog/CodeProjectFiles/urlTarget.js, save it to your website, and then reference it via a <script> tag. I’ve got a demo online available at http://scottonwriting.net/sowblog/CodeProjectFiles/JQueryLinksDemo.htm, which has the following JavaScript:

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="urlTarget.js"></script>

<script type="text/javascript">
        $(document).ready(function() {
            $("a").UrlTarget([
                '^(www\.)?4guysfromrolla\.com$',
                '^(www\.)?scottonwriting\.net$'
            ]);
        });
</script>

Note that both the jQuery and urlTarget.js libraries must be referenced.

Happy Programming!

Adding a RESTful Service to My Boggle Solver

Scott Mitchell — Fri, 10 Sep 2010 22:47:20 GMT

This blog post has been deprecated. Please see Updating My Online Boggle Solver Using jQuery Templates and WCF for an updated discussion on the solver service, the data it returns, and how to call it from a web page.

My immediate and extended family enjoys playing games, and one of our favorites is Boggle. Boggle is a word game trademarked by Parker Brothers and Hasbro that involves several players trying to find as many words as they can in a 4x4 grid of letters. At the end of the game, players compare the words they found. During this comparison I've always wondered what words we may have missed. Was there some elusive 10-letter word that no one unearthed? Did we only discover 25 solutions when there were 200 or more?

To answer these questions I created a Boggle solver web application (back in 2008) that prompts a user for the letters in the Boggle board and then recursively explores the board to locate (and display) all available solutions. This Boggle solver is available online - fuzzylogicinc.net/Boggle. My family uses it every time we get together and play Boggle. For more information on how it works and to get your hands on the code, check out my article, Creating an Online Boggle Solver.

Recently, I’ve been working on some projects that have involved creating RESTful web services using WCF. Being Friday, I decided to have a little fun and add a RESTful interface to the Boggle solver. This was actually quite easy to do and took all of 5 minutes.

Creating the Boggle Solver Service

I started by adding a new item to my website of type WCF Service, naming it Solver.svc. This created three files:

Solver.scr
ISolver.cs
Solver.cs

In the contract (ISolver.cs) I added a single method, Solve, that accepts two inputs: a string representing the board and a string indicating the minimum number of letters for a word to be considered a solution. (Boggle rules allow for words of three letters or more, but house rules only count words that are four letters or longer.) I then used the WebGet attribute to indicate that the board and length input parameters would be specified via the querystring fields BoardID and Length, and that the resulting output should be formatted as JSON.

[ServiceContract]
public interface ISolver
{
    [OperationContract]
    [WebGet(UriTemplate = "?BoardID={board}&Length={length}", ResponseFormat=WebMessageFormat.Json)]
    BoggleWordDTO[] Solve(string board, string length);
}

Note that the Solve method returns an array of BoggleWordDTO objects. This is a new class I created to represent the data to transmit from the service. This class has two properties:

Word – a string value that represents a word found in the Boggle board, and
Score – the score for that solution. According to the official rules, three and four letter words are worth 1 point, five letter words are worth 2, six letter words worth 3, seven letter words worth 5, and eight letter words and longer worth 11.

The Solve method implementation (Solver.cs) is pretty straightforward. It starts with a bit of error checking to ensure that the passed in board and letter information is kosher. Next, it creates a BoggleBoard object, specifying the minimum number of letters for a solution and the board contents. Then the BoggleBoard object’s Solve method is invoked, which performs the recursion and computes the set of solutions (as an object of type BoggleWordList). The solutions are then converted into an array of BoggleWordDTO objects, which is then returned to the client.

public BoggleWordDTO[] Solve(string board, string length)
{
    ...

    // Create the BoggleBoard
    BoggleBoard bb = new BoggleBoard(
                        letters,
                        board[0].ToString(), ..., board[15].ToString()
                    );

    // Solve the Boggle board
    var solutions = bb.Solve();

    // Populate and return an array of BoggleWordDTO objects
    return solutions
                .Select(s => new BoggleWordDTO()
                {
                    Word = s.Word,
                        Score = s.Score
                })
                .ToArray();
}

Because the service is configured to return the data using JSON, the results are serialized into a JSON array.

In addition to creating the Solver-related files and writing the code I noted, I also had to add <system.serviceModel> configuration to Web.config to permit HTTP access to the service and to enable ASP.NET compatibility. The reason I had to enable ASP.NET compatibility is because the dictionary used by the solver is a text file stored on disk, and the solver gets the path to that text file using Server.MapPath (namely, HttpContext.Current.Server.MapPath(“…”)). Without ASP.NET compatibility, HttpContext.Current is null when the service attempts to solve and then the call to Server.MapPath blows up. Also, I had to specify the Factory attribute in the <%@ ServiceHost %> directive of the Solver.svc file.

[UPDATE: 2010-09-10] Ben Amada posted a helpful comment pointing me to the existence of the HostingEnvironment.MapPath method, which does the same work as Server.MapPath but doesn’t require an HttpContext object. I updated this code accordingly. I also updated the code that cached the dictionary in memory, replacing the use of HttpContext.Current.Cache with HttpRuntime.Cache, which I probably should have been using all along. The code has been updated. Thanks, Ben!

Using the Boggle Solver Service

To use the service, just point your browser (or your code/script) to: http://fuzzylogicinc.net/Boggle/Solver.svc?BoardID=board&Length=length. The board value should be entered as a string of the characters in the Boggle board, starting from the upper left corner and reading to the right and down. For example, if you had the board:

r e i b
t m f w
i r a e
r h s t

You would use a board value of reibtmfwiraerhst. letter should be a number between 3 and 6, inclusive.

So, to find all solutions to the above board that are four or more letters, you’d visit: http://fuzzylogicinc.net/Boggle/Solver.svc?BoardID=reibtmfwiraerhst&Length=4

Doing so would return the following (abbreviated) JSON:

[{"Score":1,"Word":"amir"},{"Score":2,"Word":"amirs"},{"Score":1,"Word":"awes"},{"Score":1,"Word":"bier"},{"Score":1,"Word":"ears"},{"Score":1,"Word":"east"},...]

The above JSON represents an array of objects, where each object has two properties, Score and Word.

So how can this service be used? Well, with a bit of JavaScript you can call the service from a browser and display the results dynamically. I’ve included a rudimentary example in the download (which you can find at the end of this blog post) that prompts the user to enter the 16 characters for the board and the minimum number of letters. It then uses jQuery’s getJSON function to make a call to the service and get the data back. The JSON array is then enumerated and a series of list items are constructed, showing each solution in a bulleted list.

Here is the web page when you visit it and enter a boggle board and the minimum number of letters (but before you click the “Find All Words!” button.

Clicking the “Find All Words!” button executes the following jQuery script:

$.getJSON(
    "Solver.svc",
    {
        "BoardID": $("#board").val(),
        "Length": $("#length").val()
    },
    function (words) {
        var output = "No solutions exists!";

        if (words.length > 0) {
            output = "<h2>" + words.length + " Solutions!</h2><ul>";

            var score = 0;

            $.each(words, function (index, word) {
                score += word.Score;
                output += "<li>" + word.Word + " (" + word.Score + " points)</li>";
            });

            output += "</ul><p>Total score = " + score + " points!</p>";
        }

        $("#solutions").html(output);
    }
);

Note that the above script calls the Solver.svc service passing in the BoardID and Length querystring parameters. The textbox where the user enters the board has an id of board while the minimum letter drop-down list has an id of length. The function defined in the call is what is executed when the result comes back successfully. Here, the jQuery each function is used to enumerate the array and build up a string of HTML in a variable named output that produces a bulleted list of solutions. The total number of solutions and total number of points is also included in output. Finally, the contents of output are dumped to a <div> on the page with an id of solutions.

Here’s the page after clicking the “Find All Words!” button. Nothing fancy, of course, and not nearly as useful or eye-pleasing as the website’s results page, but it does illustrate one way you can use the Boggle Solver.svc service.

Download the Code!

You can download the complete Boggle solver engine, web application, and WCF RESTful service from http://aspnet.4guysfromrolla.com/code/BoggleSolver.zip.

Happy Programming, and Happy Boggling!

I’m Teaching Two Upcoming Training Classes in San Diego

Scott Mitchell — Thu, 19 Aug 2010 17:45:32 GMT

Once a year (or so) I teach a handful of one-day, four hour classes in San Diego on various ASP.NET topics. I’ve got two such classes lined up for Saturday, September 11:

Get Started with ASP.NET MVC – 8 AM to Noon
Traditionally, ASP.NET websites have been designed using the Web Forms model; ASP.NET MVC is an alternative model that uses the Model-View-Controller pattern. In a nutshell, ASP.NET MVC gives developers much finer control over the markup rendered by their web pages, a greater and clearer separation of concerns, better testability, and cleaner, more SEO-friendly URLs. This four hour class introduces ASP.NET MVC, explores how to build ASP.NET MVC applications, covers key differences between Web Forms and ASP.NET MVC, and highlights the benefits of ASP.NET MVC. During the class, we will build a real-world ASP.NET MVC application from start to finish.
Build Responsive Web Applications with Ajax, jQuery, and ASP.NET – 1 to 5 PM
Ajax-enabled web applications use JavaScript and streamlined client/server communications to offer a highly interactive and responsive user experience. jQuery is a free, popular and powerful JavaScript library that ships with Visual Studio 2010 and greatly simplifies building Ajax-enabled web applications. This four hour class examines key Ajax concepts and techniques and walks through building a real-world Ajax-enabled web application using jQuery and ASP.NET.

Each class is $249 per student, but there is an ongoing early bird special price of $199 (available until August 28th). Students receive electronic access and printed copies of the training materials. Coffee, snacks and lunch are provided. The classes are held at the Sorrento Mesa Center (directions), which is located in Sorrento Valley and has free parking.

If you are interested in signing up or would like detailed course outlines, visit www.fuzzylogicinc.net/InDepth. If you have any questions about the class, material, or logistics, shoot me an email at mitchell@4guysfromrolla.com.

Hope to see you there!

Signup: www.fuzzylogicinc.net/InDepth