Ajax-enabled Sharepoint web-part.. Button disappears during postback (only in IE)

Question

I'm experiencing an issue with an ajax-enabled Sharepoint web-part.  For some reason when a button is clicked inside of an UpdatePanel, it disappears during postback (it reappears when postback is complete). This is only happening in Internet Explorer (tested with ie 6 & 7).  I've put together a simple code example that illustrates the problem.  To use the code you'll need to create a solution with a Web Application project to host the user control and a Class Library to host the actual web part and base class (the Web Application will need to get published to a folder named "usercontrols" in your SharePoint root).

User Control Markup:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="AjaxWebControl.ascx.cs" Inherits="WebControls.AjaxWebControl" %>
<%@ Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:Button ID="btnTest" runat="server" Text="Press Me" onclick="btnTest_Click" />
        <asp:Label ID="lblMessage" runat="server" Text=""></asp:Label>
    </ContentTemplate>
</asp:UpdatePanel>

User Control Code-Behind:

public partial class AjaxWebControl : System.Web.UI.UserControl
    {
        

        protected void btnTest_Click(object sender, EventArgs e)
        {
            System.Threading.Thread.Sleep(5000);
            lblMessage.Text = "You clicked the button";
        }
    }


Web Part Class Library Base Class:

public class WebPartBase : Microsoft.SharePoint.WebPartPages.WebPart
    {
        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);
            ScriptManager sm = ScriptManager.GetCurrent(this.Page);
            if (sm == null)
            {
                ScriptManager scriptHandler = new ScriptManager();
                scriptHandler.ID = "scriptHandler";
                scriptHandler.EnablePartialRendering = true;
               
                this.Page.Form.Controls.AddAt(0, scriptHandler);
               
            }
        }

        protected override void Render(HtmlTextWriter writer)
        {
            try
            {

                base.Render(writer);
                if (!ScriptManager.GetCurrent(this.Page).IsInAsyncPostBack)
                {
                    string script = "";
                    script = @"
                        var ITEMLISTINGBUTTONID;
                        with(Sys.WebForms.PageRequestManager.getInstance()){
                            add_beginRequest(onBeginRequest);
                            add_endRequest(onEndRequest);
                        }
                        function onBeginRequest(sender, args){
                            ITEMLISTINGBUTTONID = args.get_postBackElement().id;
                            $get(ITEMLISTINGBUTTONID).parentElement.style.display = 'none';
                        }
                        function onEndRequest(sender, args){                          
                           $get(ITEMLISTINGBUTTONID).parentElement.style.display = '';
                        }
                        ";
                    this.Page.ClientScript.RegisterStartupScript(this.GetType(), "HideSimpleAJAXWebPartUDP", script, true);
                }
            }
            catch (Exception ex)
            {
                string message = ex.Message;
                throw ex;
            }
        }


    }


Web Part Class Library Web Part:

public class AjaxTestWebPart : WebPartBase
    {
        private WebControls.AjaxWebControl awc = null;
        protected override void CreateChildControls()
        {
            try
            {

                this.awc = (WebControls.AjaxWebControl)this.Page.LoadControl(@"~/usercontrols/AjaxWebControl.ascx");
                this.awc.ID = "ajaxWebControl1";

                this.Controls.Add(this.awc);


            }
            catch (Exception ex)
            {
                string message = ex.Message;
                throw ex;
            }

        }
    }


I've tried several different approaches to stop the button from disappearing/reappearing to no avail. Any help to solve this problem would be greatly appreciated.

Answer 1

Maybe you should check out my article it may help you:
http://home.kbworks.nl/blog/archive/2009/10/02/sharepoint-ajax-web-part-and-timer-problem.aspx

kind regards,

Paul keijzers

---

Check my website http://www.kbworks.nl or follow me on @KbWorks be sure to Check my KbWorks blog

Answer 2

I see you have injected the code in your control.

This might very likely the cause of the problem. This is a code compatibility problem.
You can try upgrade to IE8 to see whether the problem is solved. IE8's HTML engine is better than its predecessors.

Be sure to debug it in IE with Download details: Internet Explorer Developer Toolbar

Be sure to check:
Microsoft Releases JavaScript Compatibility Study for IE, Firefox, Opera, and Safari (http://www.infoq.com/news/2007/10/JavaScript-Compatibility)

---

Keep It Simple and Stupid.

Answer 3

Thanks for the responses....

Unfortunately, upgrading IE is not an option; this web part is going to be shipped to a number of different clients and we cannot guarantee which browser they will be using nor can we only support IE 8.  Nonetheless, I was able to resolve my issue by discontinuing my use of ASP.NET ajax.  Originally I switched to MagicAjax which resolved this issue but created some others (due to script collisions), so ultimately I ended up using JQuery which works perfectly.