OldPadawan
OldPadawan

Reputation: 1251

jquery ui dialog error on close

I use jquery 2.1.4 and UI 1.11.4. I load a dialog with :

$(document).ready( function() {
        $("#dialog-form").dialog({
            autoOpen: false,
            modal: true,
            width: 750,
            height: 450,
            show: {
                effect: "blind",
                duration: 1000
                },
            hide: {
                effect: "blind",
                duration: 1000
                },
            buttons: {
            "Cancel": function () {
            $(this).dialog("close"); /* fires an error */
            }
            }
        });

        $(".bookingcancel").on("click", function(e) {
            e.preventDefault();
            $("#dialog-form").dialog("option", "title", "Gestion de votre planning").dialog("open");
            $("#dialog-form").load(this.href);
        });
    });

I have links with IDs (ie: loda-data.php?id=1 / loda-data.php?id=2 ...) When I click, the dialog opens fine, the page loads within the dialog window.

When I click on the top-right "close" cross, it closes (no error). When I click on the "Cancel" button, the dialog won't close, and I get an error : TypeError: $(...).dialog is not a function $(this).dialog("close");

I found many topics here and there, but nothing that works...

I also have a problem when I open then close the dialog : it won't open a second time when clicking another link.

Any clue ? Thank you.

EDIT : this is the code of the dialog I use to open, then load data, then need to close, then need to open again with another data < div id="dialog-form" title="" >< /div >

Upvotes: 0

Views: 1256

Answers (1)

mhodges
mhodges

Reputation: 11116

When loading a page using .load() into a dialog, ensure a few things:

#1: Make sure the page you are loading does not have <html></html> tags present. The duplicate tags will cause issues in your DOM

#2: Make sure the page you are loading does not have duplicate references to libraries. Examples: jQuery, jQueryUI, bootstrap, etc. The duplicate references to external files can also cause many issues.

Upvotes: 1

Related Questions