Uncault Error: cannot call methods in a dialog before initialization; tried to call the 'option' method

Question

I am trying to use the jQuery UI Dialog dialog to provide a small popup that brings some client information and shows the form. Everything works fine, except that it only works on the first press. If I try to press the same button again, or another one, I get an error message:

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

I managed to understand that this is due to closing / destroying the dialogue, but I do not understand what I'm doing wrong. If I comment on the part of $(this).dialog('destroy'); , then at least the dialog works, but I get another error

 Uncaught TypeError: Object Exclude something has no method 'dialog' 

I tried with jQuery 1.8.3 / 1.9.1 with jquery-ui-1.9.2 and I have the same problem.

This is what I created: http://jsfiddle.net/ycZpQ/

Answer 1

EDIT: I found a real problem.

You referred to all the buttons on the page, and not to explicitly decide which of them.

 $('button').click(function() {...}); 

Added ALL buttons to the dialog box - including those inside the dialog!

So, I’ll go step by step in the solution, but after finding out, I also found some other problems with your code, which are mostly semantic or bad practice, I will also consider them.

First of all, buttons! By providing some differentiation to these buttons than others, in other words, one common factor, you can make sure that you are not using the wrong buttons.

 <div class="buttons"> ... </div> 

And then:

 $('.buttons').on('click', 'button', function() { ... }); 

Make sure I don’t access the buttons inside .

What caused this is what I call a double:

• Click → create dialogue
• Click the close button → close the dialog → open the dialog again (because it is also a button)

Now the problem causing the error is the part where you give the dialog a name:

 .dialog('option', 'title', $(this).attr('title')) 

^ here, because the button was a close button, you tried to address its name, and not, for example, the "Exclude" button, which leads to an error - because this dummy button was simply dropped! He also has no name!

This is why the error referred to the Exclude something object, which, obviously, is not an object, but the name of the dialog. The close button received an object identifier somehow between the close / open stage.

http://jsfiddle.net/ycZpQ/7/ <- here is the final JS script with the only dialog initialization and only if necessary will the dialog open, which is the most effective way to use this dialog system when the dialog is repeated, as in this case.

Notes on additional changes to the code: I made some changes to the way dialog creation looks, mostly semantic, but notice how I defined the buttons - the buttons object is an object with buttons for properties, not an array of button objects with properties. A little more effective and a little lighter on the eyes.

Answer 2

I had this problem when different versions of jquery-ui.css , jquery-ui.js and jquery.js used on the same page. To solve this problem, I just used the same version of jQuery files

Answer 3

You need to read . on jquery method ,

and then try something like this:

 $('.dialog-edit').on("click", function(){ $(this).dialog({ .... }); }); 

In a closed dialog box, try

 $('.dialog-close').on("click", function(){ $(this).dialog("close"); }); 

PS Always use the not id class. This is the best way.

Answer 4

Well, the destroy () method actually unbinds the container from the dialog class. In other words, it removes functionality.

If you want to close the dialog box, you want to use the close () method. Check it out in your document .

EDIT: You must call the destroy () method when you no longer need to use the dialog.