locked
opening a new web form in a jquery mobile panel RRS feed

  • Question

  • User351619809 posted

     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. I don't want to use window.open

    enter image description here

    Wednesday, July 29, 2020 3:48 PM

All replies

  • User351619809 posted

    any help on this will be highly appreciated.

    Wednesday, July 29, 2020 5:18 PM
  • User-474980206 posted

    really ancient history. not sure why you would be using a dead project (no updates in 4 years, but you are using webforms).

    If I remember, jquery mobile renders the new page off-screen then uses a transform to display. you need to define the pages the way it expects. I don't see any [data-role="page"] on your mark-up, so the next page is empty. follow the documentation for defining pages:

    https://demos.jquerymobile.com/1.4.5/pages/

    Wednesday, July 29, 2020 7:43 PM
  • User351619809 posted

    I am very new to Jquery mobile. I edited my code, but I still don't see the new webform in the panel. below is my code for the main page and the page where I am trying to open the panel:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RadioWeb.aspx.cs" Inherits="TestLanguagePanel.RadioWeb" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>This is test </title>
          <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="radWeb" runat="server">
            <div data-role="page">
             <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">
                 <span style="margin-left:60%">test</span> 
             </a>
             
            <script>
    
                var languageUrl = "WebForm2.aspx";
                $("#languagePanel").on("panelbeforeopen", function () {
                    $("#languagePanelInternal").load(languageUrl, function () {
                        $("#languagePanelInternal").enhanceWithin();
                    });
                });
            </script>
                </div>
        </form>
    </body>
    </html>
    

    Below is the code for the page where I have the radio buttons:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="TestLanguagePanel.WebForm2" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
     
    
          <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 >
                <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>
           
        </form>
    </body>
    </html>
    

    any help will be higly appreciated.

    Saturday, August 1, 2020 8:24 PM
  • User-1330468790 posted

    Hi anjaliagarwal5@yahoo.com,

     

    I have tried your codes and I can see the new webform in the panel. However, one problem is that every time I click the button and the panel will popup and then disappear very quickly.

     

    In your codes, you load the new web form every time you open the panel using the event "panelbeforeopen". I use another event "panelcreate" and the problem is gone.

    You could refer to below codes:

    <div data-role="page">
                    <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">
                        <span style="margin-left: 60%">test</span>
                    </a>
                    <script>
    
                        var languageUrl = "WebForm2.aspx";
                        $("#languagePanel").on("panelcreate", function () {
                            $("#languagePanelInternal").load(languageUrl, function () {
    
                                $("#languagePanelInternal").enhanceWithin();
                            });
                        });
                    </script>
                </div>

    The WebForm2 is exactly the same as you posted.

     

    Moreover, if you want to apply the language options to every page, you could add the panel to master page. You are using web forms so that you should take advantage of the framework. It is not necessary to use jquery mobile in your project as you will still need to code more to handle the language option page's event.

     

    Hope this can help you.

    Best regards,

    Sean

    Tuesday, August 4, 2020 3:39 AM
  • User351619809 posted

    Hi Sean,

    Our business side wants the look and feel of this type of Panel and that's why I tried the JQM Panel. I used the modal window before, but they didnt like it.

    I tried the code and as soon as I click on the submit button. The entire panel expands and covers the original page. I want the panel to close too when the submit button is clicked. Below is the code. 

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RadioWeb.aspx.cs" Inherits="TestLanguagePanel.RadioWeb" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>This is test </title>
          <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="radWeb" runat="server">
          <div data-role="page">
                    <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">
                        <span style="margin-left: 60%">test</span>
                    </a>
                    <script>
    
                        var languageUrl = "WebForm2.aspx";
                        $("#languagePanel").on("panelcreate", function () {
                            $("#languagePanelInternal").load(languageUrl, function () {
    
                                $("#languagePanelInternal").enhanceWithin();
                            });
                        });
                    </script>
                </div>
        </form>
    </body>
    </html>
    

    and the webform2  form is like so:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="TestLanguagePanel.WebForm2" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
     
    
          <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 >
                <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>
           
        </form>
    </body>
    </html>
    

    any help will be greatly appreciated.

    Tuesday, August 4, 2020 4:48 PM
  • User-474980206 posted

    I still don’t understand why you are using (and learning) a deprecated and unsupported framework for a new project.

    Wednesday, August 5, 2020 2:47 AM