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!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...