27

I'm very new to jQuery and trying to run a pretty simple jQueryUI dialog box in my PHP application. In firebug console I get the error:

uncaught exception: cannot call methods on dialog prior to initialization; attempted to call method 'open'

Here is my code:

$(function() {
    $( "#dialog" ).dialog({
        autoOpen: false,
        show: "blind",
        hide: "explode"
    });

    $( "#opener" ).live('click',function() {
        $( "#dialog" ).dialog( "open" );
        return false;
    });
});

I did some googling on the error and not much turned up, except that jquery.ui.js is generating the error with:

if ( isMethodCall ) {
    this.each(function() {
        var instance = $.data( this, name );
        if ( !instance ) {
            throw "cannot call methods on " + name + " prior to initialization; " +
"attempted to call method '" + options + "'";
        }
...

Any ideas? I appreciate any help on what this error message is and how to resolve it.

UPDATE: I tried commenting out the show/hide options and that did not have any effect on my problem. Below is the HTML:

 <div class="demo">

    <div id="dialog" title="Basic dialog">
        <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
    </div>

    <button id="opener">Open Dialog</button>

</div><!-- End demo -->

This HTML is included in a PHP file, which is INCLUDED in another PHP file.

6
  • 1
    Looks like jQuery-UI thinks you haven't initialized the dialog prior to calling its open method. I'd remove the somewhat exotic options for show and hide that you used, to narrow down if those are the problem. Also make sure that you have an element with the id 'dialog' in your markup. If that doesn't help, you're going to have to provide the actual markup you're using so we have a chance to debug.
    – Thomas
    Sep 30, 2010 at 5:03
  • Hi Thomas, I removed the show/hide options (no effect) and pasted my HTML above, thanks Sep 30, 2010 at 5:09
  • 1
    I think it has something to do with my last sentence "the HTML is included in a PHP file, which is INCLUDED in another PHP file". I've been through issues with jQuery and PHP includes and, as a result, I've begun using live() to make functions available to future ajax'd content (such as this div). I don't know why it is not working here. Sep 30, 2010 at 5:12
  • Hm, that works just fine for me (including the show/hide options). Is it possible that you have other JS on your page that throws an error, which in turn prohibits proper initialization? Which browser are you using? Also, are you using jQuery 1.4.2 and jqueryui 1.8.5?
    – Thomas
    Sep 30, 2010 at 5:17
  • Gotta go to work now, so I'll be silent for about an hour.
    – Thomas
    Sep 30, 2010 at 5:19

5 Answers 5

22

OK, it had to do with the fact that I was putting the dialog DIV on a PHP file that hadn't been loaded yet at the time my JS was loaded. So I moved the DIV for the dialog box up to a higher page, and the button works on any page throughout my app now. I hope this helps someone else.

2
  • 7
    @user410341 - Glad you figured it out (and happy I could help with the other problem). If you want, you can accept your own answer to this question to help people in the future quickly find answers. :-)
    – JasCav
    Sep 30, 2010 at 14:30
  • The same issue happens to me but calling the "remove" function (this invokes 'destroy' method. You are right for the issue, I've fixed it adding $(document).ready(function(){...}); around the "remove" call.
    – gotqn
    Jan 11, 2013 at 7:49
21

I was getting the same error. This fixed it for me, taken from http://forum.jquery.com/topic/jquery-ui-model-dialog-close

$(".ui-dialog-content").dialog().dialog("close");
0
3

In my case, I use: jQuery UI - v1.9.2, and I have only:

$this.sortable("destroy");

and I get:

Uncaught Error: cannot call methods on sortable prior to initialization; attempted to call method 'destroy'

And I fixed when add the validation:

if ($this.data( "ui-sortable" )) 
{ $this.sortable("destroy"); }
0
1

In my case there was a JS conflict with Mootools (classic Joomla, right?). So I went to main.js and changed this line:

$(function () {

to this one:

jQuery(function ($) {
2
  • Which main.js did you modify?
    – Aalex Gabi
    Jan 27, 2014 at 15:46
  • @AalexGabi, I don't remember anymore, but any JS jQuery file shouldn't start with $ when you use Mootools and jQuery together. You should specify that you really mean $ as jQuery object. Jan 30, 2014 at 14:30
0

I was having the same error, and the probleme was the order of code !! you must but your javascript after the html code :).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.