This post may be most relevant to those who haven’t had the chance to work with jQuery yet. Lately there is a great hype around jQuery, very many people talk about it, very many write excellent example but most of them target more advanced users.
This post may be most relevant to those who haven’t had the chance to work with jQuery yet. Lately there is a great hype around jQuery, very many people talk about it, very many write excellent example but most of them target more advanced users.
jQuery is a lightweight (~19KB Minified and Gzipped) JavaScript library which easily enables us to traverse the DOM (Document Object Model), handle events, animate elements, and do asynchronous requests (AJAX – Asynchronous JavaScript and XML).
What is it that could make your like easier if you are an ASP.NET developer? Well the biggest reason for me is that I don’t need to repeat tons of code to get things done. 9KB of jQuery is way enough to speed up client-side development and reduce the overall development effort due to the fact that you do not have to repeat writing the same kind of code in different projects / pages. The $ sign, the jQuery function:
The most important functionality of jQuery is based on this function. It’s used to select matching elements using a so called selector engine by supplying it an expression (which generally is CSS).
You can visit: jQuery Selectors Reference to for the whole list of supported expressions. When the expression consists in selecting an element by it’s ID you have to take special care to inject the generated ID of the ASP.NET control. The ID of an element in HTML is not necessarily the same that is specified in the form with the runat=”server” attribute . The correct way to select an element by its ID is: view source print? 1.<div> 2. <asp:TextBox ID="txtName" runat="server"></asp:TextBox> 3.</div> 4.<script type="text/javascript"> 5. $(document).ready(function () { 6. $("#<%= <strong>txtName.ClientID</strong> %>").css("border", "3px solid red"); 7. }); 8.</script>
This example sets a 3 pixel solid red border to the element with the specified ID. <%= is actually similar to a “Response.Write(txtName.ClientID)”. jQuery document.ready function, what is it?
$(document).ready(function() {}); actually is very simple to understand if we read it in little steps:
1. $(document) returns an object that exposes the ready event 2. ready – is the event that is fired once the document has been loaded and ready to be manipulated 3. function() { // your code here } is actual a callback function and it gets executed once the ‘document’ is ready to be manipulated
Why is document.ready that important? Well the answer is that normally most of the JavaScript code should run immediately after the DOM has been loaded. Place all your JavaScript goodies inside one document.ready and jQuery takes care of when it needs to be run. You can also have multiple document.ready functions in your page and your code will be executed in the same order you’ve defined them.
Attention: the jQuery $(document).ready function isn’t called after an ASP.NET Ajax callback. Some ASP.NET Ajax Client Library code needs to be inserted for this to work and I have documented this in two previous posts: jQuery $(document).ready() and ASP.NET Ajax asynchronous postback and jQuery live() and ASP.NET Ajax asynchronous postback.
In the past many tasks within an ASP.NET web application needed advanced JavaScript skills to accomplish. (ex. GridView with a checkbox on each row with select/deselect all options associated with a CheckBox in the header). jQuery makes these kinds of tasks allot easier. In this sense jQuery simply moved the goal posts in client-side development.
Ajax Projects
