SplunkJS: adding tokens on button click not workin...

jbouch03 · ‎10-02-2017

I'm trying to create an update an delete feature on my kvstore, but I'm having an issue where the button click doesn't recognize the code inside the click function. Can anyone please assist? My goal is to set the update_ tokens when the button is clicked so that the updateSearch will run, but it just refreshes the page instead of setting the tokens. Here is my code:

crud.js

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function (_, $, mvc) {

    var tokens = mvc.Components.get('submitted');

    /* --- Search Reference --- */
    var updateSearch = mvc.Components.get('updateSearch');
    var siteCollectionSearch = mvc.Components.get('siteCollectionSearch');

    var siteCollectionTable = mvc.Components.get('siteCollectionTable');

    /* --- Define the form inputs --- */
    var src_ip_Input = $('[name="src_ip"]');
    var region_Input = $('[name="region"]');
    var sitename_Input = $('[name="sitename"]');
    var _key_Input = $('[name="_key"]');

    /* --- Reference to the input values --- */
    var src_ip_Val, region_Val, sitename_Val, _key_Val;

    siteCollectionTable.on('click', function (e) {

        e.preventDefault();
        if (e['field'] === 'Update') {
            /* --- Pull values from the current table row --- */
            src_ip_Val = e.data['row.src_ip'];
            region_Val = e.data['row.region'];
            sitename_Val = e.data['row.sitename'];
            _key_Val = e.data['row._key'];

            /* --- Insert values from rows into input fields --- */
            src_ip_Input.val(src_ip_Val);
            region_Input.val(region_Val);
            sitename_Input.val(sitename_Val);
            _key_Input.val(_key_Val);

        }

    });

    $(document).on('click', '#submitButton', function (e) {

        e.preventDefault();
        tokens.set('update_key_tok', _key_Val);
        tokens.set('update_src_ip_tok', src_ip_Input.val());
        tokens.set('update_region_tok', region_Input.val());
        tokens.set('update_sitename_tok', sitename_Input.val());

    });

    /* --- Search Jobs --- */
    updateSearch.on('search:done', function () {


        siteCollectionSearch.startSearch();
        $('form *').filter(':input').each(function () {
            $(this).val('');
        });


    });

});

My dashboard code:

<dashboard script="crud.js" stylesheet="sitemap_style.css">
    <label>Client Site Mapping</label>
    <search id="updateSearch"
            depends="$update_key_tok$,$update_src_ip_tok$, $update_region_tok$, $update_sitename_tok$">
        <query>
            | inputlookup client_map | eval key=_key | WHERE key="$update_key_tok$"
            | eval src_ip="$update_src_ip_tok$"
            | eval region="$update_region_tok$"
            | eval sitename="$update_sitename_tok$"
            | outputlookup client_map append=t
        </query>
    </search>
    <row>
        <panel id="siteCollectionPanel">
            <table id="siteCollectionTable">
                <title>Client Site Collection</title>
                <search id="siteCollectionSearch">
                    <query>| inputlookup client_map | eval Update="Update" | eval Delete="Delete" | table *, Update,
                        Delete
                    </query>
                    <earliest>0</earliest>
                    <latest></latest>
                </search>
                <option name="wrap">true</option>
                <option name="rowNumbers">false</option>
                <option name="dataOverlayMode">none</option>
                <option name="drilldown">cell</option>
                <option name="count">10</option>
            </table>
        </panel>
        <panel id="siteFormPanel">
            <html>
                <form>
                    <div>
                        <label for="src_ip">CIDR Address (ex. 192.168.1.1/24)</label>
                        <input style="width: 95%" type="text" name="src_ip"/>
                    </div>
                    <div>
                        <label for="region">Region</label>
                        <input style="width: 95%" type="text" name="region"/>
                    </div>
                    <div>
                        <label for="sitename">Sitename</label>
                        <input style="width: 95%" type="text" name="sitename"/>
                    </div>
                    <input type="hidden" name="_key"/>
                    <div>
                        <button id="submitButton">Save</button>
                    </div>
                </form>
            </html>
        </panel>
    </row>
</dashboard>

NOTE: I've already tried setting $(document).on('click', '#submitButton', function (e) to something like $('#submitButton').click(function (e) as well, but it still doesn't create the tokens.

jbouch03 · ‎10-02-2017

And I'm a huge idiot. The code works, it was a javascript caching issue on my browser.

niketn · ‎10-02-2017

@jbouch03, please accept your own answer to mark this as answered.

Only in the Development Environment you should set

1) Following settings in web.conf under to prevent caching of static files like CSS, JS and HTML.

[settings]
minify_js = False
minify_css = False
js_no_cache = True
cacheEntriesLimit = 0
cacheBytesLimit = 0
enableWebDebug = True

2) Use http:///debug/refresh to refresh Splunk instance (without restart).
3) Use internet browser in the incognito mode to ensure not web browser caching.

Refer to following documentations:

https://docs.splunk.com/Documentation/Splunk/latest/AdvancedDev/CustomVizTutorial#Development_mode_s...

http://dev.splunk.com/view/webframework-developapps/SP-CAAAE6T

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

SplunkJS: adding tokens on button click not working

Adoption of RUM and APM at Splunk

Routing logs with Splunk OTel Collector for Kubernetes

Welcome to the Splunk Community!