topic Re: JavaScript code is disappeared when the dashboard is loaded in Dashboards & Visualizations

JavaScript code is disappeared when the dashboard is loaded

shayhibah — Tue, 31 Dec 2019 15:45:54 GMT

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?

Re: JavaScript code is disappeared when the dashboard is loaded

vnravikumar — Tue, 31 Dec 2019 16:02:15 GMT

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

Re: JavaScript code is disappeared when the dashboard is loaded

shayhibah — Tue, 31 Dec 2019 16:05:55 GMT

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

Re: JavaScript code is disappeared when the dashboard is loaded

vnravikumar — Tue, 31 Dec 2019 16:11:59 GMT

Can you please check by clearing your browser cache

Re: JavaScript code is disappeared when the dashboard is loaded

kamlesh_vaghela — Tue, 31 Dec 2019 16:17:05 GMT

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

Re: JavaScript code is disappeared when the dashboard is loaded

shayhibah — Tue, 31 Dec 2019 16:19:32 GMT

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

Re: JavaScript code is disappeared when the dashboard is loaded

shayhibah — Tue, 31 Dec 2019 16:25:19 GMT

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

Re: JavaScript code is disappeared when the dashboard is loaded

kamlesh_vaghela — Tue, 31 Dec 2019 16:42:45 GMT

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?