jQuery’s $(document).ready() event is something that you probably learned about in your earliest exposure to jQuery and then rarely thought about again. The way it abstracts away DOM timing issues is like a warm security blanket for code running in a variety of cold, harsh browser windows.

Between that comforting insurance and the fact that deferring everything until $(document).ready() will never break your code, it’s understandable not to give much thought to its necessity. Wrapping $(document).ready() around initialization code becomes more habit than conscious decision.

However, what if $(document).ready() is slowing you down? In this post, I’m going show you specific instances where postponing startup code until the document’s ready event slows perceived page load time, could leave your UI needlessly unresponsive, and even causes initialization code to run slower than necessary.

Click here to read the rest of this post »

I spent some quality time with Dave Reed’s latest revision of John Resig’s jQuery.tmpl plugin recently, migrating a small project from jTemplates. Since both the jQuery team and Microsoft team have requested feedback on jQuery.tmpl, I decided to write about my experience using it (as I am wont to do with these templating proposals).

Overall, jQuery.tmpl is a great step in the right direction. It’s small, it’s simple, and it’s fast. Overloading append() to allow the append(Template, Data) syntax is phenomenal. That approach feels more like idiomatic jQuery than anything else I’ve used, including jTemplates.

However, if this template rendering engine is going to succeed broadly, I feel there’s one important feature still missing. Additionally, there are a couple ancillary features that are present in the current proposal, but should be protected.

Click here to read the rest of this post »

In my most recent post, I demonstrated a workaround to allow using the jQuery validation plugin with WebForms pages. The basic idea was to trigger validation only on submissions that occurred within a single logical form, instead of catching submissions anywhere on WebForms’ all-encompassing physical form.

This approach worked fine for a single logical form, but wasn’t robust enough when handling validation for multiple logical forms on a single page. Additionally, it did not properly handle the enter key, allowing users to (perhaps accidentally) slip past validation if they simply hit the enter key within a TextBox.

In this post, we will continue by refining the solution from last time. So, if you haven’t read the previous post, familiarize yourself with it first. Specifically, this post will cover how to implement an analogue of WebForms’ ValidationGroup, use that to independently validate multiple form regions, handle the enter key, and refactor the final solution to minimize duplicated code.

Click here to read the rest of this post »

You’ve probably noticed that Jörn Zaefferer’s jQuery validation plugin has been gaining momentum in the ASP.NET community lately. Between Microsoft’s implied endorsement via ASP.NET MVC 2.0 integration and the plugin’s recent inclusion on the Microsoft AJAX CDN, adoption is only increasing. Unfortunately for those who don’t or can’t use ASP.NET MVC yet, using the validation plugin within WebForms applications can be tricky.

Because the WebForms Postback model requires that the entire page be contained within a single form element, form submissions that shouldn’t trigger validation are likely. ASP.NET’s built-in validation controls solve this with ValidationGroups and the CausesValidation property, but that doesn’t help if you’d prefer to use the jQuery validation plugin.

However, there are a couple relatively easy workarounds that make it possible to use the jQuery validation plugin on WebForms pages, without re-architecting the page or its forms. In this post, I’ll show you why the WebForms page structure is a problem, how to make jQuery validation work with it, and an example of implementing those workarounds.

Note: I want to preface this by saying that you should never rely entirely on client-side validation. The jQuery validation plugin can be a great replacement for the client-side part of the ASP.NET Validators, but it is not a complete replacement on its own. Use responsibly!

Click here to read the rest of this post »

By now, you probably already know that Google hosts jQuery on its AJAX APIs CDN, free of charge. As I’ve discussed here in the past, I’m a big fan of using their CDN to achieve decreased latency, increased parallelism, and better caching.

If you’ve explored the AJAX APIs documentation a bit, you may know that jQuery UI is also hosted on Google’s CDN. Unfortunately, since jQuery UI plugins depend on a ThemeRoller theme, using a CDN for jQuery UI isn’t as easy as with jQuery itself.

Or, is it?

Click here to read the rest of this post »

Though the version number only inched up 0.0.1 with this release, it brings quite a few new features; most of them in response to your requests. I can’t include every request, but I will continue to improve the control based on your feedback, so keep them coming.

Changes in v4.1.5 include:

• Updated the base Highslide JS library to v4.1.5.
• Updated the embedded CSS to the latest version bundled with Highslide JS. This fixes the issue with the transparent/blank bar during enlargement if a caption is set.
• A few internal improvements that should make it work more reliably in some situations.

Click here to read the rest of this post »

A new version of Highslide JS .NET is available today. Nothing major has changed in the .NET control, but the newer Highslide JS version includes several bug fixes, compatibility improvements, and performance benefits.

To eliminate one common source of confusion, I’ve decided to begin versioning Highslide JS .NET based on the version of Highslide JS embedded within the the control. For example, since this release is v4.1.4, it contains v4.1.4 of Highslide.

Changes in v4.1.4 include:

• Updated embedded Highslide JS script version to 4.1.4. You can see what has changed in that on the Highslide.com changelog page.
• Added ControlBarPosition property to the HighslideManager, which allows you to position the enlargement’s control bar in any corner of the image.
• Added several properties (ControlBarPreviousTitle, ControlBarNextTitle, ControlBarMoveTitle, and ControlBarCloseTitle) to control title attributes of links rendered in the control bar. Useful for localization.

As always, the free download is available on the Highslide JS .NET project page.

Thanks to all of your excellent feedback during the months since the last release of PostBack Ritalin, an improved version is ready for release today. With the addition of “disable all elements”, I believe the control is now feature complete, worthy of a version 1.0 release.

Notable changes in v1.0 include:

• Added disable all elements functionality to MonitoredUpdatePanels.
• Fixed a bug in the WaitImage preloading functionality, that prevented the MonitoredUpdatePanels’ WaitImages from being preloaded.
• Added both debug and release versions of the JavaScript resource. Your site’s compilation mode will determine which script version is embedded.
• Fixed a problem handling postbacks raised by Button controls that have their UseSubmitBehavior property set to false.
• Improved ClientID handling in naming containers.

As always, you can visit the PostBack Ritalin project page to download the latest version, see usage examples, and find documentation.

If you don’t properly handle the inevitable errors in your web applications, you can expect your users to eventually react about like this guy. Since they typically squelch any server-side errors, AJAX service calls are especially problematic. In fact, they rarely even throw a client-side error when they fail.

Even when a client-side error is thrown, most users won’t notice it and the ones who do notice won’t know what the error means or what to do next. In fact, I’ve found that even many developers don’t notice client-side scripting errors that occur while they’re debugging their own applications!

To help you remedy this problem in your own applications, I want to show you one way that I handle AJAX service call errors with jQuery. To do this, we will build an error-prone web service, make an AJAX request to it via jQuery, handle the resulting server-side errors gracefully, and use a jQuery plugin to attractively present those errors.

Click here to read the rest of this post »

A common question that I find myself fielding lately is how to handle the problem of rotating JavaScript based advertisements. As AJAX becomes ubiquitous on ad supported sites, we must take care that decreasing page views don’t also mean proportionally decreasing revenues.

Many find their way to ScriptManager.RegisterStartupScript, use that to re-inject the script during a partial postback, and expect that doing so will refresh the ad. Unfortunately, that doesn’t work when dealing with JavaScript based ads such as Google’s AdSense.

In this post, I’m going to show you why RegisterStartupScript does not solve the problem, the alternative that I suggest, and how to use that method to also defer loading of advertisements until after your content.

Click here to read the rest of this post »