public knowledge blog_load(sender Virendra)

                                                                                                                          Nothing shocks me, I am a Software Engineer.

Archive for the ‘jQuery’ Category

jQuery 1.6 launched and find out its new features

Posted by Virendra Dugar on May 7, 2011

jQuery 1.6 is launched and it is ready for consumption.

Check this article to find out What’s new with jQuery 1.6.

Posted in jQuery | Leave a Comment »

How to Set Max Length for ASP.NET MultiLine Textbox using jQuery

Posted by Virendra Dugar on October 16, 2010

I found a good article on how to “Set Max Length for ASP.NET MultiLine Textbox using jQuery“.

Thanks,

Virendra Dugar

Posted in jQuery | Tagged: | 1 Comment »

Check/Uncheck All Checkboxes with JQuery

Posted by Virendra Dugar on May 23, 2010

This particular article is about a pretty common functionality which I think most of the software engineers face in their projects. Even I came across the same situation many times. Previously I used to achieve the functionality via JavaScript, which really worked flawlessly. But as a software engineer, I think one should always adapt the new technology. So, this time I tried to achieve the same via JQuery as its booming now and one need to upgrade himself. So what functionality are we talking about? See below given images.

Okay. So you must have got the idea about the functionality. Yes, you guessed it right. It’s about selecting all the items of checkbox list, when select all is checked. You can find thousands of solution using Jquery when you google it. Then why you are here. Well, in fact I googled a lot but didn’t even come across to a single article which solves my purpose. Let me explain the requirement of the functionality here.

  1. When “Select All” checkbox is checked, it must change the status of all the items of the checkbox list as per “Select All” status. For e.g., if “Select All” is true then all the items of the checkbox list must be set to true or vice versa.
  2. Assume, “Select All” is true and all the items of the checkbox list are also true. But when I uncheck any item of checkbox list, it must also uncheck the select all button.
  3. Assume, “Select All” is unchecked. And one of the items in the checkbox list is also unchecked. But now when I check the checkbox list item, then “Select All” must be checked. As all the items in the checkbox list are checked.

So let’s go directly to the code.

Prerequisite: I assume that you know the basics of JQuery. Read this article for information on Introduction to JQuery.

<table cellpadding="2" cellspacing="2" width="50%">
            <tr>
                <th align="left" style="font-family:Arial;">
                    <h3>
                        Checkbox Select All Demo using JQuery</h3>
                </th>
            </tr>
            <tr>
                <td>
                    &nbsp;<asp:CheckBox ID="chkSelectAll" runat="server" Text="Select All" Font-Size="9pt"
                        Font-Names="Arial" />
                </td>
            </tr>
            <tr>
                <td>
                    <asp:CheckBoxList ID="chkItems" runat="server" Width="200px" Font-Size="9pt" Font-Names="Arial"
                        BorderStyle="Solid" BorderColor="Black" BorderWidth="1px">
                    </asp:CheckBoxList>
                </td>
            </tr>
        </table>

Well, I have placed a checkbox “Select All” with ID “chkSelectAll” and a checkbox list with ID “chkItems”.

<script type="text/javascript">
    $(document).ready(function() {
        $("#<%=chkSelectAll.ClientID %>").click(function() {
                $("#<%= chkItems.ClientID %> input:checkbox").attr('checked',this.checked);
        });

        $("#<%=chkItems.ClientID %> input:checkbox").click(function(){
            if($("#<%= chkSelectAll.ClientID %>").attr('checked') == true && this.checked == false)
                $("#<%= chkSelectAll.ClientID %>").attr('checked',false);

             if(this.checked == true)
                CheckSelectAll();
        });

        function CheckSelectAll()
        {
            var flag = true;
            $("#<%=chkItems.ClientID %> input:checkbox").each(function() {
                if(this.checked == false)
                    flag = false;
            });
              $("#<%= chkSelectAll.ClientID %>").attr('checked',flag);
        }

    });

    </script>

Well above given code solves my purpose. Let’s go through the code function by function.

$("#<%=chkSelectAll.ClientID %>").click(function() {
                $("#<%= chkItems.ClientID %> input:checkbox").attr('checked',this.checked);
        });

This code binds click event to “Select All” checkbox. It will search for all the checkbox inside the chkItems (as checkbox list, when rendered becomes a table. See the view source.) and set the checked attribute to the value of “Select All” checkbox. 2 Lines of code can serve your purpose. That’s why I love JQuery.

Next function binds the click event to every checkbox of checkbox list.

$("#<%=chkItems.ClientID %> input:checkbox").click(function(){

Inside the function, it first check for the status of “Select All”. If it’s true and the clicked checkbox is unchecked (see Image 3), then it will uncheck the “Select All” checkbox.

 if($("#<%= chkSelectAll.ClientID %>").attr('checked') == true && this.checked == false)
                $("#<%= chkSelectAll.ClientID %>").attr('checked',false);

Next task is, if the clicked checkbox item status is checked, then we need to check the status of all the items of checkbox list and if every item is checked, then we must check the “Select All” checkbox.

 if(this.checked == true)
                CheckSelectAll();

This will call a function “CheckSelectAll”. This function iterates thorugh the checkbox list and finds all the items are checked or not. If yes, then it sets the status of “Select All” checkbox accordingly.

 function CheckSelectAll()
        {
            var flag = true;
            $("#<%=chkItems.ClientID %> input:checkbox").each(function() {
                if(this.checked == false)
                    flag = false;
            });
              $("#<%= chkSelectAll.ClientID %>").attr('checked',flag);
        }

each() method of JQuery will perfomes the iteration for specified item.

That’s it. Hope this will help you in your work.

Enjoy,
Virendra

Posted in jQuery | Tagged: | Leave a Comment »

New Features of jQuery 1.4

Posted by Virendra Dugar on January 20, 2010

jQuery 1.4 was recently released. There are many new features, enhancements and performance improvements included in 1.4!

You can download jQuery 1.4 right now, here:http://code.jquery.com/jquery-1.4.js

Check this article to know 15 New Features of JQuery 1.4

Enjoy..

Posted in jQuery | Tagged: | Leave a Comment »

Starting with JQuery

Posted by Virendra Dugar on November 24, 2009

Introduction

JQuery is a Java script libarary/ Java Script framework that simplifies the interaction process or access process of traversing in HTML document. It provides methods to make animations, add ajax interaction to the page, provides an easy way to apply CSS to any items and provides an easy mechanism for binding and unbinding events. Huge code written using Java script can easily replaced by few lines of code in JQuery.

History of JQuery

Initially it’s was released in January 2006 but the very first stable version of JQuery 1.0 was released in August 2006. This version had support for CSS, events and Ajax. After that many version of JQuery were released but the latest version is JQuery 1.3.2. You can download this from JQuery website.

What can be done using JQuery

1. Allows to access elements in the document

If one need to access the DOM tree without any JavaScript libarary, one has to write many lines of code. JQuery provides a selector mechanism to access any part of DOM.

2. Easily apply CSS

As it’s known that CSS is the most powerful and mostly used for good appreance of any webpage. JQuery provides CSS Selectors which allows to change the CSS classes or individual style for any portion of the document. This can be done even after the page is rendered.

3. Make Animation

For better user experience, animation can do the job for you. JQuery provides many methods to perform animations like show,hide, fade, wipe, start, stop etc. Doing all this with JQuery is fun as No huge lines of code, no complex logic.

4. Ajax Interaction

In today’s world, Ajax is one of the most popular technology used in almost every website for better user experience. Jquery provides support for ajax also which allows to access server side event without refreshing the web page.

5. API to change document’s content

JQuery provides API (Application Program Interface) which allows to change the content of the document. Changing Text, inserting images, ordering of list can be done with few keystrokes with JQuery API. Entire structure of HTML can be rewritten or extended.

6. Event handling

Any technology is a failure if it cannot responsed to the user when any event takes place. Jquerys’s event handling is one the decent feature. It quickly responsed to any event such as user clicking a button.

Demo

To start with JQuery, first download the Jquery from it’s official website (http://JQuery.com). Make sure you download the latest copy of the JQuery.

<script src="Script/jquery.js" type="text/javascript"></script>

I have copied the jquery.js and placed it in script directory of the project. In this demo, I am going to show you how easily you can change the CSS and do animation.

Let’s first take a look at HTML

<h2>
History of JQuery</h2>
<div id="content">
Initially it's was released in January 2006 but the very first stable version of JQuery 1.0 was released in August 2006. This version had support for CSS,events and Ajax. After that many version of JQuery were released but the latest version is JQuery 1.3.2. You can download this from JQuery website.
</div>

As you can see, I have placed a div tag with it’s ID set to content. Now, I will show you how you can find the div and apply CSS to it using JQuery.

<style type="text/css">
    .ApplyColor
        {
            background-color: Gray;
            font-family: Arial;
            font-size: 10pt;
            color: White;
        }
    h2
        {
            font-size: 20pt;
        }
</style>

<script type="text/javascript" language="javascript">

    $(document).ready(function() {
        $('#content').addClass('ApplyColor');
    });
</script>

.ready() is a jQuery event handler. This particular event handler will execute when the document is ready to be accessed and scripts have completed loading. A .ready() handler can be placed anywhere on the page and you can even have multiple ready handlers in the page.

Now, if you run this page, you will see the div with content id is having gray background and white color foreground.

Let’s go to the animation part with JQuery.

Place a button and some text in Paragraph tag. Using JQuery, I will add a click event handler.

<asp:Button ID="btnShow" runat="server" Text="Show" />
<p style="display: none;background-color:Red">
    Hello
</p>

Now add this Jquery code to document.ready event

<script type="text/javascript" language="javascript">

    $(document).ready(function() {
        $('#btnShow').click(function() {
              $("p").show("");
              return false;
        });
    });

</script>

Above code will find the btnshow and add a click event handler to it. When the button is click then Jquery will find the p tag and make a call to show function which will display the content of the p tag on the screen.

Like wise there are many more functions for animation. You can find the whole list over here.

Reference

 

http://jquery.com/

Conclusion

This is just an overview of starting with Jquery. Many more complex things can be done via jquery with ease. Go to this main page of Jquery and learn as much as you can.

Happy Programming…

Virendra Dugar 🙂

Posted in jQuery | Tagged: | Leave a Comment »

 
%d bloggers like this: