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!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...