CODEWITHSUNDEEP
javascriptjquerymediawiki
Julien Bourdon
Julien Bourdon

Reputation: 1723

ResourceLoader: how to load specific functions?

I am currently converting an extension I made for MW 1.16 to 1.18. This extension uses javascript to modify the page interface.

I am thus using the resource loader as follows to load my different scripts:

$commDictResourceTemplate = array(
    'localBasePath' => dirname( __FILE__ ) . '/modules',
    'remoteExtPath' => 'CommunityDictionary/modules',
);

$wgResourceModules += array(
    'ext.CommunityDictionary.jsAndCss' => $commDictResourceTemplate + array(
        'scripts' => array('jquery.dataTables.min.js','jquery.jeditable.mini.js','jquery.dataTables.editable.js'),
        'styles' => array('custom-theme/jquery-ui-1.8.16.custom.css'),
        'dependencies' => array('jquery.ui.dialog'),
    ) ,
    'ext.CommunityDictionary.dictPage' => $commDictResourceTemplate + array(
        'scripts' => array('commDict.include.js','commDict.js'),
        'styles' => array('commDict.css'),
        'dependencies' => array('ext.CommunityDictionary.jsAndCss')
    )

);

Here is commDict.js:

var oTable;
var jDict;

$(loadDictPage);
function loadDictPage(){
    jDict = $($.parseXML(xmlInput));
    initDataTable()
    initEditable();
    initDelete();
    initLanguageDialog();
}

commdict.include.js contains all the initialization functions called above plus a bunch of other functions that are bound to click events on the interface. The bound function is defined as follows:

$('#langBtn').click(function(){
    selectLanguages();
});

selectLanguages is defined as follows:

function selectLanguages(){
    $('#selectLanguageDialog').dialog('open');
}

Here is the error I get:

Uncaught ReferenceError: selectLanguages is not defined

When I test my page in debug mode, everything's fine but when I test in non-debug mode, the javascript engine is not happy and tells me that my function is not defined, even it is present in the mimified script generated by the resource loader. My guess is that the resource loader does not see the click functions that are bound only after the page is parsed, but I do not know how to correct this. Is there a way to explicitly tell the loader to load specific functions?

Does anyone have a clue on what's going on here?

Upvotes: 1

Views: 537

Answers (2)

Bergi
Bergi

Reputation: 664277

That sounds like the issue described in the Migration Guide (#Troubleshooting). The debug mode is regrettably known to behave different...

Upvotes: 1

Christian
Christian

Reputation: 1840

That's wierd. Is selectLanguages in the same file as the click handlers? I ask because resource loader loads modules in their own scope instead of the global scope. If you want to access a global variable or function, you have to attach it to the global window object like this:

window.selectLanguages = function()...

Then:

$('#langBtn').click(function() {
     window.selectLanguages();
}

Upvotes: 1

Related Questions