Dashboards & Visualizations

JavaScript code is disappeared when the dashboard is loaded

shayhibah
Path Finder

Hi,

I have a dashboard html tags inside.
My goal is to use custom JavaScript which replace the innerHTML text of on of my span elements.
When debugging the JS code, I can see that the value is replaced as I expected but after clicking on resume, it goes back to the old value like nothing happened.

require([
     'jquery',
     'splunkjs/mvc',
     'splunkjs/mvc/simplexml/ready!'
 ], function($, mvc,) {
         document.getElementById("myspan").innerHTML = "GOOGLE".link("www.google.com");
 });

Does anyone know what's wrong?

Tags (1)
0 Karma
1 Solution

kamlesh_vaghela
SplunkTrust
SplunkTrust

@shayhibah

Can you please try this?

require([
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function($, mvc,) {
    $(document).ready(function() { 
        var myVar = setTimeout(function(){ document.getElementById("myspan").innerHTML = "GOOGLE".link("www.google.com"); 
        }, 2000);
    });
 });

View solution in original post

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@shayhibah

Can you please try this?

require([
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function($, mvc,) {
    $(document).ready(function() { 
        var myVar = setTimeout(function(){ document.getElementById("myspan").innerHTML = "GOOGLE".link("www.google.com"); 
        }, 2000);
    });
 });
0 Karma

shayhibah
Path Finder

@kamlesh_vaghela
It works!

Can you please explain it?
And in addition, how can I set the value as fast as possible? there is a small delay..

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

Well, Not sure but as per my understanding and experience, JavaScript extension (JavaScript file) is executing with the internal (Splunk's internal dashboard supported JavaScript files) dashboard JavaScript executes. We are injecting our code into dashboard using JavaScript extension So possibilities of code impact overriding is there. So here, I have used a trick and used $(document).ready(function() {..} and setTimeout to execute my code.

You can decrease the timer from 2000 to 1000 or less to minimize delay.

If you got your solution then can you please upvote and accept this answer to close this question?

vnravikumar
Champion

Hi

It is working fine

<dashboard script="custom.js">
  <row>
    <panel>
      <html>
        <p>
          <span id="myspan">test</span>
        </p>
      </html>
    </panel>
  </row>
</dashboard>

js:

require([
      'jquery',
      'splunkjs/mvc',
      'splunkjs/mvc/simplexml/ready!'
  ], function($, mvc,) {
          document.getElementById("myspan").innerHTML = "GOOGLE".link("http://www.google.com");
  });
0 Karma

shayhibah
Path Finder

@vnravikumar

Thanks for your response.
For some reason, I am able to see that the page is rendered and my "GOOGLE" is disappeared.

Do you know what can cause this behavior?

0 Karma

vnravikumar
Champion

Can you please check by clearing your browser cache

0 Karma

shayhibah
Path Finder

@vnravikumar
I already did it.
I noticed that it happens only when my html code inside the dashboard XML contains many other div and span tags .

For example:

<panel id="details_panel">
      <title>General Information</title>
      <html>
         <div>
          <span>
            <b>ID: </b>$technique_id$</span>
        </div>
         <div>
          <span>
            <b>Tactics: </b>$technique_tactics$</span>
        </div>
         <div>
          <span>
            <b>Platform: </b>$technique_platform$</span>
        </div>
         <div>
          <span>
            <b>Permissions Required: </b>$technique_permissions_required$</span>
        </div>
         <div>
          <span>
            <b>Effective Permissions: </b>$technique_effective_permissions$</span>
        </div>
         <div>
          <span>
            <b>Data Sources: </b>$technique_data_sources$</span>
        </div>
         <div id="myspan"/>
         <div>
          <span>
            <b>Contributors: </b>$technique_contributors$</span>
        </div>
         <div>
          <span>
            <b>Requires Network: </b>$technique_requires_network$</span>
        </div>
         <div>
          <span>
            <b>Version: </b>$technique_version$</span>
        </div>
       </html>
    </panel>

Once the page is loaded, it seems that "myspan" is empty although that I am able to see its value during debugging process.

0 Karma
Get Updates on the Splunk Community!

Adoption of RUM and APM at Splunk

    Unleash the power of Splunk Observability   Watch Now In this can't miss Tech Talk! The Splunk Growth ...

Routing logs with Splunk OTel Collector for Kubernetes

The Splunk Distribution of the OpenTelemetry (OTel) Collector is a product that provides a way to ingest ...

Welcome to the Splunk Community!

(view in My Videos) We're so glad you're here! The Splunk Community is place to connect, learn, give back, and ...