Open a New Jquery UI Dialog With Links in Existing Dialog

Question

I am attempting to open a dialog from an existing dialog after clicking on a link in the existing dialog. I have been unable to get the new dialog to pop up. Below is the JavaScript:

$(function() {
$("#homepage-description").dialog({
    autoOpen: false,
            modal: true,
    buttons: {
        'Sign Up': function() {
            $(this).dialog('close', function() {
                $(this).dialog('close');
                $("#signup-description").dialog("open");
            });

        },

        'Log In': function() {
            $(this).dialog('close');
            $("login-description").dialog("open");
        }
    }
}).dialog("widget").find(".ui-dialog-buttonset button")
.eq(0).addClass("btn btn-large").attr('id', 'home-sign').end()
.eq(1).addClass("btn btn-large").attr('id', 'home-log').end();

$("#welcome-link").click(function() {
    $("#homepage-description").dialog("open").load("/homepage/");
    return false;
});

$(".ui-dialog-titlebar-close").click(function() {
    $("#homepage-description").dialog("close");
});

$("#home-sign").click(function() {
    $("#signup-description").dialog("open").load("/sign-up/");
    return false;
});

$("#home-log").click(function() {
    $("#login-description").dialog("open").load("/login/");
    return false;
});

$(function() {
    $("#tos-description").dialog({
        autoOpen: false,
                modal: true
    });

    $("#home-tos").click(function( event ) {
                    event.preventDefault();
        $("#tos-description").dialog("open").load("/tos/");
                return false;
    });

    $(".ui-dialog-titlebar-close").click(function() {
        $("#tos-description").dialog("close");
    });
});

This is the html:

<div id="home-body">
        <p class="titles">Some Words Here</p>
        <div id="home-photo">
            <img src="{{ STATIC_URL }}img/frontimage.png">
        </div>
        <div id="home-list">
            <ol>
                <li class="flat-text flat-bold">Find</li>
                <li class="flat-text flat-bold">Download</li>
                <li class="flat-text flat-bold">Go</li>
                <li class="flat-text flat-bold">Come back</li>
            </ol>
        </div>
        <div id="home-buttons">
        </div>
        <div id="flat-links">
            <a id="home-tos" href class="flat-text flat-bold">Terms of use</a> - <a id="home-privacy" href class="flat-text flat-bold">Privacy Policy</a> - <a id="home-site" href class="flat-text flat-bold">Sitemap</a>
                            <div id="tos-description"></div>
        </div>

The ideal situation is to click on one of the links at the bottom of the html and have new dialog open. I have been unable to accomplish this and I am uncertain of what to do at this point. I have been able to get links to open a dialog, but the same approach fails when I attempt to open a new dialog from an existing one while clicking on links (I have been able to get a new dialog to open from an existing dialog when using buttons however.)

Answer 1

Actually this is possible and I just did it a few days ago.

Can you make sure your click event is bind correctly in your dialog? Maybe put an alert on click and see if it actually works?

Is this where you are opening the new dialog?

$("#home-tos").click(function( event ) {
                event.preventDefault();
    $("#tos-description").dialog("open").load("/tos/");
            return false;
});

Can you just test something like this:

$("#home-tos").live("click", function() {
             alert("click worked");
});

There's also an open method of dialog, where you could do this:

   $("dialog-div").dialog({ 
    autoOpen: false,
    open: function() {
            $(this).find("yourbutton")click(function() {
                 alert("click worked");
           });
    }
});

jsfiddle: http://jsfiddle.net/XkwyG/1/

Answer 2

Thanks to @Rafi W. for leading me down the right path. The click event was not binding so I did some more looking around and I ended up with the following JS:

$(function() {
    var linkPop = {
        autoOpen: false,
                modal: true,
    };

    $(document).on("click", "#home-tos", function( event ) {
        event.preventDefault();
        $("#tos-description").dialog(linkPop).dialog("open").load("/tos/");
        return false;
    });

    $(".ui-dialog-titlebar-close").click(function() {
        $("#tos-description").dialog("close");
    });
});

This question also helped in getting to the ultimate result