Reputation: 1251
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
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