topic Re: Javascript save button stuck in a loop in Dashboards & Visualizations

Javascript save button stuck in a loop

mwdbhyat — Thu, 21 Mar 2019 09:35:34 GMT

Hi there,

I have a javascript button that saves the input from my dashboard to a lookup using tokens plus a bit of JS extension. The problem im facing is that once I click save for the first time, it keeps "listening" for any movement on the dashboard and continuously saves everything the user clicks on after that until the page is refreshed. Unfortunately I dont speak JS so I was wondering if anyone has come across this issue before?

Here is a sample of what the JS extension script:

require([
"splunkjs/mvc",
"splunkjs/mvc/simplexml/ready!"
], function(
mvc
) {
var defaultTokenModel = mvc.Components.get("default");
var submittedTokenModel = mvc.Components.get("submitted");
$("#saveButton").click(function(){
defaultTokenModel.set("tokSave","true");
submittedTokenModel.set("tokSave","true");
alert("Selected Inputs Saved!");
});
});

Any help would be appreciated..

Thanks!

Re: Javascript save button stuck in a loop

kamlesh_vaghela — Fri, 22 Mar 2019 06:04:34 GMT

@mwdbhyat

I have tried your code and it is working. So for reproducing an issue please share more information OR scenario.

Sharing my code with another block of code with fieldset button.

<form script="my.js">
  <label>Submit Button</label>
  <fieldset submitButton="true" autoRun="false">
    <input type="text" token="field1">
      <label>field1</label>
    </input>
  </fieldset>
  <row>
    <panel>
      <title>$tokSave$</title>
      <html>
        <input type="button" id="saveButton" value="Save"/>
      </html>
    </panel>
  </row>
</form>

my.js

require([
        "splunkjs/mvc",
        "splunkjs/mvc/simplexml/ready!"
    ], function (
        mvc) {
    var defaultTokenModel = mvc.Components.get("default");
    var submittedTokenModel = mvc.Components.get("submitted");

    //HTML button
    $("#saveButton").click(function () {
        defaultTokenModel.set("tokSave", "Clicked saveButton");
        submittedTokenModel.set("tokSave", "Clicked saveButton");
        alert("Selected Inputs Saved!");
    });


    // fieldset button
    $(".btn.btn-primary").on("click", function (e) {
        e.preventDefault();
        defaultTokenModel.set("tokSave", "Clicked fieldset button");
        submittedTokenModel.set("tokSave", "Clicked fieldset button");
        return false;
    });
});

Re: Javascript save button stuck in a loop

mwdbhyat — Fri, 22 Mar 2019 07:58:07 GMT

@kamlesh_vaghela thanks for getting back to me!

Its not so much that it doesnt work - it is saving stuff, the problem is that it saves continuously - so if i click save once, it will always save everything while im working on the dashboard until I hit the refresh button - this is not the behaviour I want.. I only want it to save stuff when I click the save button each time and then stop saving straight after. The reason for this is that im dumping the saves to a lookupfile which then gets re-read into the dashboard.. so obviously if it keeps continuously saving stuff without my input it will be saving the wrong thing and overcrowding the csv(its appending).

Re: Javascript save button stuck in a loop

mwdbhyat — Tue, 29 Sep 2020 23:47:18 GMT

Here is a portion of the xml

dashboard

 <query>| inputlookup "savename".csv where reading="$reading$" |tail 1
 | table reading periodCutter stdevLoTolerance stdevHiTolerance timeRange_earliest timeRange_latest
 </query>
 <done>
   <condition match="$job.resultCount$!=0">
     <set token="form.timeRange.earliest">$result.timeRange_earliest$</set>
     <set token="form.timeRange.latest">$result.timeRange_latest$</set>
     <set token="form.reading">$result.reading$</set>
     <set token="form.periodCutter">$result.periodCutter$</set>
     <set token="form.stdevLoTolerance">$result.stdevLoTolerance$</set>
     <set token="form.stdevHiTolerance">$result.stdevHiTolerance$</set>
     <set token="timeRange.earliest">$result.timeRange_earliest$</set>
     <set token="timeRange.latest">$result.timeRange_latest$</set>
     <set token="reading">$result.reading$</set>
     <set token="periodCutter">$result.periodCutter$</set>
     <set token="stdevLoTolerance">$result.stdevLoTolerance$</set>
     <set token="stdevHiTolerance">$result.stdevHiTolerance$</set>
     </condition>
 </done>


 <query>| makeresults

Re: Javascript save button stuck in a loop

kamlesh_vaghela — Fri, 22 Mar 2019 09:43:35 GMT

@mwdbhyat

Can you please add submittedTokenModel.set(defaultTokenModel.toJSON()); in javascript click function and try it??

//HTML button
$("#saveButton").click(function () {
    defaultTokenModel.set("tokSave", "Clicked saveButton");
    submittedTokenModel.set("tokSave", "Clicked saveButton");
    submittedTokenModel.set(defaultTokenModel.toJSON());
    alert("Selected Inputs Saved!");
});

Re: Javascript save button stuck in a loop

mwdbhyat — Fri, 22 Mar 2019 10:37:40 GMT

@kamlesh_vaghela no joy - still does the infinity save loop 😕 .. my thoughts are that it must just be endlessly running the outputlookup one tokSave is clicked. I cant see anything int he console that implies its constantly running. Could it be a splunk process?

Re: Javascript save button stuck in a loop

kamlesh_vaghela — Fri, 22 Mar 2019 11:00:56 GMT

@mwdbhyat I'm unable to reproduce issue with the inputlookup and outputlookup searches. And how you see the endlessly running the outputlookup after click. Can you please share screenshot OR gif??

Do you see anything in network urls ??

Re: Javascript save button stuck in a loop

kamlesh_vaghela — Fri, 22 Mar 2019 11:31:23 GMT

@mwdbhyat

Issue resolved by updating searchWhenChanged="true" to searchWhenChanged="false".

Issue: Whenever any input changed, the backend search executed, which should be onClick of the button.
Resolution: All inputs having a property searchWhenChanged with true value. In this particular case, onChange event should not be executed when any input change (It will execute search). So we just made it searchWhenChanged=false.

Example:

 <fieldset submitButton="false">
    <input type="dropdown" token="field1" searchWhenChanged="true">
      <label>field1</label>
    </input>
  </fieldset>

Thanks
Happy Splunking

Re: Javascript save button stuck in a loop

mwdbhyat — Fri, 22 Mar 2019 11:33:10 GMT

Thanks alot for the help!!

Re: Javascript save button stuck in a loop

kamlesh_vaghela — Fri, 22 Mar 2019 11:33:59 GMT

@mwdbhyat

I have added an answer which derived from our last troubleshooting call. Kindly accept and upvote my comments which are useful to you too for troubleshooting or learning.

Thanks