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?
@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
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);
});
});
@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..
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?
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");
});
@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?
Can you please check by clearing your browser cache
@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.