Make Popup Widget Compatible with .Net Web Forms

sandygettings commented 7 years ago

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>

sandygettings commented 7 years ago

Hi! Can I ask why this was closed? Fixed, or...?

dmethvin commented 7 years ago

This looks like it was a request for programming help and not a bug report for learn.jquery.com.

sandygettings commented 7 years ago

Actually, this was a bug or feature request, depending how you look at it. Is this the wrong place?

Thx,

— Sandy

On Sep 12, 2017, at 3:01 PM, Dave Methvin notifications@github.com wrote:

This looks like it was a request for programming help and not a but report for learn.jquery.com.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/jquery/learn.jquery.com/issues/759#issuecomment-328949319, or mute the thread https://github.com/notifications/unsubscribe-auth/AKy6tDv6kiayawIjQbiAPc_f75agmQQBks5shtT3gaJpZM4OIsf_.

dmethvin commented 7 years ago

To be honest I can't tell what is being asked for based on the description. However, I am pretty certain that it is not something to be addressed here. If this is something specific to Microsoft .NET then someone in that community might be interested.

jquery / learn.jquery.com

Make Popup Widget Compatible with .Net Web Forms #759