views:

398

answers:

3

I am using BlockUI to show a modal. Within the blocked modal I have an update panel. Within the update panel I have a textbox and a button that submits the content back to the server. Everything works fine up to this point (the blockUI is called, the modal appears, and the button performs the postback). However, when the button's click event is fired the value for the textbox is consistently empty even if text was entered. When the update panel updates the textbox shows up blank. It appears that this may be some sort of viewstate issue and I haven't turned off viewstate.

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

<div id="divTest" style="display: none;">
<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>

SERVER-SIDE:

protected void cmdTest_Click(object sender, EventArgs e)

{ string x = txtTestVS.Text; }

String "x" always equal "".

A: 

Should your first line of code be this instead:

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

or

<a href="javascript:$.blockUI({ message: $('#divTest').text() });">SHOW MODAL</a>
WVDominick
Nope, that line of code is simply telling BlockUI to modal the div. It's not retrieving a value or text.
Chris
Gotcha. I don't use the plugin, but it seems logical that it's asking for the actual message to display.
WVDominick
+1  A: 

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 <body> 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.

Nick Craver
Thanks! I actually had modified this a while back but then upgraded the script so it lost the changes. Works great now!
Chris
@Chris - Great! glad you're up and running again
Nick Craver
A: 

Make sure all the contents you wnat to update are inside update panel

Souvik