Skip to content

Make Popup Widget Compatible with .Net Web Forms #759

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
sandygettings opened this issue Jun 29, 2017 · 4 comments
Closed

Make Popup Widget Compatible with .Net Web Forms #759

sandygettings opened this issue Jun 29, 2017 · 4 comments

Comments

@sandygettings
Copy link

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
Copy link
Author

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

@dmethvin
Copy link
Member

dmethvin commented Sep 12, 2017 •
edited
Loading

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

@sandygettings
Copy link
Author

sandygettings commented Sep 12, 2017 via email

@dmethvin
Copy link
Member

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@dmethvin @sandygettings