JQuery BlockUI with UpdatePanel Viewstate Issue

Question

I have an update panel within a div that I modal using the JQuery plugin BlockUI. Inside the UpdatePanel is a textbox and a button. When I enter something in the textbox and click the button I am unable to retrieve the text in the textbox. When I debug it shows the textbox having no value.

<asp:UpdatePanel ID="upTest" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
        <div id="divTest">
            <asp:TextBox ID="txtTestVS" runat="server" /><br />
            <asp:Button ID="cmdTest" Text="TEST" OnClick="cmdTest_Click" UseSubmitBehavior="false" runat="server" />
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

SERVER-SIDE:

protected void cmdTest_Click(object sender, EventArgs e)
{
    string x = txtTestVS.Text;
}

This should clarify things. Here are the total contents of the page.

<a href="javascript:$.blockUI({ message: $('#divTest') });">SHOW MODAL</a>

<div id="divTest">
    <asp:UpdatePanel ID="upTest" UpdateMode="Conditional" runat="server">
        <ContentTemplate>
            <asp:TextBox ID="txtTestVS" runat="server" /><br />
            <asp:Button ID="cmdTest" Text="TEST" OnClick="cmdTest_Click" UseSubmitBehavior="false" runat="server" />
        </ContentTemplate>
    </asp:UpdatePanel>
</div>

just need some clarification: are you trying to show the contents of the div (id = "divTest") in the blockUI modal window ? or , do you want to block your UI when you click on Button cmdTest ? — ram, Feb 15 '10 at 23:13
I am trying to show the contents of the div in the modal. So there's another button on the page that calls this: $.blockUI({ message: $('#divTest') }); — Hungry Beast, Feb 15 '10 at 23:23

Hungry Beast · Accepted Answer · 2019-12-18T19:36:18.533

This is a common problem with dialog plug-ins. The problem is when content is put in the blockUI container, it's appended to the element, and no longer in the form being submitted to the server. To solve this you need to edit the blockUI code a bit:

Here's the source: http://github.com/malsup/blockui/blob/master/jquery.blockUI.js

Change this: Line 262:
var layers = [lyr1,lyr2,lyr3], $par = full ? $('body') : $(el);
to:
var layers = [lyr1,lyr2,lyr3], $par = full ? $('form') : $(el);

and this:

Line 382:
els = $('body').children().filter('.blockUI').add('body > .blockUI');
to:
els = $('form').children().filter('.blockUI').add('form > .blockUI');

That should get you going and the textbox values coming through.

(Response courtesy of Nick Craver https://stackoverflow.com/users/13249/nick-craver)

This forum thread speaks about the same issue http://forum.jquery.com/topic/dialog-widget-forms-append-to-forms-when-applicable One user suggests `$('.ui-dialog').detach().appendTo('form');` — John K, Jan 07 '11 at 06:02

score 0 · Answer 2 · answered Feb 15 '10 at 23:16

If you are trying to use blockUI on a button within an update panel (i.e. you click the button within the update panel and the UI gets blocked), you need to handle it using PageRequestManager events

prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_beginRequest(function() {
            $.blockUI({ message: '<img  src="../../Content/images/Busy2.gif" />' });
        });

        prm.add_endRequest(function() {
            $.unblockUI();
        });

Or on a button click, if you want to display a modal window with this text box and a button, you can try something like this

I have created a new post as I realize my original did not explain my scenario very well. http://stackoverflow.com/questions/2269797/jquery-blockui-with-updatepanel-viewstate-issue — Hungry Beast, Feb 16 '10 at 00:02

JQuery BlockUI with UpdatePanel Viewstate Issue

2 Answers2