Update Panel Async Postback and JQuery issue

Aug 4 2011 8:49 AM

I am using a DataGrid inside an update panel. Each row in a datagrid will have a datalist in a div which stores further information depending on the datagrid current row value. I am using jquery to toggle the div to expand and collapse but the div and the datalist (even the datagrid) is not being shown in the page source after the async postback and hence jquery is unable to locate the div to work on it.

Any ideas on how to overcome this problem?

The following is my html page source at design time:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="BBADummyWebSite.Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .style1
        {
            width: 100%;
        }
        .layer1
        {
            margin: 0;
            padding: 0;
            width: 500px;
        }

        .heading
        {
            margin: 1px;
            color: #fff;
            padding: 3px 10px;
            cursor: pointer;
            position: relative;
            background-color:#c30;
        }
        .content
        {
            padding: 5px 10px;
            background-color:#fafafa;
        }
        p { padding: 5px 0; }

    </style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
        //        jQuery(document).ready(function () {
        //            jQuery(".content").hide();
        //            //toggle the componenet with class msg_body
        //            jQuery(".heading").click(function () {
        //                jQuery(this).next(".content").slideToggle(500);
        //            });
        //        });

        function foo() {
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
            alert("pp");
        }
        function endRequestHandler(sender, args) {
            // Do your stuff
            alert('Update Panel work is done');
            VisibilityToggle();
        }

        /* Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

        function EndRequestHandler(sender, args) {
        alert("pp");
        VisibilityToggle();
        }*/

        function VisibilityToggle() {

            $(document).ready(function () {
                var div = $(this).parent().find('div[id*=divProb]');
                $('#heading').click(function () {
                    var div = $(this).parent().find('div[id*=divProb]');
                    if (div.css('display') == 'none')
                        div.show();
                    else if (div.css('display') == 'block')
                        div.hide();
                });
            });

        }
</script>
</head>
<body>
    <form id="form1" runat="server">

<font face="Arial" size="2">


     <asp:Label ID="lblMake" runat="server" Text="Vehicle Make"></asp:Label>
                <asp:DropDownList ID="cmbMake" runat="server"></asp:DropDownList>
                <asp:Button ID="btnGo" runat="server" OnClick="btnGo_Click" Text="Go" />

    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" border="0" UpdateMode="Conditional">
            <ContentTemplate>
                <fieldset>
                
               <asp:DataGrid ID="dgCat" runat="server" Caption="Categories" CellPadding="4"
                        ForeColor="#333333" GridLines="Horizontal" AllowSorting="True"
                        ShowHeader="False" Width="276px"
                        OnItemDataBound="dgCat_ItemDataBound" Height="231px"
                        AutoGenerateColumns="False" BackColor="White">

                   <Columns>

                       <asp:TemplateColumn HeaderText="Category">
                           <ItemTemplate>
                               <table class="style1">
                                   <tr>
                                       <td>
                                         <p class="heading"> <font face="Arial" size="2"> <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl=""
                                               Text='<%# DataBinder.Eval(Container, "DataItem.CatagoryName") %>'></asp:HyperLink></font></p>
                                       </td>
                                   </tr>
                                   <tr>
                                       <td>
                                        <div id="divProb" class="content" >
                                           <asp:DataList ID="lstProb" runat="server" BackColor="White" >
                                           <ItemTemplate>
                                           <table>
                                           <tr>
                                           <td><asp:HyperLink ID="hypProb" runat="server" Text='<%# Eval("Problem") %>' NavigateUrl="http://www.bba-reman.com"></asp:HyperLink>
                                           </td>
                                           </tr>
                                           </table>
                                           </ItemTemplate>
                                           </asp:DataList>
                                           </div>
                                       </td>
                                   </tr>
                               </table>
                           </ItemTemplate>
                       </asp:TemplateColumn>


                   </Columns>
                   <EditItemStyle BackColor="#999999" />
                   <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                   <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                   <ItemStyle BackColor="#F7F6F3" ForeColor="#333333" />
                   <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
                   <SelectedItemStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                    </asp:DataGrid>

                </fieldset>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="btnGo" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>




    </font>

</form>
</body>
</html>

Answers (2)

How to call .js file in button click event

How to use bengali language in web site