Visual Studio Code Snippet: jQuery OnReady handler

Web application development nowadays almost mandates you to use jQuery, but unfortunately for ASP.NET and Visual Studio developers, ready-made jQuery code snippets are non-existing in the current 2010 retail version (third-party templates can be found for example here).

For instance, it's pretty common to write a jQuery handler that executes JavaScript code whenever the current page has finished loading. Writing this manually doesn't take long, but if you do it often enough, the task quickly becomes boring. Code snippets to the rescue!

To get started, create a new code snippet file (these are XML files with the .snippet file extension) and place this file in your Visual Studio's default HTML snippet path at "C:\Program Files (x86)\Microsoft Visual Studio 10.0\Web\Snippets\HTML\1033\HTML".

Note that if you wish to enable the snippet for ASP.NET applications, the path is slightly different, but can be found from the same first HTML subfolder. For ASP.NET MVC 2 applications, the path is "C:\Program Files (x86)\Microsoft ASP.NET\ASP.NET MVC 2\Visual Studio 2010\Snippets\HTML\1033\ASP.NET MVC 2".

Here is my implementation of the snippet:

<CodeSnippet Format="1.0.0">
  <Header>
    <Title>jQuery OnReady Handler</Title>
    <Author>Jani Järvinen</Author>
    <Shortcut>jqueryonready</Shortcut>
    <Description>Markup snippet for a client-side jQuery
    script that executed on document ready</Description>
  </Header>
  <FileExtensions>
    aspx;master;ascx
  </FileExtensions>
  <Snippet>
    <Code Language="html">
      <![CDATA[<script type="text/javascript">
     $$(document).ready(function(){
       $$("#myelementid").click(function(event){
         alert("Hello World!");
       });
     });
   </script>]]>
    </Code>
  </Snippet>
</CodeSnippet>

This will insert into the code file the following:

<script type="text/javascript">
  $(document).ready(function () {
    $("#myelementid").click(function (event) {
      alert("Hello World!");
    });
  });
</script>

If you don't want to type this all in, you can download a ready-made snippet file here.

Note: in jQuery, there's a shorthand for writing "$(document).ready(function () {...". You could simply say, "$(function() {..." as documented in the jQuery documentation. In my opinion, this is a matter of preference: if I were to write jQuery by hand, I'd rather use the shorter version. However, understanding this shorter notation requires knowledge about jQuery, so I find the longer version more self-explanatory.

Another note regarding Visual Studio: notice how the $ signs in the .snippet file must be escaped by doubling them: $$. Remember that you can use Visual Studio's Tools/Code Snippet Manager menu command to manager and import your snippets.

Since Windows 7's UAC (User Account Control) is by default on, you might not be able to write to the Program Files folder by default, and the Code Snippet Manager can report permission errors. In this case, do the file copying through Explorer, or run Visual Studio as an administrator.

Happy hacking!