Dashboards & Visualizations

Splunk Javascript - Calling a function in a JS from another JS

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!

0 Karma
1 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.

View solution in original post

0 Karma

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

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