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.)

Rafi W. · Accepted Answer · 2013-06-27T20:49:09.087

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/

edited Jun 27 '13 at 20:49

answered Jun 27 '13 at 20:00

Rafi W.

154
2
11

In answer to you first question, yes that is where I am opening the new dialog. I did test to see whether or not the click event is binding correctly and it is not. I used .on & .bind since I am using 1.9.1 & .live has been deprecated. Thank you for the testing suggestion. – TDL Jun 27 '13 at 20:10
Ok so we know it's the button event that's the problem. I created a jsfiddle, please take a look: http://jsfiddle.net/XkwyG/ – Rafi W. Jun 27 '13 at 20:37
Also, always try to use only one $(function() {}); You only need one for your whole script. – Rafi W. Jun 27 '13 at 20:39
Thank you very much. I found a solution as well, but I am marking yours as the answer since you lead me down the right path and your solution works as well. – TDL Jun 27 '13 at 20:44

score 0 · Answer 2 · edited May 23 '17 at 12:11

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

Open a New Jquery UI Dialog With Links in Existing Dialog

2 Answers2