Splunk Javascript - How to call a function in a JS from another JS?

[garenilla]

Hello splunkers!

I'm still learning how javascript works and how it works with splunk and I'm trying to do something simple, calling a function from one JS, like a library, but I don´t know what I'm doing wrong.
In this case I have a javascript called myLib.js which is this

function doAlert(){
       alert("It works!");
}

And I have another javascript called myJS.js which is like this

require(["./myLib.js",
        "splunkjs/mvc",
        "splunkjs/mvc/searchmanager",
        "splunkjs/mvc/simplexml/ready!"
    ], function (mvc) {

    /* Stuff */

    $(document).ready(function () {
        console.log("Document Ready!");
        /* More stuff */

        $("#myButton").on("click", doAlert);
        console.log("Document Ready Done!");
    });

});

On my xml I also have a button myButton but the problem is that I'm getting this messages on console.
http://requirejs.org/docs/errors.html#scripterror
at makeError (eval at module.exports (common.js:248), :166:17)
at HTMLScriptElement.onScriptError (eval at module.exports (common.js:248), :1689:36)

I checked requiredjs error info but the only thing it says it's that I have an error on my script but it's only a function, I don't see any problem.

I tried to put myLib.js in script=" " tag, writting it without .js, making a var myLib = require('myLib'); but always it's the same error.
It must be something really simple but I dont see it.
Please, can you help me with this problem?

Many thanks!

[elliotproebstel · Accepted solution]

I think the docs here will do a good job of walking you through what you're trying to do:
http://dev.splunk.com/view/webframework-developapps/SP-CAAAESY
This is also a really good previous answer that walks through how to integrate with require:
https://answers.splunk.com/answers/482069/how-to-include-js-file-inside-another-js-file.html

Start by looking at how to integrate your code in here:

 require(["./myLib.js",
         "splunkjs/mvc",
         "splunkjs/mvc/searchmanager",
         "splunkjs/mvc/simplexml/ready!"
     ], function (mvc) {...

I believe the only library you can import in require without adding the name into the function argument list is splunkjs/mvc/simplexml/ready!. So that snippet above should probably be more like this:

 require(["./myLib.js",
         "splunkjs/mvc",
         "splunkjs/mvc/searchmanager",
         "splunkjs/mvc/simplexml/ready!"
     ], function (myLib, mvc, SearchManager) {...

and then when you want to reference the doAlert function, I believe you'll need to reference it within the myLib namespace: myLib.doAlert().

But the guides will be a great place to help you understand the nitty gritty and save you a lot of pain as you develop.

[garenilla]

Hi eliot,

thank you for the quick reply, it helped me a lot! Now I understand more about loading libraries and also I have cleaned my code.
I have been digging a little and I have found what it was wrong on my code.

First I needed to add a define([]) clause on myLib and return it.

    define(["splunkjs/mvc/simplexml/ready!"], function () {
            return myLib = (function () {
                var myLib  = {
                    doAlert: function(){
                        console.log("It Works!");
                    }
                }
                return myLib;
            })();
        });

Then on main.js I specified the route for the lib on the app

    require(["../app/myApp/myLib",
            "splunkjs/mvc",
            "splunkjs/mvc/simplexml/ready!"
        ], function (myLib,mvc) {

Finally on a more deep digging, I found where are all the js splunk use, like mvc. There are on /share/splunk/search_mrsparkle/exposed/js

Thank you for all your help!
Best regards!

[lucacaldiero]

Hello,

thanks for your example, but I am facing some difficulties in importing a little complex js file that expose some functions.

The complete code is here

This is the beginning of the js file: 

!function(t, e) {
    "object" == typeof exports && "object" == typeof module ? module.exports = e() : "function" == typeof define && define.amd ? define("cronstrue", [], e) : "object" == typeof exports ? exports.cronstrue = e() : t.cronstrue = e()
}(globalThis, (function() {
    return (()=>{
        "use strict";
        var t = {
            794: (t,e,n)=>{
                Object.defineProperty(e, "__esModule", {
                    value: !0
                }),
                e.CronParser = void 0
[...]

The end of the code is this:

         , e = {};
        function n(r) {
            var o = e[r];
            if (void 0 !== o)
                return o.exports;
            var i = e[r] = {
                exports: {}
            };
            return t[r](i, i.exports, n),
            i.exports
        }
        var r = {};
        return (()=>{
            var t = r;
            Object.defineProperty(t, "__esModule", {
                value: !0
            }),
            t.toString = void 0;
            var e = n(728)
              , o = n(336);
            e.ExpressionDescriptor.initialize(new o.enLocaleLoader),
            t.default = e.ExpressionDescriptor;
            var i = e.ExpressionDescriptor.toString;
            t.toString = i
        }
        )(),
      r
    );
  })();
});

How can I import this, please?

Thanks a lot in advance.

Luca Caldiero