topic Re: Why are Javascript files not loading after update to Splunk 6.5.0? in Dashboards & Visualizations

Why are Javascript files not loading after update to Splunk 6.5.0?

tkindler — Tue, 04 Oct 2016 21:32:56 GMT

I have recently updated to Splunk version 6.5.0. When loading my application views, including those with custom .js files, Javascript is not working and element inspection shows me class="no-js"

This has been attempted with Firefox, Chrome, and Internet Explorer browsers on Windows 10 machine with no success or difference. Additionally I get no error messages in the console, nor any messages on the page. Is anyone else having this issue or do you have any idea on a resolution?

Thanks,

CC_Hoppie

Re: Why are Javascript files not loading after update to Splunk 6.5.0?

ykou_splunk — Tue, 29 Sep 2020 11:17:01 GMT

First, try to add console.log("hello") to your js file to see if it prints "hello" to the console. If it is, that means the js is loaded.
Second, if you are doing some DOM manipulation, for example $('.splunk-table'), then it may not work in 6.5 because the class name changed. In this case you can first add an id to the element which you want to edit in SimpleXML, for example <chart id="nice_chart"> , then you can do $('#nice_chart').

Re: Why are Javascript files not loading after update to Splunk 6.5.0?

rjthibod — Wed, 05 Oct 2016 11:01:27 GMT

@tkindler I ran into a similar problem at .conf and talked to the App team. It turns out that they changed how the JS files are loading for dashboards.

Any JS files loaded using dashboard.js or the <form script="file.js"> approaches will no longer appear in the browser debugger, because they are being loaded using the eval() approach. The scripts are being executed in memory, so they don't look like loaded files. One way to debug these files is by inserting the line debugger; in the original file in the app. See @ehudb response for other great suggestions.

Note, there were other changes in the DOM structure, so be sure to check your functionality if you are looking at DOM elements in the navigation bar, the top-level fieldset, or the footer. All of this really messed up things for me at first.

Re: Why are Javascript files not loading after update to Splunk 6.5.0?

tkindler — Wed, 12 Oct 2016 14:42:22 GMT

Thank you for the update and information. The change in the JS file loading process is exactly what I was experiencing. I'll have to do some more digging and hope that the documentation is updated to match the new settings.

Re: Why are Javascript files not loading after update to Splunk 6.5.0?

tkindler — Wed, 12 Oct 2016 14:45:22 GMT

Adding the console.log message did assist me, and I knew that the js file was being loaded. Adding 'debugger;' from user rjthibod's comment also helped.

The method changes for DOM manipulation certainly slowed me down a bit and has forced me to spin up another testing environment to permit working in both 6.5 and 6.4.3 to support production.

The ID switch does make for a handy bandaid, and I'll adjust the code to match new class names.

Thanks again!

Re: Why are Javascript files not loading after update to Splunk 6.5.0?

luigeek — Wed, 16 Nov 2016 14:36:34 GMT

Clearing the browser cache and restarting Splunk did it for me, all the json and css files have been refreshed.

Re: Why are Javascript files not loading after update to Splunk 6.5.0?

skawasaki_splun — Thu, 15 Dec 2016 19:46:24 GMT

The short answer: You have caching issues.

To fix server caching: Restart Splunk (this will force Splunk to look for new JS files or check for modifications in your app's appserver/static/)
To fix client caching: Either reload clearing cache (ctrl-shift-r or command-shift-r) or delete all caches on your browser (but this will affect all other websites)

If you don't want to restart Splunk for every JS modification (I wouldn't), then add this to web.conf:

[settings]
minify_js = False
minify_css = False
js_no_cache = True
cacheEntriesLimit = 0
cacheBytesLimit = 0
enableWebDebug = True

This will disable server caching in Splunk. NOTE that you probably don't want to do this on your production instances since caching helps performance. Source: https://docs.splunk.com/Documentation/Splunk/6.5.1/AdvancedDev/CustomVizTutorial#Development_mode_settings

For client caching, you can do the keyboard shortcut, but I like to the option to disable cache when the dev tool is open (Chrome Developer Tools has this option; not sure about other browsers).

Re: Why are Javascript files not loading after update to Splunk 6.5.0?

pwesterbeek — Wed, 28 Dec 2016 09:13:09 GMT

If you are using Chrome,then install also the extension Clear Cache 1.1.2 created by Benjamin Bojko. With one click on the icon in the taskbar you will clear your browser cache and reload the page (reload the page after clearing the cache is an option ).

Re: Why are Javascript files not loading after update to Splunk 6.5.0?

ehudb — Wed, 01 Feb 2017 10:22:51 GMT

It does load with eval() function.
However, I found a great workaround, add this to the end of the js file:

 //# sourceURL=filename.js

(change filename.js to yourfile name)

The js will be viewed in the browser debugging console under "(no-domain)" and you can use breakpoints, editing, like you used to before 6.5.

Another possible approach: load the js files using one central file.
1. Create a file named load.js
load.js contents:

require([
                                "/static/app/search/file1.js",
                                "/static/app/search/file2.js"
                       ])

2 . Use file1.js and file2.js for your real code.
They will be available in the debugger under sources in app/search (like they used to before 6.5 version)

Re: Why are Javascript files not loading after update to Splunk 6.5.0?

rjthibod — Wed, 01 Feb 2017 11:48:17 GMT

Thank you very much for sharing. If only I had known that months ago as you can probably guess from my earlier post.

Re: Why are Javascript files not loading after update to Splunk 6.5.0?

PKersale — Fri, 03 Feb 2017 16:12:08 GMT

Hi !
Since I migrated to a Splunk 6.5, when I want to inspect my code, I no longer find my .js files in my browser debugger (Chrome, IE, Safari -> same problem).

I read your solution, but I do not understand in which file to add this line:
// # sourceURL = filename.js

Question: In Which File to add this line: // # sourceURL = filename.js ?

Thank you

Philippe

Re: Why are Javascript files not loading after update to Splunk 6.5.0?

PKersale — Fri, 03 Feb 2017 16:21:06 GMT

Hi !
Since I migrated to a Splunk 6.5, when I want to inspect my code, I no longer find my .js files in my browser debugger (Chrome, IE, Safari -> same problem).
-1- In your solution in which file I must insert the line debugger; ?
-2- In which part of file ?

Thank

Philippe

Re: Why are Javascript files not loading after update to Splunk 6.5.0?

ehudb — Sat, 04 Feb 2017 13:36:37 GMT

Hi Philippe, add the line as the last line of your js file.

If your js file is named myjscode.js, and you are adding it to your xml dashboard with:

<form script="myjscode.js">

, add as the last line inside the js file:

// # sourceURL = myjscode.js

Re: Why are Javascript files not loading after update to Splunk 6.5.0?

rjthibod — Sat, 04 Feb 2017 14:49:53 GMT

In the JS file you want to inspect, and in the location you want to put an initial breakpoint. The debugger; line acts like a breakpoint.

Re: Why are Javascript files not loading after update to Splunk 6.5.0?

ehudb — Sun, 05 Feb 2017 07:54:32 GMT

You can refer to my answer below, it will add the js back to the browser debugger.

Re: Why are Javascript files not loading after update to Splunk 6.5.0?

jeffland — Mon, 06 Feb 2017 07:56:20 GMT

If all you need is non-cached js server-side for development purposes, then you probably don't want to set

minify_js = False
minify_css = False

as those only change splunk's own js/css files from minified to non-minified versions and do not impact your code at all, what these settings will do however is significantly slow down page load times.

Re: Why are Javascript files not loading after update to Splunk 6.5.0?

PKersale — Mon, 06 Feb 2017 16:39:31 GMT

Hi ehudb (thank for your explanations)

I've applied your explanations, but it still does not work.
-1- In my dashboard, file life.xml, I have: form script ...

<form script="life.js" stylesheet="style.css" hideSplunkBar="true" hideFooter="true"  hideEdit="true">

-2- I add to the last line of my file life.js // # sourceURL = life.js

                    }), outputName, "xlsx");
                });
            });
        });
    };
 });
//# sourceURL = lifecycle.js

I restart splunk

it still does not work.

Test: when I type in the browser console // # sourceURL = life.js
I have the name of the file life.js which appears under (no-domain). If I select the file life.js, it displays in edition that // # sourceURL = life.js

I do not understand

Do you have an idea about my problem ?

Thank

Philippe

Re: Why are Javascript files not loading after update to Splunk 6.5.0?

ehudb — Mon, 06 Feb 2017 20:41:56 GMT

Hi
Not sure if that was a typo, but your quote used
" //# sourceURL = lifecycle.js" instead of " //# sourceURL = life.js"

Re: Why are Javascript files not loading after update to Splunk 6.5.0?

PKersale — Tue, 07 Feb 2017 08:26:18 GMT

Hi ehudb (Thank to help me)

Oh sorry, in my code I writed:

                    }), outputName, "xlsx");
                });
            });
        });
    };
 });
//# sourceURL = life.js

It's not the problem.

I do not understand, where is the problem.

Thank!

Philippe

Re: Why are Javascript files not loading after update to Splunk 6.5.0?

PKersale — Tue, 07 Feb 2017 13:41:04 GMT

Hi ehudb

I resolve my problem, with the second approach: (explains Above) load the js files using one central file.

-1- I create a file loadxxxx.js by the formxxxx.xml
ex: loadLifecycle.js

require([
    "/static/app/lifecycle.js",
    "/static/app/jquery.dataTables.js",
    "/static/app/passTokensViews.js",
    "/static/app/tableCell.js",
    "/static/app/accessPermission.js"
])

-2- I call the loadxxxx.js in form.xml
ex: loadLifecycle.js called in script

<form script="loadLifecycle.js" stylesheet="jquery.dataTables.css,style.css,loading.css" hideSplunkBar="true" hideFooter="true"  hideEdit="true">
    <label>Lifecycle Component</label>
    <search id="lifecycleBaseSearch">

and now it WORK, I can inspect the code with (safari, Chrome, etc..)

It's GOOD

Thank ehudb and tkindler

Philippe