CODEWITHSUNDEEP
c#javascriptasp.netajaxweb
james raygan
james raygan

Reputation: 701

Button is not working with Update Panel

I have placed a timer and a label for displaying countdown time in an update panel. I have placed the next button for displaying the next question outside the update panel.

My problem is that the button click is not working with the update panel. Without using the update panel and the timer it works well. How can I solve the problem?

I have also tried to place whole tools inside the update panel. It didn't help me.

Here is my code:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
  <ContentTemplate>
    <table class="style1">
        <tr>
            <td class="style2">
                <asp:Timer ID="Timer1" runat="server" Interval="1000" ontick="Timer1_Tick">
                </asp:Timer>
                <asp:Label ID="lblTimer" runat="server"></asp:Label>
        </tr>
        <tr>
            <td style="margin-left: 40px" class="style3">
                <asp:Label ID="lblQuestion" runat="server"></asp:Label>
            </td>
        </tr>
        </table>
         </ContentTemplate>
                 </asp:UpdatePanel>
        <table>
        <tr>
            <td style="margin-left: 40px" class="style2">
                <asp:RadioButtonList ID="rblOptions" runat="server">
                </asp:RadioButtonList>
            </td>
        </tr>
        <tr>
            <td style="margin-left: 40px" class="style2">
                <table class="style1">
                    <tr>
                        <td class="style2">
                            <asp:Button ID="btnNext" runat="server" onclick="btnNext_Click" Text="Next"
                                    Width="75px" />
                        </td>
                        <td>

                            <asp:Button ID="btnFinish" runat="server" onclick="btnFinish_Click"
                                Text="Finish" Width="75px" />
                        </td>
                    </tr>
                    <tr>
                        <td class="style2">
                            &nbsp;</td>
                        <td>
                         <asp:Label ID="lblScore" runat="server">Score : </asp:Label>
                       </td>
                   </tr>
                </table>
            </td>
        </tr>
    </table>
<asp:UpdatePanel>

I added the following code.

<Triggers>
 <asp:AsyncPostBackTrigger ControlID="btnNext" EventName="Click"/>
</Triggers>

Still it didn't work. Could you please help me....

The selection of radio button is automatically cleared when using update panel. Any help....?

Thank you....

Upvotes: 7

Views: 17401

Answers (7)

Xilmiki
Xilmiki

Reputation: 1502

If in the page there are validation error (include hidden errors es: modal dialog). Event click not work. Tray to set a different validation group to the button (es: validationGroup="xxx")

<asp:Button ID="btnFinish" validationGroup="none" runat="server" onclick="btnFinish_Click" Text="Finish" />

Hope this help.

Upvotes: 0

user2421985
user2421985

Reputation:

Seems that are unmatched tags. Once correct and go through the layout once again. Instead of using AjaxToolkit library, run with jquery navigation plugins, you can feel more better.

Upvotes: 3

Randhi Rupesh
Randhi Rupesh

Reputation: 15090

You must put the Button in update pannel then it will work fine

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
      <ContentTemplate>
        <table class="style1">
            <tr>
                <td class="style2">
                    <asp:Timer ID="Timer1" runat="server" Interval="1000" ontick="Timer1_Tick">
                    </asp:Timer>
                    <asp:Label ID="lblTimer" runat="server"></asp:Label>
            </tr>
            <tr>
                <td style="margin-left: 40px" class="style3">
                    <asp:Label ID="lblQuestion" runat="server"></asp:Label>
                </td>
            </tr>
            </table>

            <table>
            <tr>
                <td style="margin-left: 40px" class="style2">
                    <asp:RadioButtonList ID="rblOptions" runat="server">
                    </asp:RadioButtonList>
                </td>
            </tr>
            <tr>
                <td style="margin-left: 40px" class="style2">
                    <table class="style1">
                        <tr>
                            <td class="style2">
                                <asp:Button ID="btnNext" runat="server" onclick="btnNext_Click" Text="Next"
                                        Width="75px" />
                            </td>
                            <td>

                                <asp:Button ID="btnFinish" runat="server" onclick="btnFinish_Click"
                                    Text="Finish" Width="75px" />
                            </td>
                        </tr>
                        <tr>
                            <td class="style2">
                                &nbsp;</td>
                            <td>
                             <asp:Label ID="lblScore" runat="server">Score : </asp:Label>
                           </td>
                       </tr>
                    </table>
                </td>
            </tr>
        </table>
</ContentTemplate>
                     </asp:UpdatePanel>

Upvotes: 2

ggcodes
ggcodes

Reputation: 2909

You need to register NEXT button to update panel. for registration you need to use <asp:asyncpostbacktrigger xmlns:asp="#unknown"> inside the UpdatePanel

i.e.

<updatepanel>
   <contenttemplate>
       ... body ......
   </contenttemplate>

  <triggers>
     <asp:asyncpostbacktrigger controlid="btnNext" eventname="Click" />
  </triggers>
<updatepanel></updatepanel></updatepanel>

Upvotes: 1

bastos.sergio
bastos.sergio

Reputation: 6764

Your UpdatePanel is malformed. You have one extra asp:UpdatePanel tag in the markup.

Use this instead:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <table class="style1">
            <tr>
                <td class="style2">
                    <asp:Timer ID="Timer1" runat="server" Interval="1000" ontick="Timer1_Tick">
                    </asp:Timer>
                    <asp:Label ID="lblTimer" runat="server"></asp:Label>
                </td>
            </tr>
            <tr>
                <td style="margin-left: 40px" class="style3">
                    <asp:Label ID="lblQuestion" runat="server"></asp:Label>
                </td>
            </tr>
        </table>
        <table>
            <tr>
                <td style="margin-left: 40px" class="style2">
                    <asp:RadioButtonList ID="rblOptions" runat="server">
                    </asp:RadioButtonList>
                </td>
            </tr>
            <tr>
                <td style="margin-left: 40px" class="style2">
                    <table class="style1">
                        <tr>
                            <td class="style2">
                                <asp:Button ID="btnNext" runat="server" onclick="btnNext_Click" Text="Next" Width="75px" />
                            </td>
                            <td>
                                <asp:Button ID="btnFinish" runat="server" onclick="btnFinish_Click" Text="Finish" Width="75px" />
                            </td>
                        </tr>
                        <tr>
                            <td class="style2">
                                 &nbsp;</td>
                            <td>
                                <asp:Label ID="lblScore" runat="server">Score : </asp:Label>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </ContentTemplate>
<asp:UpdatePanel>

Upvotes: 7

Pallavi Sagar
Pallavi Sagar

Reputation: 165

Add 

<Triggers>    
        <asp:PostBackTrigger ControlID="btnNext" />
        </Triggers>

and add Ajaxtoolkit to your project... then just give below link after <%@ Page .........%> 

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

also add following code in your form tag.

 <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

It will solve your problem.

Upvotes: 2

SyntaxError
SyntaxError

Reputation: 1752

If you are using master page , then add this code in you're page load event

using AjaxControlToolkit;

 

ToolkitScriptManager objScriptManager = (ToolkitScriptManager)this.Master.FindControl("ScriptManager1");
    objScriptManager.AsyncPostBackTimeout = 36000;

..............

Upvotes: 2

Related Questions