jQuery dialog modal being called twice on click

Question

So... I have a site here...

The jQuery dialog is sending an ajax request to here.

There's an auto-popup when you arrive on the page. Please Dismiss that one.

When you click on this image...
enter image description here

which is associated with this function call...

$(function() {
    $("#compliance").dialog({
        autoOpen: true,
        modal: true,
        width: 750,
        height: 'auto',
        show: 'fade',
        hide: 'fade',
        position: {my: "center top", at:"center top", of: window },
        buttons: {
            "Dismiss": function() {
                $(this).dialog("close");
            }
        }
    });
    $(".dialogify").on("click", function(e) {
        e.preventDefault();
        $("#compliance").html("");
        $("#compliance").dialog("option", "title", "Loading...").dialog("open");
        $("#compliance").load(this.href, function() {
            $(this).dialog("option", "title", $(this).find("h1").text());
            $(this).find("h1").remove();
    });
    });
});

Or this one...
enter image description here

which is associated with this function...

$(function() {
    $("#switch").dialog({
        autoOpen: false,
        modal: true,
        width: 750,
        height: 'auto',
        show: 'fade',
        hide: 'fade',
        position: {my: "center top", at:"center top", of: window },
        buttons: {
            "Dismiss": function() {
                $(this).dialog("close");
            }
        }
    });
    $(".dialogify").on("click", function(e) {
        e.preventDefault();
        $("#switch").html("");
        $("#switch").dialog("option", "title", "Loading...").dialog("open");
        $("#switch").load(this.href, function() {
            $(this).dialog("option", "title", $(this).find("h1").text());
            $(this).find("h1").remove();
    });
    });
});

...a modal comes up. But it appears that two modals come up. The opaque background is darker than it should be. And, when you dismiss the first one, there's another one, as the background gets lighter.

Why is this? I only have one function call for each.

you should post a sscce.org example of your problem using jsfiddle.net otherwise the question does not help anyone but you. see here meta.stackexchange.com/questions/125997/… — andrew
– andrew, Commented Sep 19, 2013 at 21:05
I use fiddles on here all the time. I am simply not sure how to replicate an error with an ajax request. Otherwise I would have. — Millhorn
– Millhorn, Commented Sep 19, 2013 at 21:12

Jon · Accepted Answer · 2013-09-19 21:05:23Z

2

Well, you have two event handlers that display the dialog, and both are triggered by the same action (a click on any .dialogify). So both handlers are attempting to handle a click on both .dialogify elements; clicking on any one causes both dialogs to appear (although they load the same content, as this.href is unique to each click target). You can confirm this by putting an alert("a") inside your first handler and alert("b") inside the second.

Instead of this, simply use a selector that uniquely identifies the click target for each event and the problem will be solved.

answered Sep 19, 2013 at 21:05

Jon

439k85 gold badges756 silver badges820 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Millhorn Over a year ago

That was the issue. Forgot about those classes. Thanks, Jon!

Collectives™ on Stack Overflow

jQuery dialog modal being called twice on click

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related