Dashboards & Visualizations

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

garenilla
Explorer

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!

Labels (1)
0 Karma
1 Solution

elliotproebstel
Champion

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.

View solution in original post

0 Karma

elliotproebstel
Champion

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.

0 Karma

garenilla
Explorer

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!

0 Karma

lucacaldiero
Path Finder

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

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...