jQuery? What?
jQuery is a powerful JavaScript library which aims to reduce the time and effort for writing JavaScript code, and to support Unobtrusive JavaScript. Take the following line of code as an example:
$("table tr:nth-child(even)").addClass("yellow");The above line highlights every other row in a table with a yellow color (assume you have a style called “yellow”). If you use raw JavaScript, it may take you dozens of lines of code to accomplish the same task. For more information about jQuery and how it works, check jQuery’s web site.
jQuery with ASP.NET
Since basically jQuery is a JavaScript library, it can be used in any web languages including ASP.NET. Let’s start with a “Hello world” example to show how to use jQuery with ASP.NET.
1. Download jQuery library from jQuery web site, unzip the file and add/include the file in your project.
2. Create a simple ASPX page called jqueryDemo.aspx, and add <script> tag in the header section to reference the jQuery library.
<script type="text/javascript" src="../Common/jquery.js" />
3. Create an ASP:HyperLink control as follows
<asp:HyperLink ID="hlClickMe" runat="server" href="javascript:void(0);">Click Me</asp:HyperLink>
4. Add the following code snippet in the <head> section of the page
<script type="text/javascript"> $(document).ready(function() { $("a").click(function() { alert("Hello world!"); }); }); </script>
$(document).ready() will check if the document structure is fully parsed and the DOM tree is ready before executing the script in the function block. It has the same effect as the following line:
<asp:HyperLink ID="hlClickMe" runat="server" href="javascript:void(0);" onclick="alert('Hello world!');">Click Me</asp:HyperLink>
The benefit of using jQuery is that we don’t need to add “onclick” call for each HyperLink control (if there are multiple HyperLink controls on the page that calls the same JavaScript function), and also this implementation separates the behavior from the document structure: Unobtrusive JavaScript.
Why is it not working?
Put all pieces together, we have an ASPX page as follows:
<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Using jQuery with ASP.NET - Why It Is Not Working?</title> <script type="text/javascript" src="Common/jquery.js" /> <script type="text/javascript"> $(document).ready(function() { $("a").click(function() { alert("Hello world!"); }); }); </script> </head> <body> <form id="form1" runat="server"> <div> <asp:HyperLink ID="hlClickMe" runat="server" href="javascript:void(0);">Click Me</asp:HyperLink> </div> </form> </body> </html>
However, when you load the above page in browser, you may find that there is no alert box when clicking on the hyperlink. So what is going on here?
First, let’s take a look at the page source generated in IE 8:
Nothing seems to be troublesome here. Now let’s take a look at the page source generated in FireFox:
Aha, thanks to the nice page source viewer of FireFox with the syntax highlight, I found the problem. The “/>” tag supposes to be a close tag of <script>, but somehow, browser got confused by the mixed usage of <script /> and </script> tags in the <head> section, and didn’t know how to correctly parse the code…and it tried its best to match <script /> with </script> as a pair. It is what caused the onclick event not fire. It looks like a browser bug to me.
Lesson learned
Always explicitly close a tag with the old fashion. Now let’s change the <script> block in ASPX page as follows:
<script type="text/javascript" src="Common/jquery.js"></script>
then load the page in browser, and viola, “Hello world” alert box pops up when clicking on the hyper link.
Hope this may help someone.