All geek questions in one place

JQuery BlockUI with UpdatePanel Viewstate problem

I use BlockUI to show modal. Inside a locked modal, I have an update panel. In the update panel, I have a text box and a button that sends the content back to the server. Everything works fine up to this point (the UI block is called, the modal appears, and the button performs a postback). However, when a button click event is fired, the value for the text field is permanently empty, even if the text was entered. When the update panel is updated, the text box appears blank. It looks like it might be some kind of problem in the view, and I did not turn off the 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:

 protected void cmdTest_Click(object sender, EventArgs e)

{line x = txtTestVS.Text; }

The string "x" is always equal to "".

+4
source share
4 answers

This is a common problem with dialog plugins, the problem is when the content is placed in the blockUI container, it is added to the <body> element and is no longer displayed in the form sent to the server. To solve this problem, you need to slightly modify the blockUI code:

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); var layers = [lyr1,lyr2,lyr3], $par = full ? $('body') : $(el);
to: var layers = [lyr1,lyr2,lyr3], $par = full ? $('form') : $(el); 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');

This should make you go and text box values ​​passing through.

+5
source

Problem

From my reading, here and elsewhere, obviously, the jQuery user interface (after the init dialog) moves your dialog element (along with its contents) outside the <form element and attaches it to the <body . The speculation is that the body is always present when the form is absent, and there may be some z-order advantages when using IE.

The problem is that all ASP.NET controls are required by Microsoft to be in the <form on the page to participate in the postback and work correctly, regardless of whether they are the actual HTML controls.

Solution (jQuery 1.4 +) *: programmatically move the dialog box inside the HTML form:

(There are other answers similar to this. This is the shortest I've seen taking only one line of code and not requiring changing the jQuery source code.)

With jQuery UI 1.8.7 (Stable, for jQuery 1.3.2+) I had success when ASP.NET controls supported PostBack behavior using the following "trick" derived from this forum thread :

 // As is customary, call $mydialog.dialog(..) to initialize it. // Init all your dialog boxes before continuing. // After init, TYPE THIS LINE to move all dialog boxes back into the form element $('.ui-dialog').detach().appendTo('form');

To use only one fix dialog box, use this line instead:

 $mydialog.closest('.ui-dialog').detach().appendTo('form');

where $ mydialog is a link to your dialog element using the jQuery -eg $('#mydiv') selector.

The reason the .ui-dialog class is used is because the jQuery user interface wraps your dialog element in an external div that has a ui type name for the class name, which is always in the outermost dialog element and is unique among all other names classes used throughout the dialog. This means that your actual dialogue is built not only for the html element that you specified to it, and you need to influence the entire dialogue.

After the init dialog, jQuery moves the constructed dialog outside the HTML form.
By inserting this line, you move everything back to the form, making ASP.NET happy.

detach The jQuery method cuts it out of the DOM, but supports all jQuery events and related data.
(* Since detach was introduced with jQuery 1.4, this solution is limited to this version and above. I heard that older versions of jQuery can have limited success using the clone and delete instead, although I have not tried this.)

appendTo The jQuery method inserts it into an html form.

This is what I understand. Hope this helps someone else.

+1
source

If instead there should be your first line of code:

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

or

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

Make sure that all the content you want to update is inside the update panel

0
source

Source: https://habr.com/ru/post/1301389/

More articles:


All Articles