Opening a new page with Jquery mobile overlay[Answered] RSS

2 replies

Last post Jul 29, 2020 04:55 PM by anjaliagarwal5@yahoo.com

‹ Previous Thread|Next Thread ›

Shortcuts

anjaliagarwa...

Member

476 Points

1184 Posts

Opening a new page with Jquery mobile overlay

Jul 27, 2020 10:55 PM|anjaliagarwal5@yahoo.com|LINK

I am using a Jquery overlay panel. I want to open a new window when a user clicks on the panel button. Right now, I am writing the code for the content inside the panel inside the same page where the panel is. I want to open a new window ( new web form) when user clicks on the panel so that the content of the panel is in new webform. below is my code:

<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>
              <body>
      <div data-role = "page" id = "page1">
         <div data-role = "panel" id = "panel1" data-display="overlay" data-position="right" >
            <asp:RadioButton ID="rdbEng" runat="server" Text="English" GroupName="lang"   />
             <asp:RadioButton ID="rdbspan" runat="server" Text="Español" GroupName="lang"  />
              <asp:Button runat="server" Text="Submit" OnClick="Submit_Click"   />
         </div>
         
     
         
         <div data-role  =  "main" class  =  "ui-content">
            <p>Click on the button to open Panel.</p>
            <a href = "#panel1" class = "ui-btn ui-btn-inline">Open Panel</a>
         </div>
         
        
      </div>
   </body>

I want the code between these div tags to be open in new web form.

<div data-role = "panel" id = "panel1" data-display="overlay" data-position="right" >
             <asp:RadioButton ID="rd1" runat="server" Text="test1" />
             <asp:RadioButton ID="RadioButton1" runat="server" Text="test2" />
             <asp:Button ID="su" runat="server" Text="submit" OnClick="btnsubmit" />

and when I close the panel then I want my parent window to be refreshed.

How can I achieve this.

Sean Fang

Participant

1510 Points

454 Posts

Re: Opening a new page with Jquery mobile overlay

Jul 28, 2020 03:47 AM|Sean Fang|LINK

Hi anjaliagarwal5@yahoo.com,

The key is to use below js function:

window.open('your_url.aspx','_blank'); -- to open new web form
window.opener.location.reload(true); -- to reload the original page
window.close(); -- to close the new window

However, in webform, you might need to pass the value so that I handled the js function from code behind.

More details, you could refer to below codes:

JqueryNewWindowCallback.aspx

<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">
        <script>
            function openNewWindow() {
                window.open("/JqueryNewWindowCallback1", "Choose Language", "width=400,height=400,scrollbars=no");
            }
        </script>
        <div>
            <div data-role="main" class="ui-content">
                <p>Click on the button to open Panel.</p>
                 <a href="javascript:openNewWindow()" class = "ui-btn ui-btn-inline">Open Panel</a>
                
                <label runat="server" id="displayLabel"></label>
            </div>
        </div>
    </form>

JqueryNewWindowCallback.aspx Code behind:

protected void Page_Load(object sender, EventArgs e)
        {
            if(Session["Language"] != null)
            {
                displayLabel.InnerText = "You have chosen the language: " +  Session["Language"].ToString();
            }
        }

        protected void OpenPanel_Click(object sender, EventArgs e)
        {
            ScriptManager.RegisterStartupScript(this, 
                typeof(Page),
                "OpenWindow", 
                "window.open('JqueryNewWindowCallback1.aspx','_blank');", 
                true);
        }

JqueryNewWindowCallback1.aspx

<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" />
            <asp:Button ID="su" runat="server" Text="submit" OnClick="su_Click"/>
        </div>
    </form>

JqueryNewWindowCallback1.aspx Code behind:

 protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void su_Click(object sender, EventArgs e)
        {
            var selectedRadioButton = form1.Controls.OfType<RadioButton>().FirstOrDefault(rb => rb.GroupName == "lang" && rb.Checked);
            if(selectedRadioButton != null)
            {
                Session["Language"] = selectedRadioButton.Text;
            }
            
             


            ScriptManager.RegisterStartupScript(this,
                typeof(Page),
                "refreshParent",
                @"window.opener.location.reload(true);",
                true);
            ScriptManager.RegisterStartupScript(this,
                typeof(Page),
                "CloseWindow",
                @"window.close();",
                true);
        }

Demo:

Hope this can help you.

Best regards,

Sean

- Reply
anjaliagarwa...
Member

476 Points

1184 Posts

Re: Opening a new page with Jquery mobile overlay

Jul 29, 2020 04:55 PM|anjaliagarwal5@yahoo.com|LINK

our users blocked there pop up window. Is it possible to call the aspx page any other way?

‹ Previous Thread|Next Thread ›