CODEWITHSUNDEEP
c#asp.netajaxupdatepanel
A Programmer
A Programmer

Reputation: 655

Why my update panel does not work?

i have an update panel that contains a checkBox and a panel, checkbox's auto postback property is true, and i want to make panel visible when checkbox is checked , but when i'm clicking on the checkbox page is refreshed :(

Code:

<asp:UpdatePanel runat="server" ID="updDate">
     <ContentTemplate>
         <tr>
             <td>
                 <br/>
                  Website Status
                 <br/>
             </td>
             <td>
             <br/>
                 <asp:CheckBox runat="server" ID="chkUnderConstruction" Text="  Is Website Active?" 
                 AutoPostBack="True"></asp:CheckBox>
                 <br/>
            </td>
         </tr>
            <asp:Panel runat="server" ID="pnlDate">
                <tr>
                    <td>Activation Date</td>
                     <td>
                        Day: <asp:TextBox runat="server" ID="txtDate" Width="30">
                              </asp:TextBox>
                        Month: <asp:TextBox runat="server" ID="TextBox1" Width="30">
                               </asp:TextBox>
                        Year : <asp:TextBox runat="server" ID="TextBox2" Width="30">
                               </asp:TextBox>
                     </td>
                 </tr>
            </asp:Panel>
         </ContentTemplate>
     </asp:UpdatePanel>

PageLoad code :

pnlDate.Visible = chkUnderConstruction.Checked;

Upvotes: 1

Views: 696

Answers (4)

A.Goutam
A.Goutam

Reputation: 3494

Use this it will work very fine for you . I am using this in my project

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

        function onUpdating() {
            // get the update progress div
            var updateProgressDiv = $get('updateProgressDiv');
            // make it visible
            updateProgressDiv.style.display = '';

            //  get the gridview element
            var gridView = $get('chkUnderConstruction');

            // get the bounds of both the gridview and the progress div
            var gridViewBounds = Sys.UI.DomElement.getBounds(gridView);
            var updateProgressDivBounds = Sys.UI.DomElement.getBounds(updateProgressDiv);

            //    do the math to figure out where to position the element (the center of the gridview)
            var x = gridViewBounds.x + Math.round(gridViewBounds.width / 2) - Math.round(updateProgressDivBounds.width / 2);
            var y = gridViewBounds.y + Math.round(gridViewBounds.height / 2) - Math.round(updateProgressDivBounds.height / 2);

            //    set the progress element to this position
            Sys.UI.DomElement.setLocation(updateProgressDiv, x, y);
        }

        function onUpdated() {
            // get the update progress div
            var updateProgressDiv = $get('updateProgressDiv');
            // make it invisible
            updateProgressDiv.style.display = 'none';
        }

    </script>

<asp:UpdatePanel ID="UpdatePanelTabContainer" runat="server">
            <ContentTemplate>

            </ContentTemplate>
 </asp:UpdatePanel>






<ajaxToolkit:UpdatePanelAnimationExtender ID="upae" BehaviorID="animation" runat="server"
            TargetControlID="UpdatePanelTabContainer">
            <Animations>
            <OnUpdating>
                        <Parallel duration="0">
                            <%-- place the update progress div over the gridview control --%>
                            <ScriptAction Script="onUpdating();" />  
                            <%-- disable the search button --%>                       
                            <EnableAction AnimationTarget="btnSubmit" Enabled="false" />
                            <%-- fade-out the GridView --%>
                            <FadeOut minimumOpacity=".5" />
                         </Parallel>
            </OnUpdating>
            <OnUpdated>
                        <Parallel duration="0">
                            <%-- fade back in the GridView --%>
                            <FadeIn minimumOpacity=".5" />
                            <%-- re-enable the search button --%>  
                            <EnableAction AnimationTarget="btnSubmit" Enabled="true" />
                            <%--find the update progress div and place it over the gridview control--%>
                            <ScriptAction Script="onUpdated();" /> 
                        </Parallel> 
                    </OnUpdated>
            </Animations>
        </ajaxToolkit:UpdatePanelAnimationExtender>

Upvotes: 1

user1659922
user1659922

Reputation: 346

try adding triggers to update pannel

<Triggers>
<asp:AsyncPostBackTrigger />

Upvotes: 2

A Programmer
A Programmer

Reputation: 655

I found it!, my mistake. i didnt use triggers, the right code : 

<asp:UpdatePanel runat="server" ID="updDate" UpdateMode="Conditional">
                <ContentTemplate>
                    <tr>
                        <td>
                        <br/>
                        Website Statuse
                        <br/>
                        </td>
                        <td>
                        <br/>
                            <asp:CheckBox runat="server" ID="chkUnderConstruction" Text="  Is Website Active?" AutoPostBack="True"></asp:CheckBox>
                        <br/>
                        </td>
                    </tr>
                    <asp:Panel runat="server" ID="pnlDate">
                        <tr>
                            <td>Activation Date</td>
                            <td>
                                Day: <asp:TextBox runat="server" ID="txtDate" Width="30"></asp:TextBox>
                                 Month: <asp:TextBox runat="server" ID="TextBox1" Width="30"></asp:TextBox>
                                  Year: <asp:TextBox runat="server" ID="TextBox2" Width="30"></asp:TextBox>
                            </td>
                        </tr>
                    </asp:Panel>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="chkUnderConstruction" />
                </Triggers>
            </asp:UpdatePanel>

Upvotes: 0

Freelancer
Freelancer

Reputation: 9064

Try to use Jquery for that.

Avaoid writing server side code for it. In Jquery there are function for this like Show() and Hide().

You can refer those function over here>>

http://api.jquery.com/show/

Create Jquery function based on check box event to hide and show your panel.

Your problem will definitely get resolved.

Upvotes: 1

Related Questions