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

[marylenebrey]

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.

[kamlesh_vaghela]

@marylenebrey

Can you please share you code in code block
OR

CODE BLOCK

???
Click 101010 icon for formatting.

[marylenebrey]

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>

[kamlesh_vaghela]

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

[marylenebrey]

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

[kamlesh_vaghela]

Great @marylenebrey

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

Happy Splunking

[marylenebrey]

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.

[rvany]

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.