How to Redirect to Home Page Using JQuery-UI Dialog?

Question

I'm using the following JQuery block in my DotNetNuke module:

jquery(document).ready(function (){
      $( "#dialog:ui-dialog").dialog("destroy");
      $( "#dialog-message").dialog({
        modal: true,
        buttons: {
            Ok: function(){
                $( this ).dialog("close");
                }
            }
        });
});
</script>
<div id="dialog-message" title="Registration Confirmed">

I'm not sure how to redirect the user to the home page when they click the Ok button? Also, how do I wire up the dialog-message DIV to only fire when my ASP:Button is clicked?

Thanks much!!

Josh Mein · Accepted Answer · 2012-02-10T21:49:02.033

You can put an OnClientClick on your Button and call a function that will show your modal. When the ok button is clicked you can change the window.location to the path of your homepage.

HTML

<asp:Button runat="server" ID="btn_ShowModal" OnClientClick="showModal(); return false;" />

Javascript

function showModal()
{
    $( "#dialog-message").dialog({
        modal: true,
        buttons: {
            Ok: function(){
                $( this ).dialog("close");
                window.location = "pathToHomepage";
            }
        }
    });
}

Edit There are two types of paths that can be used in javascript and in web development in general: relative paths and absolute paths.

Relative paths: start from the current directory and you access the desired location from there using '/' to go forward a directory and '../' to go backward

Absolute paths: the full url to the desired location

You can find a more thorough description here

'~/' is a sever side "shortcut" that unfortunately does not work on the client side without using something like this.ResolveClientUrl.

'<%= this.ResolveClientUrl("~/default.aspx") %>'

May I use ~/default.aspx as pathToHomepage? Or is it advisable to put in the full URL? Thanks:) — SidC, Feb 09 '12 at 21:41
Yes, this worked perfectly. Thanks for taking the time to respond. Much appreciated:) — SidC, Feb 16 '12 at 19:14

score 0 · Answer 2 · answered Jul 26 '21 at 12:40

<script type="text/javascript">
    function ShowPopup(message) {
        $(function () {
            $("#dialog").html(message);
            $("#dialog").dialog({
                title: "Alert",
                buttons: {
                    Close: function () {
                        $(this).dialog('close');
                        window.location = "home.aspx";
                    }
                },
                modal: true
            });
        });
    };
</script>

client side

         string message = "Profile Updated!!.";
         ClientScript.RegisterStartupScript(this.GetType(), "Popup", "ShowPopup('" + message + "');", true);

How to Redirect to Home Page Using JQuery-UI Dialog?

2 Answers2