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!!

Answer 1

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") %>'