CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-dialog
Millhorn
Millhorn

Reputation: 3166

jQuery dialog modal being called twice on click

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.

Upvotes: 0

Views: 4232

Answers (1)

Jon
Jon

Reputation: 437356

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.

Upvotes: 2

Related Questions