Alexander Farber Alexander Farber - 3 years ago 213
Javascript Question

Can not open jQuery UI dialog multiple times - test case included

I have prepared a simple test case demonstrating my problem -

I use a jQuery UI button to open a jQuery UI dialog:


However this works only once. On subsequent button clicks I get the error:

Uncaught Error: cannot call methods on dialog prior to initialization;
attempted to call method 'open'

error in console

Even though I do initialize the dialog before the button in my code -


<BUTTON ID="newBtn">New game</BUTTON>

<DIV ID="newDlg" TITLE="New game">
Select game board:
<BUTTON value="1">Winter</BUTTON>
<BUTTON value="2" DISABLED>Spring</BUTTON>
<BUTTON value="3" DISABLED>Summer</BUTTON>
<BUTTON value="4" DISABLED>Autumn</BUTTON>


var newDlg = $('#newDlg').dialog({
modal: true,
autoOpen: false,
close: function(e, ui) {
var bid = parseInt($(this).data('bid'));
if (1 <= bid && bid <= 4) {
alert('selected board id: ' + bid);
buttons: {
'Close': function() {

$('#newDlg button').button().click(function(e) {
var bid = this.value;'bid', bid);

var newBtn = $('#newBtn').button().click(function(e) {
newDlg.dialog('open'); // also tried $('#newDlg') here!

I have tried using jQuery UI 1.11.4 and 1.12.1 but the problem persists.

Answer Source

Funny story, the issue is:


This is removing all data attributes, including those used to define the dialog. This can be fixed by defining the specific data you want to remove:


Then it works as expected.

Forked working example:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download