在 jquery 移动面板中打开一个新的 Web 表单

Posted 2023-05-09

技术标签:

【中文标题】在 jquery 移动面板中打开一个新的 Web 表单【英文标题】：opening a new web form in a jquery mobile panel 【发布时间】：2020-11-19 06:29:12 【问题描述】：

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

<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 事件。

【问题讨论】：

任何帮助或提示将不胜感激 【参考方案1】：

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

所以，jQuery load 需要正确的选择器：

var languageUrl = "WebForm2.aspx #form1";

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

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

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

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

【讨论】：

以上是关于在 jquery 移动面板中打开一个新的 Web 表单的主要内容，如果未能解决你的问题，请参考以下文章