asp.netjquery-mobilejquery-mobile-panel

closing the Jquery mobile panel on submit button


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>
</a>

<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.


Solution

  • First you need to prevent postback to server, in order to do that set AutoPostBack="false" to RadioButton and you can change asp:Button to input.

    Then according to JQuery Mobile Panel:

    A panel can also be closed by calling the panel's close method directly.

    So this should work:

    <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">
        <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" />
        <input type="button" onclick="ClosePanel();" name="Submit" value="Submit" />
    </div>
    
    <script type="text/javascript">
        function ClosePanel() {
            $("#panel2").panel("close");
        }
    </script>