javascriptjquerytypeerroroojs-ui

TypeError: OO.ui.MessageDialog is not a constructor when using OOUI/Windows/Message Dialogs


I am trying to use OOUI/Windows/Message Dialogs to prompt a user warning. I used code snippet from https://www.mediawiki.org/wiki/OOUI/Windows/Message_Dialogs to open a Dialogbox.

But when I use var messageDialog = new OO.ui.MessageDialog(); this error occurs- TypeError: OO.ui.MessageDialog is not a constructor.

What might be the problem?

The code is as following:

( function ( $ ) {
    $( '#movepage' ).on( 'submit', function(event){
        var messageDialog = new OO.ui.MessageDialog();

        var windowManager = new OO.ui.WindowManager();
        $( 'body' ).append( windowManager.$element );

        windowManager.addWindows( [ messageDialog ] );

        windowManager.openWindow( messageDialog, {
            title: 'Storage limit reached',
            message: 'You are out of disk space',
            actions: [
                { label: 'Cancel', action: 'cancel' },
                { label: 'Move page', action: 'proceed' }
            ]
        });
    });
}( jQuery ) );

Solution

  • I got it figured out.

    You have to add dependencies 'oojs-ui-core', 'oojs-ui-windows' in Resources.php.

    eg:

    If you are adding the message dialog to the mediawiki.special.movePage.js

    'mediawiki.special.movePage' => [
        'scripts' => 'resources/src/mediawiki.special/mediawiki.special.movePage.js',
        'dependencies' => [
            'jquery.byteLimit',
            'mediawiki.widgets',
            'oojs-ui-core',
            'oojs-ui-windows'
        ],
    ],