jquery ui dialog stopped working - gives error "cannot call method 'mouseover' of undefined"

Question

I have been using jQuery UI dialog boxes in my app, and all was well until today when I tried to open a dialog, and nothing happened. In the console, was:

Uncaught TypeError: Cannot call method 'mouseover' of undefined - jquery-ui.js, line 162

and

GET data: undefined (undefined) - this had no line number, in Chrome, it just said "data:".

The code in jquery-ui.js that throws the error is in the resizable code:

this._handles.mouseover(function(){...});

My code for calling the dialog is:

$('.popup-trigger').click(function(){
    var target = $(this).attr('href');
    $(target).dialog({
        width:650,
        minWidth:500,
        minHeight:250,
    });
    return false;
});

Where the href attribute of .popup-trigger elements is something like "#dialog". This code was working fine until today.

I've done lots of work on the app since the time when it was last working properly, so I can't identify a single thing that has changed.

Can anyone point me in the right direction? What is this error

Edit - after another look, I've discovered that this error only happens the FIRST time you click the button. The second click successfully brings up the dialog with no errors.

Answer 1

Got the exact same problem today.

Spend about one hour debugging my code and ends up finding that one of my custom function has a name conflict with jquery.ui function. In my case, the conflicting name is 'disableSelection'.

Hope it help in your case.