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!

Why You Can't Miss .conf25: Unleashing the Power of Agentic AI with Splunk & Cisco

The Defining Technology Movement of Our Lifetime The advent of agentic AI is arguably the defining technology ...

Deep Dive into Federated Analytics: Unlocking the Full Power of Your Security Data

In today’s complex digital landscape, security teams face increasing pressure to protect sprawling data across ...

Your summer travels continue with new course releases

Summer in the Northern hemisphere is in full swing, and is often a time to travel and explore. If your summer ...