Check out the JS Fiddle demo here.
Here is the code in question:
$('#infoTable').click(infoModal);
function infoModal(){
var table = "THIS IS A TABLE";
$("#dialogContainer").dialog({
appendTo: "#msg-dialog",
autoOpen: false,
width: 400,
modal: true,
resizable: false,
buttons: {
close: { text: 'Close', click: function(){
$(this).dialog("close");
console.log("Thanks for using this!");
}
}
}
});
//Append the table variable to the dialog box
$('#msg-dialog').after(table);
}
I am new to implementing the jQueryUI dialog feature and I believe my approach may be incorrect. My aim is to display the dialog box, but all I am seeing is the error message
Uncaught DOMException: Failed to execute 'appendChild' on 'Node': The new child element contains the parent#dialogContainer div, not the other way around. Is there a specific modification I need to make to resolve this issue?