locked
Opening a new page with Jquery mobile overlay RRS feed

  • Question

  • User351619809 posted

    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.

    Monday, July 27, 2020 10:55 PM

Answers

  • User-1330468790 posted

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 28, 2020 3:47 AM

All replies

  • User-1330468790 posted

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 28, 2020 3:47 AM
  • User351619809 posted

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

    Wednesday, July 29, 2020 4:55 PM