jQuery 1.6.2 syntax error? You may be the victim of SEO.

jQuery By . Updated July 7, 2011

A reader contacted me this weekend to inform me that jQuery 1.6.2 had broken all of my old examples of using jQuery with ASP.NET services. Not good! How could such a simple update have caused this?!

I didn’t really expect that updating from jQuery 1.6.1 to 1.6.2 would break anything, much less break everything.

As it turns out, the problem didn’t have anything to do with jQuery 1.6.2 or my own code. However, while investigating, I ended up falling prey to the same treachery that led to the original bug report.

Click here to read the rest of this post »

Save yourself some typing when you call ASP.NET services

ASP.NET, jQuery By . Updated December 28, 2011

Mea culpa: I may owe your fingers an apology.

If you’ve been using my approach for directly calling ASP.NET’s JSON-based services with jQuery, you know that specifying the correct Content-Type on your requests to them is a crucial part of coaxing JSON out of them. However, when I suggested that a Content-Type of application/json; charset=utf-8 was necessary, that was overly specific.

Click here to read the rest of this post »

Using jQuery 1.6 to find an array of an object’s keys

JavaScript, jQuery By . Posted June 8, 2011

With the confusion surrounding jQuery 1.6′s changes to .attr() and the addition of .prop(), one of my favorite new features nearly slipped under the radar. The feature I’m referring to is that $.map() now works against plain JavaScript objects in addition to arrays.

$.map() has always been a useful utility method, somewhat mimicking ECMAScript 5′s native Array.map() method. If you’ve been working with JavaScript long, you’re probably already comfortable with passing anonymous function callbacks around anyway, which makes higher order functions like map an intuitive way to write concise, expressive transformation code.

With jQuery 1.6, now you can use the same approach when working with regular JavaScript objects. There are a variety of uses for this, but I want to focus on one real-world usage in this post: extracting an array of the keys contained within a JavaScript object.

Click here to read the rest of this post »

Use jQuery to extract data from HTML lists and tables

JavaScript, jQuery, UI By . Updated March 31, 2011

A question that I’ve been seeing more frequently these days is how to extract a JavaScript object from an HTML list or table, given no data or information other than the markup. It’s not ideal to work backwards from HTML, but sometimes you just don’t have a lot of choice in the matter.

Whether you’re enhancing legacy elements that have been generated on the server-side or want to parse the output of a third-party DHTML widget, there are a variety of situations where converting HTML to raw data is a legitimate need. You may have seen iterative solutions to this problem before. However, nested looping code gets messy fast, doesn’t feel much like idiomatic jQuery, and certainly isn’t as concise as you’d probably like.

Luckily, one of JavaScript’s lesser-known utility methods and jQuery’s implementation of it can improve the situation quite a bit. In this post, I’m going to show you how to use this method, jQuery’s cross-browser solution, and how to use it to extract data objects from arbitrary HTML lists and tables.

Click here to read the rest of this post »

A VSDoc for jQuery 1.5

JavaScript, jQuery By . Updated February 5, 2011

Using the jQuery 1.5 VSDoc to get Intellisense in Visual Studio

I’ve noticed several people looking for a jQuery 1.5 VSDoc this week. After looking around myself, I didn’t see one anywhere either. So, I updated Damian Edwards’ VsDocBuilder for jQuery 1.5 and generated a new VSDoc.

It doesn’t handle the new jqXHR and Deferred return types quite right, so you won’t get Intellisense for the new chained $.ajax() callbacks. However, it should be better than nothing until a fully functioning version is released.

You can download it here: jQuery-1.5.0-vsdoc.js

Update: Damian has just made a fully functional version of the 1.5 VSDoc available (that was quick): jquery-1.5-vsdoc.js. You should use his instead of mine.

Important: This new VSDoc makes use of <para> tags to display line breaks inside documentation tooltips. To view them properly, you’ll need to be sure that you have the JScript Editor Extensions installed so that Visual Studio understands those new VSDoc tags.

jQuery 1.5′s AJAX rewrite and ASP.NET services: All is well

AJAX, ASP.NET, jQuery By . Posted February 2, 2011

jQuery 1.5′s complete overhaul of the AJAX API has led to several people contacting me recently, understandably nervous about how the rewrite will impact working with ASMX ScriptServices and ASPX page methods. Seeing the default calling syntax change to $.ajax(url, settings) was especially unsettling to many.

I’m happy to report that the short answer is: jQuery 1.5′s new AJAX module has almost no negative impact on any of the techniques you may have read about here. The rewrite maintains very good compatibility for the $.ajax(settings) calling syntax and for now-deprecated features such as dataFilters.

One advanced dataFilter usage appears to be broken, but it’s something that you probably already stopped using with jQuery 1.4. To be clear, I’ll briefly enumerate all of the techniques I’ve re-tested and jQuery 1.5′s impact (or lack thereof) on each.

Click here to read the rest of this post »

Cripple the Google CDN’s caching with a single character

jQuery, Performance By . Updated October 11, 2011

It’s no secret that I’m a proponent of using a shared CDN to host jQuery. As more and more sites take advantage of public CDNs for their jQuery reference, the cross-site caching benefit is becoming almost a given. However, there are a couple ways that even I recommend against using these public CDNs.

With the impending policy change on hotlinking copies of jQuery hosted on jQuery.com, I expect that at least several sites will be migrating their hotlinked script references to one of the public CDNs soon. So, I think this is a good time to address one CDN-related usage mistake that I’ve seen an uptick in lately.

Click here to read the rest of this post »

jQuery Templates, composite rendering, and remote loading

JavaScript, jQuery, UI By . Updated December 4, 2010

In my last post about jQuery Templates, I showed you how to use template composition to build a template out of simple sub-templates. These composite templates are a great way to address the complexity that creeps into real-world UIs, as they inevitably grow and become more intricate. However, one feature missing from my last example was the ability to store those composite templates in external files and load them asynchronously for rendering.

I’ve described how to accomplish that with single templates in the past, using jQuery’s AJAX utilities and a particular usage of tmpl(). Unfortunately, remotely loading a group of composite templates from a single file is not quite as simple, and the technique I’ve described previously will not work.

Not to worry though, it’s still relatively easy.

In this post, I’ll show you how to move a group of composite templates to an external file, how to load and render them with jQuery Templates, and how to take advantage of an expected benefit to improve separation of concerns.

Click here to read the rest of this post »

Composition with jQuery Templates: Why and How

JavaScript, jQuery, UI By . Updated November 11, 2010

I doubt anyone was happier than I was to see that support for composite template rendering was added to jQuery Templates during the interim between the first community proposal and its recent release. If you’re a regular reader, you might remember that I personally lobbied for that functionality back in May, based on how I’ve used jTemplates’ similar #include feature.

Since then, a common question I’ve received amounts to: “Great, but why?”

I think that’s natural, because template composition is one of those things that can seem obscure until you put it to work for the first time. From that point onward, you’ll begin to see the structure of your client-side templates in a different light. Simplifying your templates into smaller logical parts and then combining those parts to create the desired end result is a powerful approach. It’s terrific for making large templates more approachable and maintainable over the lifetime of an application.

In this post, I want to show you an example of a scenario that template composition is well suited to, a couple ways that jQuery Templates’ {{tmpl}} feature can be used to simplify that scenario, and a bonus advantage that the composition approach provides even after the template has been rendered.

Click here to read the rest of this post »

Using external templates with jQuery Templates

JavaScript, jQuery, UI By . Posted October 5, 2010

Now that jQuery Templates is official and definitely will not include remote template loading, I wanted to publish a quick guide on implementing that yourself. As I mentioned previously, there’s a handy interaction between jQuery Templates’ API and jQuery’s AJAX methods that makes this easier than you might expect.

In this post, I’ll show you how to use a plain string as a template, how to asynchronously load an external template file as a string, and how to render it with jQuery Templates once it’s loaded.

Click here to read the rest of this post »