opening a new web form in a jquery mobile panel

Reply

Member

511 Points

opening a new web form in a jquery mobile panel

Jul 29, 2020 03:48 PM|anjaliagarwal5@yahoo.com|LINK

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

Reply

anjaliagarwa...

Member

511 Points

1273 Posts

Re: opening a new web form in a jquery mobile panel

Jul 29, 2020 05:18 PM|anjaliagarwal5@yahoo.com|LINK

any help on this will be highly appreciated.

Reply

bruce (sqlwo...

All-Star

58184 Points

15655 Posts

Re: opening a new web form in a jquery mobile panel

Jul 29, 2020 07:43 PM|bruce (sqlwork.com)|LINK

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/

bruce (sqlwork.com)

Reply

anjaliagarwa...

Member

511 Points

1273 Posts

Re: opening a new web form in a jquery mobile panel

Aug 01, 2020 08:24 PM|anjaliagarwal5@yahoo.com|LINK

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.

Reply

Sean Fang

Contributor

2870 Points

843 Posts

Re: opening a new web form in a jquery mobile panel

Aug 04, 2020 03:39 AM|Sean Fang|LINK

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

.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.

Reply

anjaliagarwa...

Member

511 Points

1273 Posts

Re: opening a new web form in a jquery mobile panel

Aug 04, 2020 04:48 PM|anjaliagarwal5@yahoo.com|LINK

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.

Reply

bruce (sqlwo...

All-Star

58184 Points

15655 Posts

Re: opening a new web form in a jquery mobile panel

Aug 05, 2020 02:47 AM|bruce (sqlwork.com)|LINK

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

bruce (sqlwork.com)

opening a new web form in a jquery mobile panel RSS

6 replies

Shortcuts

opening a new web form in a jquery mobile panel

Re: opening a new web form in a jquery mobile panel

Re: opening a new web form in a jquery mobile panel

Re: opening a new web form in a jquery mobile panel

Re: opening a new web form in a jquery mobile panel

Re: opening a new web form in a jquery mobile panel

Re: opening a new web form in a jquery mobile panel