jQuery Mobile Compatibility with .Net - Move popup widget's DIV to the inside the form tag

[sandygettings]

We’re using jQuery Mobile and .Net web forms for constructing mobile web pages. We’re using the latest compatible versions, jQuery 2.1.4 and jQuery Mobile 1.4.5. I’ve discovered a case where .Net web controls lose their values if they are inside a popup widget. Take the following example:

Say a mobile page contains a jQuery popup DIV. Inside the popup, there are two .Net web controls, a TextBox and a LinkButton. Open the popup, type something into the textbox, then click the button. The popup closes as expected. But in the server-side handler during postback, the text in the TextBox is discarded and restored to its original text, if any.

This behavior prevents using popups for common tasks in an ASP.Net environment, like asking the user for options and such. The same problem happens not just with TextBox controls, but DropDownList and other .Net controls as well. By inspecting the page while it’s running, I can see that JQM places the popup outside of the FORM element. My guess is that the page’s ViewState is being lost by the popup widget, because the widget and its .Net controls are outside the FORM element, but the ViewState hidden element is inside the FORM.

I tested a workaround by adding the code below to the page. By moving the popup widget inside the FORM element, the pages work as expected. While this workaround seems to work in our earlier testing, it’s obviously a fragile solution that may break if the implementation of the popup widget changes in the future.

    <script type="text/javascript">

        $(document).on('pagecreate', function () {
            $('form').append($('#optionsPopup-popup'));
        });

    </script>

All other usage of .Net controls with jQuery mobile in the site work great. It’s just that within popups, the value of controls is lost. Can you consider moving the popup DIV inside the FORM element?

Here’s some additional background for those not familiar with .Net: In ASP.Net web pages, each time the user interacts with a control, the web page basically executes a “submit” back to the server (a “postback”). Postbacks mostly happen when buttons are clicked, but other controls can optionally do so, such as when a drop-down list is selected, or a text field is changed.

When the page is submitted via a postback, the values of all fields are available to the server-side code via the usual POST. The server may do something with this information, and the page is sent back to the user and displayed again. The state of each control is passed back and forth in a hidden field called the “ViewState.” This way, when the page is redisplayed, the user sees each control restored rather than starting all over each time with default values. This description is way oversimplified. If you want to know more, just ask Google or start here: https://msdn.microsoft.com/en-us/library/ms972976.aspx

I only mention all this because it’s pertinent to the original issue. In ASP.Net, all controls (including the ViewState’s hidden field) are stored inside the FORM section. The value of any controls outside of the FORM are not saved in the ViewState. So, when the popup widget moves the controls in the popup’s DIV from inside to outside the FORM, it breaks the ASP.Net model.

jQuery Mobile works great with ASP.Net, with just a few restrictions. We have a production application that uses the two together, and we don’t have any complaints – JQM is a great way for ASP.Net to work with mobile devices.