Thursday, August 26, 2010

Manipulate Dynamic DOM elements in JavaScript with JQuery

JQuery have a huge set of selectors to manipulate DOM elements. But when it comes to manipulate dynamically generated elements it needs some logic to access all of them and perform operation.

Ex. Suppose you want to check all checkboxes inside GridView OR any DataBound control, you need to loop over them and perform operation.

To loop over them you need to access them by ID or by class, now because IDs are dynamically generated you can’t access them directly.  You can have two solutions in this scenario.

 

Case-1: You can give unique class to them and find them by class name.

 

Suppose you have a Grid having textboxes in one column. You want to change text of all of them to

‘Deleted’, when user check the checkbox in  Header.

   <div id="dvProducts">

        <asp:GridView ID="grvProducts" runat="server">

            <Columns>

                <asp:TemplateField>

                    <HeaderTemplate>

<asp:CheckBox ID="chkAllProduct" runat="server" onclick="chkSetStatus_Click(this.checked)" />

                    </HeaderTemplate>

                    <ItemTemplate>

<asp:TextBox ID="txtStatus" runat="server" CssClass="dummyForSelect"></asp:TextBox>

                    </ItemTemplate>

                </asp:TemplateField>

            </Columns>

        </asp:GridView>

    </div>

Here is the function which will perform this operation.

function chkSetStatus_Click(ischecked) {

            $('.dummyForSelect', $("#dvProducts")).each(

                                        function(d, obj) {

                                        if(ischecked)

                                            obj.value = 'Deleted';

                                            else

                                                obj.value = '';

                                        });

        }

 

Case-2: You can use pattern of generated IDs and find them using regular expression.

 

Suppose you have a Grid having Checkboxes in one column. You won’t to check all when checkbox in the header checked, and remove selection when user unselects it.

 

  <div id="dvProducts">

        <asp:GridView ID="grvProducts" runat="server">

            <Columns>

                <asp:TemplateField>

                    <HeaderTemplate>

         <asp:CheckBox ID="chkAllProduct" runat="server" onclick="chkAllProduct_Click(this.checked)" />

                    </HeaderTemplate>

                    <ItemTemplate>

                        <asp:CheckBox ID="chkProduct" runat="server"  />

                    </ItemTemplate>

                </asp:TemplateField>

            </Columns>

        </asp:GridView>

    </div>

You can’t use CssClass here because it will not work for you, you have to use pattern in which ID of checkboxes is generated.

ID generated by asp.net will be “grvProducts_ctl03_chkProduct”, we need to make RegEx to find out checkboxes with such pattern and make operation on them.

So our RegEx will look like this var rExp = /.*grvProducts.*chkProduct/;

Using this we can write JavaScript function below to finish task.

function chkAllProduct_Click(ischecked) {

            var rExp = /.*grvProducts.*chkProduct/;

            $('input:checkbox', $("#dvProducts")).each(

                                        function(d, obj) {

                                            if (rExp.test(obj.id)) {

                                                obj.checked = ischecked;

                                            }

                                        });

        }

 

This is the tasks becomes too easy because of the JQUERY. Please put your suggestion here if any.

 

Hope this will help you.

 

Thanks,

Haresh Dhameliya