Dashboards & Visualizations

How to wait for my page to load before launching my javascript

marylenebrey
New Member

Hi,

I want to put dynamic color backgrounds in div.
My code work but somtimes when my searchs in my XML page are not loaded the color don’t stay in my Dashboard .

Below my code javascript :

require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/searchmanager',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, SearchManager) {
var defaultTokenModelun = mvc.Components.getInstance('default', {create: true});
var submittedTokenModelun = mvc.Components.getInstance('submitted', {create: true});
function setToken(name, value) {
var defaultTokenModel = mvc.Components.get('default');
if (defaultTokenModel) {
defaultTokenModel.set(name, value);
}
var submittedTokenModel = mvc.Components.get('submitted');
if (submittedTokenModel) {
submittedTokenModel.set(name, value);
}
}

var dispo = new SearchManager({
"id": "dispo",
"preview": "false",
"latest_time": "$time.latest$",
"earliest_time": "$time.earliest$",
"cache": "false",
"search": "index=myindex sourcetype=mysourcetype |eval dispo=case(Somme ==0 , " + '"' + YELLOWGREEN + '"' + ", Somme > 0 , " + '"' + RED + '"' + ")|table Product, dispo"
}, {tokens: true});
dispo.on('search:done', function(properties) {

var Availability = dispo.data("results",{ count: 0
});
Availability.on("data", function() {

var disponibilite = Availability.data().rows;

Object.keys(disponibilite.map(mysearch => {

switch (mysearch[0]) {
case "1" :
document.getElementById("numberCircle_1").style.backgroundColor=mysearch[1];
break;
case "2" :
document.getElementById("numberCircle_2").style.backgroundColor=mysearch[1];
break;
case "3" :
document.getElementById("numberCircle_3").style.backgroundColor=mysearch[1];
break;

}
}));
});
});
});

And my code XML :
div class="flex_col">
p>search


div class="les_sites">
div class="numberCircle flex_col" >
div id="numberCircle_1">
p>$search_1$


/div>
div>
div class="numberCircle flex_col" >
div id="numberCircle_2">
p>$search_2$


/div>
/div>
div class="numberCircle flex_col" >
div id="numberCircle_3">
p>$search_3$


/div>
/div>
/div>
/div>

How to wait for my page to load before launching my javascript ?

I tried to use window.load but without success.

Labels (1)
0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@marylenebrey

Can you please share you code in code block
OR

CODE BLOCK

???
Click 101010 icon for formatting.

0 Karma

marylenebrey
New Member

Sorry, below my code :
Javascript :

>     require([
>     'underscore',
>     'jquery',
>     'splunkjs/mvc',
>     'splunkjs/mvc/searchmanager',
>     'splunkjs/mvc/simplexml/ready!'
>     ], function(_, $, mvc, SearchManager) {
>       var defaultTokenModelun = mvc.Components.getInstance('default',
> {create: true});
>       var submittedTokenModelun = mvc.Components.getInstance('submitted',
> {create: true});
>       function setToken(name, value) {
>       var defaultTokenModel = mvc.Components.get('default');
>               if (defaultTokenModel) {
>               defaultTokenModel.set(name, value);
>               }
>               var submittedTokenModel = mvc.Components.get('submitted');
>               if (submittedTokenModel) {
>               submittedTokenModel.set(name, value);
>               }
>           }
>       var dispo = new SearchManager({
>       "id": "dispo",
>       "preview": "false",
>       "latest_time": "$time.latest$",
>       "earliest_time": "$time.earliest$",
>       "cache": "false",
>       "search": "index=myindex sourcetype=mysourcetype |eval dispo=case(Somme ==0 , " + '"' +     > YELLOWGREEN + '"' + ", Somme > 0 , " +  '"' + RED + '"' + ")|table Product, dispo" 
>       }, {tokens: true});
>           dispo.on('search:done', function(properties) {
>               var Availability = dispo.data("results",{ count: 0
>               });
>               Availability.on("data", function() {
>               var disponibilite = Availability.data().rows;
>                   Object.keys(disponibilite.map(mysearch
> => {
>     
>                           switch (mysearch[0]) {
>                           case "1" :
>                           document.getElementById("numberCircle_1").style.backgroundColor=mysearch[1];
>                           break;
>                           case "2" :
>                           document.getElementById("numberCircle_2").style.backgroundColor=mysearch[1];
>                           break;
>                           case "3" :
>                           document.getElementById("numberCircle_3").style.backgroundColor=mysearch[1];
>                           break;
>                           }
>                   }));
>               });
>           });
>     });

XML :

<div class="flex_col">
<p>search</p>

    <div class="les_sites">
        <div class="numberCircle flex_col" >
            <div id="numberCircle_1">
            <p>$search_1$</p>
            <div>
        </div>

        <div class="numberCircle flex_col" >
            <div id="numberCircle_2">
            <p>$search_2$
            </div>
        </div>

        <div class="numberCircle flex_col" >
            <div id="numberCircle_3">
            <p>$search_3$</p>
            </div>
        </div>
    </div>
</div>
0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@marylenebrey

I think you have fixed values and respective action against same. So I think we can make it without JavaScript. Can you please take reference of below XML and try again.. Note, I have made little change in search that you have to do also.

<form>
  <label>Dashboard Example</label>
  <search>
    <query>| makeresults | eval Product="1,2,3", dispo="Green,Yellow,Red", Product=split(Product,","),dispo=split(dispo,","), tmp=mvzip(Product,dispo) | mvexpand tmp | eval Product=mvindex(split(tmp,","),0),dispo=mvindex(split(tmp,","),1) | table Product,dispo | transpose header_field=Product | fields -  column</query>
    <earliest>$time.earliest$</earliest>
    <latest>$time.latest$</latest>
    <done>
      <set token="tkn_numberCircle_1">$result.1$</set>
      <set token="tkn_numberCircle_2">$result.2$</set>
      <set token="tkn_numberCircle_3">$result.3$</set>
    </done>
  </search>
  <fieldset submitButton="false">
    <input type="time" token="time">
      <label></label>
      <default>
        <earliest>-24h@h</earliest>
        <latest>now</latest>
      </default>
    </input>
  </fieldset>
  <row>
    <panel>
      <html>
        $tkn_numberCircle_1$
        &lt;br/&gt;
        $tkn_numberCircle_2$
        &lt;br/&gt;
        $tkn_numberCircle_3$
        <div class="flex_col">
        <p>search</p>
        <div class="les_sites">
         <div class="numberCircle flex_col">
             <div id="numberCircle_1" style="background-color:$tkn_numberCircle_1$ !important;">
             <p>$search_1$</p>
             </div>
         </div>

         <div class="numberCircle flex_col">
             <div id="numberCircle_2" style="background-color:$tkn_numberCircle_2$ !important;">
             <p>$search_2$</p>
             </div>
         </div>

         <div class="numberCircle flex_col">
             <div id="numberCircle_3" style="background-color:$tkn_numberCircle_3$ !important;">
             <p>$search_3$</p>
             </div>
         </div>
         </div>
         </div>
      </html>
    </panel>
  </row>
</form>
0 Karma

marylenebrey
New Member

I thank you for you reply @kamlesh_vaghela .
Finally, I passed all of my requests in javascript. This solved my problem.

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

Great @marylenebrey

Can you please post your solution as an answer and accept it? It will help community a lot. 🙂

Happy Splunking

0 Karma

marylenebrey
New Member

As below ma solution :

I passed my requests (result of search_1, search_2, search_3 ) from my xml in the javascript :

js :

 product.on('search:done', function(properties) {  
        var product1 = product.data("results",{ count: 0
            });
            product1.on("data", function() {   
                var var_products = product1.data().rows;

                Object.keys(var_products.map(var_product => { 
                    switch (var_product[0]) {
                            case "1" :
                            document.getElementById("product_1").innerText=var_availability1[1]; 
                            break;
                            case "2" :
                            document.getElementById("product_2").innerText=var_availability1[1]; 
                            break;
                            case "3" :
                            document.getElementById("product_3").innerText=var_availability1[1]; 
                            break;

                    }
                }));
        });
    });

XML :

<div class="flex_col">
 <p>search</p>

     <div class="les_sites">
         <div class="numberCircle flex_col" >
             <div id="numberCircle_1">
             <p id="product_1">$search_1$</p>
             <div>
         </div>

         <div class="numberCircle flex_col" >
             <div id="numberCircle_2">
             <p id="product_2">$search_2$
             </div>
         </div>

         <div class="numberCircle flex_col" >
             <div id="numberCircle_3">
             <p id="product_3">$search_3$</p>
             </div>
         </div>
     </div>
 </div>

The problem comes from the fact that there was a conflict between my xml and my javascript.
If you have the same kind of problem you should either pass everything in XML or pass everything in javascript.

0 Karma

rvany
Communicator

Just a friendly hint: you added your solution as comment what is good as everybody could see it.
It would be even better if you convert it to/post it again as an answer - that's something different 😉
And as a last step you then accept this answer as a solution - so everybody could see right in the search results, that this question already HAS a solution.

0 Karma
Get Updates on the Splunk Community!

Splunk Training for All: Meet Aspiring Cybersecurity Analyst, Marc Alicea

Splunk Education believes in the value of training and certification in today’s rapidly-changing data-driven ...

The Splunk Success Framework: Your Guide to Successful Splunk Implementations

Splunk Lantern is a customer success center that provides advice from Splunk experts on valuable data ...

Investigate Security and Threat Detection with VirusTotal and Splunk Integration

As security threats and their complexities surge, security analysts deal with increased challenges and ...