Click here to Skip to main content
Click here to Skip to main content
Technical Blog

HTML 5 and jQuery – A Match Made in Heaven

, 22 Aug 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
An introduction to HTML 5 Custom Data Attributes.

I recently attended an ASP.NET MVC seminar hosted by the Twin Cities .NET User Group. The speaker was K. Scott Allen. Scott is a charismatic, gifted speaker and did a great job. You can always pick up useful items when watching an expert write a program from scratch.

When I saw what he did with jQuery and HTML 5 Custom Data Attributes, I got so excited I ran around the room squealing like a little girl and wetting my pants until someone threw an unopened can of pop at my head and knocked me out cold. Well, that didn't happen, but what Scott did was interesting enough to compel me to write this post.

What are HTML 5 Custom Data Attributes?

They are attributes that you create for an HTML element that starts with "data-".

Here's an example:

<asp:TextBox 
    ID="TextBox1" 
    CssClass="TextEntry" 
    data-entryType="Date" 
    runat="server">
</asp:TextBox>

data-entryType="Date" is a Custom Data Attribute. Note that asp:TextBox will render as an input element in the browser.

What is incredibly useful is that jQuery can select elements by Custom Data Attributes. This is better than using CSS class names because CSS is for visual appearance and the CSS classes may be applied to elements you do not want to select with jQuery.

In the following example, I have three text boxes for entering data. They all share the same CSS class. Two of the textboxes are marked with a Custom Data Attribute to specify a date type of input.

Page Includes

<script src="Scripts/jquery-1.6.1.js" type="text/javascript"></script>
  <script 
      src="Scripts/jquery-ui-1.8.15.custom/development-bundle/ui/jquery-ui-1.8.15.custom.js"
      type="text/javascript"></script>
  <link href="Scripts/jquery-ui-1.8.15.custom/css/smoothness/jquery-ui-1.8.15.custom.css"
      rel="stylesheet" type="text/css" />

CSS

.TextEntry
<span class="code-none">{
    background-color<span class="code-none">: Cyan<span class="code-none">;
<span class="code-none">}</span></span></span></span>

jQuery

<script type="text/javascript">

    $(document).ready(DocReady);

    function DocReady()
    {
        $("input[data-entryType = 'Date']").datepicker();
    }

HTML

<table>
    <tr>
        <td>
            Company Name:
        </td>
        <td>
            <asp:TextBox ID="TextBoxCompanyName" 
               CssClass="TextEntry" runat="server"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td>
            Start Date:
        </td>
        <td>
            <asp:TextBox ID="TextBoxStartDate" CssClass="TextEntry" 
               data-entryType="Date" runat="server"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td>
            End Date:
        </td>
        <td>
            <asp:TextBox ID="TextBoxEndDate" CssClass="TextEntry" 
               data-entryType="Date" runat="server"></asp:TextBox>
        </td>
    </tr>
</table>

With this code, the jQuery DatePicker is effortlessly (in a manner of speaking) attached to the correct HTML elements.

There were other slick things demonstrated at the seminar and although it was a seminar on MVC, most of the features demonstrated were applicable to ASP.NET forms.

I have an open mind about MVC… if it allows me to satisfy my client's needs in a more timely fashion than ASP.NET forms, then bring it on.

However, when I see source code mixed in with HTML markup, it looks like a giant step backwards towards classic ASP. I understand the frustration of dealing with the HTML output from the ASP.NET controls. Oh, yes, I do. But you don't have to use every control and there are controls that do give you 100% control over the HTML. So, I will continue to proceed with caution.

I hope someone finds this helpful.

Steve Wellens

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Steve Wellens
EndWell Software, Inc.
United States United States
I am an independent contractor/consultant working in the Twin Cities area in Minnesota. I work in .Net, Asp.Net, C#, C++, XML, SQL, Windows Forms, HTML, CSS, etc., etc., etc.

Comments and Discussions

 
Questionhonestly, this has been possible since javascript could read and write from any dom element attribute. PinmemberDaniel Gidman23-Aug-11 16:32 
AnswerRe: honestly, this has been possible since javascript could read and write from any dom element attribute. PinmemberSteve Wellens12-Sep-11 18:54 
GeneralRe: honestly, this has been possible since javascript could read and write from any dom element attribute. PinmemberDaniel Gidman21-Sep-11 5:45 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.1411023.1 | Last Updated 22 Aug 2011
Article Copyright 2011 by Steve Wellens
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid