在 jquery 移动面板中打开新的网络表单

Question

我正在尝试在 Jquery 移动面板中打开一个新的网络表单。我正在尝试在 webform3.aspx 上打开一个面板并尝试从 webform3.aspx 调用一个名为 webform2.aspx 的新网络表单。下面是我的代码：

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

在 WebForm2.aspx，我只有两个简单的单选按钮和一个提交按钮，下面是我的代码：

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

webform3.aspx 上的面板工作正常，单选按钮也显示良好，但是当我单击提交按钮时，没有任何反应。代码不会转到代码后面。提交按钮背后的代码是这样的：

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";


            }
        }

下面是我看到的屏幕截图，点击提交按钮没有任何反应。我希望控件在单击提交按钮时进入 Submit_Click 事件。

Answer 1

JQM 面板需要一些标记，而不是整个 HTML 页面。

因此，jQuery load 需要正确的选择器：

var languageUrl = "WebForm2.aspx #form1";

这是 jQuery 文档：jQuery .load()。

我坚信您还需要仔细检查您的页面标记以及您如何调用面板的增强功能。

避免在 WebForm2.aspx 中使用两次 id form1，并且仅使用 content[=33] 填充您的面板=] 您需要的（即单选按钮）。

此外，我相信您的 JavaScript 代码适用于旧的 JQM 版本。对于 JQM 1.4.5 $("#languagePanelInternal").enhanceWithin(); 就足够了。

在 jquery 移动面板中打开新的网络表单

opening a new web form in a jquery mobile panel

jquery

asp.net

jquery-mobile

jquery-mobile-panel