locked
closing the Jquery mobile panel on submit button RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User351619809 posted

    I have a jquery mobile panel like so:

    <a href="#panel2"  class="ss-header-actions-language">
    <span class="ss-header-labels" id="ss-general-label">Language</span>
    <div data-role = "panel" id = "panel2" data-display="overlay" data-position="right" data-swipe-close="false" >
            
                     <asp:RadioButton ID="rdbEng1" AutoPostBack="true"   runat="server" Text="English"  GroupName="lang"   />
                      <asp:RadioButton ID="rdbspan1"  AutoPostBack="true"   runat="server" Text="Español"  GroupName="lang"   />
                      <asp:Button runat="server" Text="Submit" OnClick="Submit_Click"   />
        </div>

    I want the panel to close when the submit button is clicked. Right now, panel closes when I select any radio button inside the panel. I want the panel to stay open if the Radio button is clicked, but as soon as I click on submit button, I want the panel to close.

    How can I achieve that. Any help will be highly appreciated.

    Wednesday, July 29, 2020 3:14 AM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-939850651 posted

    Hi anjaliagarwal5,

    The cause of the problem is that the radio button will cause the page to post back, you need to set the attribute AutoPostBack="false".

    I think you might want to achieve something like this:

    Page code:

<head runat="server">
    <link href="Content/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server" data-ajax="false">
        <a href="#panel2" class="ss-header-actions-language">
            <span class="ss-header-labels" id="ss-general-label">Language</span>
        </a>
        <div data-role="panel" id="panel2" data-display="overlay" data-position="right" data-swipe-close="false" runat="server">
            <asp:RadioButton ID="rdbEng1" AutoPostBack="false" runat="server" Text="English" GroupName="lang" />
            <asp:RadioButton ID="rdbspan1" AutoPostBack="false" runat="server" Text="Español" GroupName="lang" />
            <asp:Button runat="server" Text="Submit" OnClick="Submit_Click" />
        </div>
    </form>
</body>
<script src="Scripts/jquery-1.11.0.min.js"></script>
<script src="Scripts/jquery.mobile-1.4.5.min.js"></script>
<script>
    $('#ss-general-label').on('click', function () {
        $('#panel2').css('display', 'block');
    });
</script>
    protected void Submit_Click(object sender, EventArgs e)
        {
            //for test 
            if (rdbEng1.Checked) {
                Response.Write("Language now is English");
            }
            if (rdbspan1.Checked)
            {
                Response.Write("Language now is Español");
            }

            panel2.Style.Add("display", "none");
        }

    Result:

    Best regards,

    Xudong Peng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, July 29, 2020 5:50 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-939850651 posted

    Hi anjaliagarwal5,

    If you want to set AutoPostBack = true, I think you could use the update panel control to achieve.

    But this will also cause its style to be lost due to partial postbacks, so the implementation effect may not be what you expect.

    Something like this:

    <head runat="server">
    <link href="Content/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
    <title></title>
</head>
<body>
    <form id="form2" runat="server" data-ajax="false">
        <a href="#panel2" class="ss-header-actions-language">
            <span class="ss-header-labels" id="ss-general-label">Language</span>
        </a>
        <asp:ScriptManager runat="server"></asp:ScriptManager>
        <div data-role="panel" id="Div1" data-display="overlay" data-position="right" data-swipe-close="false" runat="server">
            <asp:UpdatePanel ID="updatePanel2" runat="server">
                <ContentTemplate>
                    <asp:RadioButton ID="RadioButton1" AutoPostBack="true" runat="server" Text="English" GroupName="lang" />
                    <asp:RadioButton ID="RadioButton2" AutoPostBack="true" runat="server" Text="Español" GroupName="lang" />
                </ContentTemplate>
            </asp:UpdatePanel>
            <asp:Button runat="server" ID="Button1" Text="Submit" OnClick="Submit_Click" />
        </div>
    </form>
</body>
<script src="Scripts/jquery-1.11.0.min.js"></script>
<script src="Scripts/jquery.mobile-1.4.5.min.js"></script>
<script>
    $('#ss-general-label').on('click', function () {
        $('#panel2').css('display', 'block');
    });
</script>

    Result:

    So I recommend you to use the previous solution.

    Best regards,

    Xudong Peng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 30, 2020 4:05 AM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-939850651 posted

    Hi anjaliagarwal5,

    If you just want to close the panel when you click the button, I think you can try the following two solutions:

    1. Set the Visible property to false
    2. Add style display attribute to none

    Something like this:

    <div data-role="panel" id="panel2" data-display="overlay" data-position="right" data-swipe-close="false" runat="server">
            <asp:RadioButton ID="rdbEng1" AutoPostBack="true" runat="server" Text="English" GroupName="lang" />
            <asp:RadioButton ID="rdbspan1" AutoPostBack="true" runat="server" Text="Español" GroupName="lang" />
            <asp:Button runat="server" Text="Submit" OnClick="Submit_Click" />
        </div>
    protected void Submit_Click(object sender, EventArgs e)
        {
            panel2.Style.Add("display","none");
            //panel2.Visible = false;
        }

    I recommend the second solution, which can display the panel again for selection.

    Best regards,

    Xudong Peng 

    Wednesday, July 29, 2020 4:02 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User351619809 posted

    The panel is closing when I select a radio button, I want to prevent that too because as soon as users will select a radio button, panel will close.

    Wednesday, July 29, 2020 4:30 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-939850651 posted

    Hi anjaliagarwal5,

    The cause of the problem is that the radio button will cause the page to post back, you need to set the attribute AutoPostBack="false".

    I think you might want to achieve something like this:

    Page code:

<head runat="server">
    <link href="Content/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server" data-ajax="false">
        <a href="#panel2" class="ss-header-actions-language">
            <span class="ss-header-labels" id="ss-general-label">Language</span>
        </a>
        <div data-role="panel" id="panel2" data-display="overlay" data-position="right" data-swipe-close="false" runat="server">
            <asp:RadioButton ID="rdbEng1" AutoPostBack="false" runat="server" Text="English" GroupName="lang" />
            <asp:RadioButton ID="rdbspan1" AutoPostBack="false" runat="server" Text="Español" GroupName="lang" />
            <asp:Button runat="server" Text="Submit" OnClick="Submit_Click" />
        </div>
    </form>
</body>
<script src="Scripts/jquery-1.11.0.min.js"></script>
<script src="Scripts/jquery.mobile-1.4.5.min.js"></script>
<script>
    $('#ss-general-label').on('click', function () {
        $('#panel2').css('display', 'block');
    });
</script>
    protected void Submit_Click(object sender, EventArgs e)
        {
            //for test 
            if (rdbEng1.Checked) {
                Response.Write("Language now is English");
            }
            if (rdbspan1.Checked)
            {
                Response.Write("Language now is Español");
            }

            panel2.Style.Add("display", "none");
        }

    Result:

    Best regards,

    Xudong Peng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, July 29, 2020 5:50 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User351619809 posted

    Is it possible to achieve this with autpostback=true for Radio button

    Wednesday, July 29, 2020 2:01 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-939850651 posted

    Hi anjaliagarwal5,

    If you want to set AutoPostBack = true, I think you could use the update panel control to achieve.

    But this will also cause its style to be lost due to partial postbacks, so the implementation effect may not be what you expect.

    Something like this:

    <head runat="server">
    <link href="Content/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
    <title></title>
</head>
<body>
    <form id="form2" runat="server" data-ajax="false">
        <a href="#panel2" class="ss-header-actions-language">
            <span class="ss-header-labels" id="ss-general-label">Language</span>
        </a>
        <asp:ScriptManager runat="server"></asp:ScriptManager>
        <div data-role="panel" id="Div1" data-display="overlay" data-position="right" data-swipe-close="false" runat="server">
            <asp:UpdatePanel ID="updatePanel2" runat="server">
                <ContentTemplate>
                    <asp:RadioButton ID="RadioButton1" AutoPostBack="true" runat="server" Text="English" GroupName="lang" />
                    <asp:RadioButton ID="RadioButton2" AutoPostBack="true" runat="server" Text="Español" GroupName="lang" />
                </ContentTemplate>
            </asp:UpdatePanel>
            <asp:Button runat="server" ID="Button1" Text="Submit" OnClick="Submit_Click" />
        </div>
    </form>
</body>
<script src="Scripts/jquery-1.11.0.min.js"></script>
<script src="Scripts/jquery.mobile-1.4.5.min.js"></script>
<script>
    $('#ss-general-label').on('click', function () {
        $('#panel2').css('display', 'block');
    });
</script>

    Result:

    So I recommend you to use the previous solution.

    Best regards,

    Xudong Peng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 30, 2020 4:05 AM