Update Panel Causing Button Click to not work

.NET
1

Hello

I have installed the AJAX framework for ASP.Net 2.0 and got a basic example to work so I know the install was successful. Now I am trying to add an UpdatePanel to a web app that has a Master Page and it is not working.

In my Master Page, I define the ScriptManager.

<asp:ScriptManager ID=“ScriptManager1” runat=“server” />

Then in my content page, I have a text box with a add button so the user can add multiple phone numbers. These values are then added to a list box.

My issue is, as soon as I add the UpdatePanel and ContentTemplate, the button functionality stops working. For example, I put some alert code in so when I click on the button, a messgae is displayed. If I surrond this code with the components that are needed for the UpdatePanel, it does not work. If those components are not there, everything works (except it does not use Ajax).

Can someone see what I am doing wrong?

Here is the content page code…


<asp:UpdatePanel ID="ContactPanel" UpdateMode="Conditional" runat="server">

   <ContentTemplate>
      <asp:TextBox runat="server" ID="txtContactNumber" CssClass="inputField" onfocus="this.className = 'highlight';" onblur="this.className = 'inputField';" />
      <asp:DropDownList ID="cboNumberType" runat="server" AutoPostBack="True" AppendDataBoundItems="true" />
      <asp:Button ID="btnAddNumber" Text="Add" OnClick="btnAddNumber_Click" runat="server" />
   </ContentTemplate>

</asp:UpdatePanel>

Thanks in advance for your time.

2

The update panel replaces some of your onlclick code. You should use the ConfirmDialogExtender if you need to pop a confirmation box.

3

Thank you for the post.

Here is my example that I got to work to verify I have the Ajax components installed correctly on my box. I do have an onClick event for this button and everything works.


<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1"
    runat="Server">
    <asp:Panel ID="Panel2"
               GroupingText="ContentPage"
               runat="server" >
        <asp:UpdatePanel ID="UpdatePanel1"
                         UpdateMode="Conditional"
                         runat="server">
            <ContentTemplate>
                <p>
                    Last updated: <strong>
                        <%= Master.LastUpdate.ToString() %>
                    </strong>
                </p>
                <asp:Button ID="Button3"
                            Text="Refresh Panel"
                            OnClick="Button3_Click"
                            runat="server"  />
            </ContentTemplate>

               </asp:UpdatePanel>
    </asp:Panel>
</asp:Content>

I did change my example to use a MasterPage as well and everything works. The only difference I can see that I have between my example and the one I am trying to get to work, is that I have a Panel in my example. In my real app I do not want the visual seperation the panel causes but I did try adding it, and I still can not get the Ajax button to display an alert message.

Here is how I generated my alert message.

ClientScript.RegisterStartupScript(this.GetType(), “Test”, “alert('” + message + “');”, true);

Here is the only other difference I have in the code.

To maintain the formating of the page, I have the components formatted with HTML in a table. Could the HTML formatting be casuing me an issue? I was also curious how I was suppose to setup my UpdatePanel and ContentTemplate code within the HTML. Lastly, this HTML is in a Wizard.

Here is the code with the HTML formatting.


<tr>
   <td>
      <asp:Label ID="lblContactNumbers" runat="server" Text="Contact Numbers:" />
   </td>
   <td>
      <asp:UpdatePanel ID="ContactPanel" UpdateMode="Conditional" runat="server">

      <ContentTemplate>
         <asp:TextBox runat="server" ID="txtContactNumber" CssClass="inputField" onfocus="this.className = 'highlight';" onblur="this.className = 'inputField';" />
         <asp:DropDownList ID="cboNumberType" runat="server" AutoPostBack="True" AppendDataBoundItems="true" />
         <asp:Button ID="btnAddNumber" Text="Add" OnClick="btnAddNumber_Click" runat="server" />
      </ContentTemplate>

   </asp:UpdatePanel>

   </td>
</tr>
<tr>
   <td></td>
   <td>
      <asp:ListBox ID="lstContactNumbers" style="width: 225px;" runat="server" />
      <asp:Button ID="btnRemoveNumber" Text="Remove" OnClick="btnRemoveNumber_Click" runat="server" />
   </td>
 </tr>

Any ideas on why this is not working for me would be appreciated.

4

Use the RegisterStartupScript of the ScriptManager instead of the ClientScript. It should be compatible with UpdatePanel operations.

5

Thank you for pointing that out.

This made me realize the problem was not with the UpdatePanel. I moved the code for this list box inside the <ContentTemplate> and then everything worked perfect.

Like this…


<asp:UpdatePanel ID="ContactPanel" UpdateMode="Conditional" runat="server">

   <ContentTemplate>

      <asp:TextBox runat="server" ID="txtContactNumber" CssClass="inputField" onfocus="this.className = 'highlight';" onblur="this.className = 'inputField';" />
      <asp:DropDownList ID="cboNumberType" runat="server" AutoPostBack="True" AppendDataBoundItems="true" />
      <asp:Button ID="btnAddNumber" Text="Add" OnClick="btnAddNumber_Click" runat="server" />

      <asp:ListBox ID="lstContactNumbers" style="width: 225px;" runat="server" />

   </ContentTemplate>
</asp:UpdatePanel>

But I would really like to keep the HTML formatting that I had.

I tried this but it does not work.


<asp:UpdatePanel ID="ContactPanel" UpdateMode="Conditional" runat="server">
<ContentTemplate>

<tr>
   <td>
      <asp:Label ID="lblContactNumbers" runat="server" Text="Contact Numbers:" />
   </td>
   <td>
      <asp:TextBox runat="server" ID="txtContactNumber" CssClass="inputField" onfocus="this.className = 'highlight';" onblur="this.className = 'inputField';" />
      <asp:DropDownList ID="cboNumberType" runat="server" AutoPostBack="True" AppendDataBoundItems="true" />
      <asp:Button ID="btnAddNumber" Text="Add" OnClick="btnAddNumber_Click" runat="server" />
   </td>
</tr>
<tr>
   <td></td>
   <td>
      <asp:ListBox ID="lstContactNumbers" style="width: 225px;" runat="server" />
      <asp:Button ID="btnRemoveNumber" Text="Remove" OnClick="btnRemoveNumber_Click" runat="server" />
   </td>
 </tr>

</ContentTemplate>
</asp:UpdatePanel>

I am assuming the HTML is breaking up the UpdatePanel? Is that true and if so, can I work around this while still using the HTML to format the page? Any suggestions would be appreciated.

6

Since I was unable to get the Ajax UpdatePanel to work as I showed in my last post, I just put all of the HTML for the table in the UpdatePanel. Was this a bad design since there is substantially more HTML in the UpdatePanel then is needed?

7

I think it is unavoidable with a table. Update panel does create some DOM objects to do its magic. Unfortunately, those can often break tables so to speak.

Or at least that has been my experience.

8

Thank you for the information. Based on the countless iterations I tried and nothing worked, I figured it had to be something like that.

9

It is an issue with IEs DOM for tables. For some reason table elements are not first class DOM elements. I bet the original would work in FF. However, your solution sound like the right one, given this limitation.