Description
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 a .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.
<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?
Sample .aspx page:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestJQMPopup.aspx.cs" Inherits="AdaCareWeb.TestJQMPopup" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div data-ui-role="page">
<a href="#myPopup" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-mini" data-transition="pop">Open My Popup</a>
<div id="myPopup" data-role="popup" data-dismissible="false">
<asp:TextBox ID="MyTextBoxInsidePopup" runat="server" Text="original text"></asp:TextBox>
<br />
<asp:LinkButton ID="MyLinkButton" runat="server" data-role="button" data-mini="true" data-ajax="false" Text="Close the Popup" OnClick="MyButton_Click" CausesValidation="False">Close</asp:LinkButton>
</div>
Text after button clicked:<asp:TextBox ID="MyTextBoxAfterButtonClicked" runat="server"></asp:TextBox>
</div>
</form>
<script type="text/javascript">
$(document).on('pagecreate', function () {
// Uncomment line below to fix problem.
//$('form').append($('#myPopup-popup'));
});
</script>
</body>
</html>