I’ve been using jQuery quite a lot lately in my ColdFusion apps. I’ve been working on a .NET site and yesterday I needed to throw a little jQuery into that site. I quickly found that ASP.NET poses one issue when using jQuery or simple Javascript in the situations where you are performing an operation on a named element. This relates specifically to using the ASP.NET controls, or any HTML control that has a runatserver command. As soon as you set runatserver=”true” on a control or HTML element, ASP.NET will rename that element when the page is loaded. For example, if I have a div element with an id attribute of “displayInfo”, ASP.NET will convert the ID into something like: ctl00_MainContent_displayInfo. As you can imagine this makes it difficult to use in some situations. But there is a very quick solution.

Microsoft has provided a simple ClientID variable that you can call that returns the correct ID of the control or HTML element. You just append .ClientID to the ID of your element. So in our example of above we would use displayInfo.ClientID anytime we needed to reference the displayInfo div in our jQuery or Javascript code.

Below is an example of using this with a little jQuery:

 Javascript | 
 copy code |
?
 
01
<script type="text/javascript">
02
        jQuery(document).ready(function($) {
03
            init();
04
        })
05
 
06
        function init() {
07
            $("#<%= news_item_type.ClientID %>").change(function() { slideForm($("#<%= news_item_type.ClientID %>").val()) });
08
        }
09
 
10
        function slideForm(formVal) {
11
            if (formVal == 'Detail') {
12
                $('#<%= detailDisplay.ClientID %>').slideDown();
13
                $('#<%= urlDisplay.ClientID %>').slideUp();
14
                $('#<%= fileDisplay.ClientID %>').slideUp();
15
            } else if (formVal == 'URL') {
16
                $('#<%= detailDisplay.ClientID %>').slideUp();
17
                $('#<%= urlDisplay.ClientID %>').slideDown();
18
                $('#<%= fileDisplay.ClientID %>').slideUp();
19
            } else if (formVal == 'File') {
20
                $('#<%= detailDisplay.ClientID %>').slideUp();
21
                $('#<%= urlDisplay.ClientID %>').slideUp();
22
                $('#<%= fileDisplay.ClientID %>').slideDown();
23
            }
24
        }
25
    </script>

I have really been into learning and using jQuery the last few weeks.  I keep coming across some very simple functions that provide a much nicer UI experience.  One of these is the Datepicker widget that is a part of the jQuery UI package.  The widget is super fast and is customizable in a variety of ways.  It takes only a couple of lines of code to add into your page.  To place the widget into your code with the default setup is simply this:

 Javascript | 
 copy code |
?
 
1
<script type="text/javascript">
2
  $(function() {
3
   $("#datepicker").datepicker();
4
  });
5
 </script>

I am not going to post any demos, as the jQuery UI page for this widget has all you need.  It also lists out all the options you can pass in to control the widget as well.  Some of the cool features I like are:

• You can easily set the date format it returns
• You can restrict the selectable date range
• You can display more than 1 month at a time
• You can display the widget inline