Geeks With Blogs
Łukasz Kuryło's blog

I had recently a very interesting problem. I have a single button on my page, which opens a jquery ui dialog with other page containing single textbox control. After pressing the Ok button, using web service the textbox value is sending to the server and a label control on the main page is updating and the update panel containing this label is refreshing. Vary simple solution. Maybe too simple, because I have lost a few hours to investigate, why after pressing the Ok button, full postback occurs and after reload, the page containing the textbox control is loaded not the main page.

First let's look at the code:

main page:
<asp:content contentplaceholderid="MainContent" runat="server" id="BodyContent">     
<asp:button text="Button" runat="server" id="Button1"></asp:button>     
<asp:scriptmanager runat="server" id="ScriptManager1">     
</asp:scriptmanager>     
<asp:updatepanel runat="server" childrenastriggers="true" updatemode="Conditional" 
id="UpdatePanel1">     
<contenttemplate>         
<asp:label text="Label" runat="server" id="Label1">
</asp:label>     
</contenttemplate>     
</asp:updatepanel>     
<div id="container">&nbsp;</div>     <script type="text/javascript">
        $('#MainContent_Button1').bind('click', function ()
        {
            $('#container').load('WebForm1.aspx', function ()
            {
                $(this).dialog({
                    "modal": true,
                    "width": 200,
                    "height": 100,
                    "resizable": true,
                    "buttons": {
                        "Ok": function ()
                        {
                            var t = $('#TextBox1').val();
                            $.ajax({
                                url: 'WebService1.asmx/GetValue',
                                data: "text=" + t,
                                type: 'POST',
                                success: function ()
                                {
                                    __doPostBack('MainContent_UpdatePanel1', '')
                                }
                            });
                            $(this).dialog('destroy');
                        }
                    }
                });

            }); return false;
        });
    </script> </asp:content>
public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (IsPostBack)
            {
                Label1.Text = Globals.Value;
            }
        }
    }
public static class Globals
{
    public static string Value { set; get; }
}

web service:
 [System.Web.Script.Services.ScriptService]
    public class WebService1 : System.Web.Services.WebService
    {
        [WebMethod]
        public void GetValue(string text)
        {
            Globals.Value = text;
        }
    }

and the WebForm1:
<body>
    <form id="form3" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    </div>
    </form>
</body>
 public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            TextBox1.Focus();
        }
    }

As you an see, nothing special.

So where is the problem in this code?

 

Everytime when I presssed the button, I drew attention that, in firebug together with my page are loading a web resources files containing stuff for the web forms:

 Some time later I have found a __EVENTTARGET for that page. What is this? So this is a hidden field generated when e.g. some control has a AutoPostBack property set to true - www.dotnetspider.com/resources/189-AutoPostBack-What-How-works.aspx

It is using by __doPostBack function, which is responsile for refreshing the update panel. The problem is that, for the main page there is a __EVENTTARGET definied too.

 

As you can see in the listing, no one control has the AutoPostBack property.

So the only option was to find, what needed to have the possibility to change the textbox control on the WebForm1 page. In this example it's easy to tell that, it could be only the TextBox1.Focus() line in code behind file.

And really, after I commented this line, everything is working as I expected :)

If the focus is required, the jquery can do the work for us: $('#TextBox1').focus().

Posted on Wednesday, June 1, 2011 3:30 AM ASP.NET , jQuery | Back to top


Comments on this post: Problem with __doPostBack and second __EVENTTARGET

Comments are closed.
Comments have been closed on this topic.
Copyright © Łukasz Kuryło | Powered by: GeeksWithBlogs.net