Solved: JavaScript code is disappeared when the dashboard ...

shayhibah · ‎12-31-2019

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?

kamlesh_vaghela · ‎12-31-2019

@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

kamlesh_vaghela · ‎12-31-2019

@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);
    });
 });

shayhibah · ‎12-31-2019

@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..

kamlesh_vaghela · ‎12-31-2019

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 · ‎12-31-2019

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");
  });

shayhibah · ‎12-31-2019

@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?

vnravikumar · ‎12-31-2019

Can you please check by clearing your browser cache

shayhibah · ‎12-31-2019

@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.

JavaScript code is disappeared when the dashboard is loaded

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

[Puzzles] Solve, Learn, Repeat: Character substitutions with Regular Expressions

Splunk Community Badges!

[Puzzles] Solve, Learn, Repeat: Matching cron expressions

Join the Conversation