Question

I’m using reuqireJS and am struggling to call a function, which is in a js file I’m requiring. My main app.js “controller” requires (plugin)app.js, which handles all plugin configuration and plugin related functions.

This is from app.js

define([], function(){
    var start = function() {
        require(['jquery', 'overrides', 'jqm', 'multiview', 'respond'],function() {

            // globals
            var 
            // PROBLEM attempt at an external plugin function object
            dataTablesExt = {},
            ...;

            // call for (plugin)app.js
            enhanceDataTables = 
                function( page, from ) {
                    var datatable = page.find('.table-wrapper table');                  
                    if ( datatable.length > 0 && datatable.jqmData('bound') != true ) {
                        datatable.not(':jqmData(bound="true")')
                            .each( function() {
                                var that = $(this),
                                tblstyle = that.jqmData("table-style");

                                that.jqmData('bound', true);
                                require(['services/datatables/app'], function (App) {
                                // this calls (plugin)app.js
                                App.render({style: tblstyle, table: that });
                                });
                            });
                        }
                }; 

        // PROBLEM - try to call function "Hello" inside datatables.app
       anotherFunc= 
                function( page, from ) {
                    dataTablesExt.sayHello("john");
                };

I guess my problem is how to set up the global variable dataTablesExt, so I can “fill” it with functions to be called globally. Here is what I’m trying inside (plugin)app.js:

define(['services/datatables/app', 'services/datatables/datatables.min'], function( app, datatables ) {
    function render(parameters) {
    ...
    // the function I want to call
    function helloName( name ){
        alert( name );
        };

    // I'm trying to add this function to the global "dataTablesExt"
    dataTablesExt.sayHello = helloName; 
    }

But… doesn’t work. I’m always getting:

  dataTablesExt.sayHello is not a function

Question:
Can someone point me to what I’m doing wrong? If this is not possible, what would be an alternative.

I was thinking to trigger a custom event, but I would have to set up an object to pass along with the event, which I have no clue how to do.

Thanks for help!

Answer 1

Got it. I need to attach dataTablesExt to a global variable I’m using and not declare it as a variable. So like this:

 // globals
        var 
        ...;

        $.dataTablesExt = {};

Then I can assign functions to it and call them.