jqueryasp.netjquery-mobilejquery-mobile-panel

opening a new web form in a jquery mobile panel

I am trying to open a new web form in a Jquery Mobile panel. I am trying to open a panel on webform3.aspx and trying to call a new web form called webform2.aspx from webform3.aspx. Below is my code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
      <title>Panel</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-1.11.0.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">

          <div id="languagePanel" class="ss-panel-language ui-panel ui-panel-position-right ui-panel-display-overlay ui-panel-closed ui-body-inherit ui-panel-fixed ui-panel-animate" data-role="panel" data-position="right" data-display="overlay" data-position-fixed="true">
           <div class="ui-panel-inner"><div id="languagePanelInternal" class="ss-panel-language-internal"></div></div>
        </div>
         

          <a href="#languagePanel" class="ss-header-actions-language ui-link">
              test
         </a>
         
        <script>

var languageUrl = "WebForm2.aspx";
            $("#languagePanel").on("panelbeforeopen", function () {
                $("#languagePanelInternal").load(languageUrl, function () {
                    $("#languagePanelInternal").trigger("create");
                    $("#languagePanel").trigger("updatelayout");
                    $.mobile.activePage.trigger("pagecreate");
                });
            });
        </script>
    

     
    </form>
</body>
</html>

on WebForm2.aspx, I just have two simple radio buttons and a submit button, below is my code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div >
            <asp:RadioButton ID="rdbEng" runat="server" Text="English" GroupName="lang"   />
             <asp:RadioButton ID="rdbspan" runat="server" Text="Español" GroupName="lang"  />
        </div>
        <div >
            <asp:Button runat="server" Text="Submit" OnClick="Submit_Click"   />
        </div>
        </div>
    </form>
</body>
</html>

Panel on webform3.aspx works fine and the radio button also displays well, but when I click on submit button, nothing happens. The code does not go to code behind. The code behind for submit button is like so:

protected void Submit_Click(object sender, EventArgs e)
        {

            if (rdbEng.Checked == true)
            {
                Session["language"] = "en-US";


            }
            else if (rdbspan.Checked == true)
            {
                Session["language"] = "es-MX";


            }
        }

Below is the screenshot of what I am seeing and clicking on submit button does not do anything. I want the control to go Submit_Click event when the submit button is clicked.

enter image description here

Solution

  • The JQM Panel is expecting some markup, not a whole HTML page.

    So, The jQuery load needs the correct selector for that:

    var languageUrl = "WebForm2.aspx #form1";

    Here is the jQuery documentation: jQuery .load().

    I strongly believe You need also to double-check Your page markup and how You are invoking the enhancement of the panel.

    Avoid to use twice the id form1 inside WebForm2.aspx, and fill Your panel just only with the content that You need (i.e. the radio buttons).

    Moreover, I believe Your JavaScript code is for an old JQM version. For JQM 1.4.5 $("#languagePanelInternal").enhanceWithin(); will suffice.