jquery-ui-dialogdotnetnuke-5

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


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


Solution

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