Knowledge Management

SplunkJS: adding tokens on button click not working

jbouch03
Path Finder

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
Path Finder

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

0 Karma

niketn
Legend

@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!!!"
0 Karma
Get Updates on the Splunk Community!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...