Dashboards & Visualizations

How to implement JQuery in an HTML dashboard to add a "Clear" button to clear two input fields?

pashernx
Explorer

Hi,

I have a simple XML dashboard and converted it to HTML. I have added a clear button to clear two input fields, but the clear option doesn't seem to work.

...
<div class="input input-text" id="input1">
            <label>First Name</label>
</div>
<div class="input input-text" id="input2">
            <label>Last Name</label>
</div>
...
...
...
<div class="form-submit" id="clrb">
            <button class="btn btn-default" id="clear_btn">Clear</button>
</div>
...
...
...
function clear_fields() {
            $('#input1').val('');
                    $('#input2').val('');
}
...
...
...
$('#clear_btn').on('click', function () {
            clear_fields())
...
...
...

Am I missing anything here? Is this possible with javascript?

Regards,

0 Karma
1 Solution

LukeMurphey
Champion

You will need to call the SplunkJS component function. You can do this by using mvc.Components.getInstance() to get the SplunkJS instance and then you can call that version of val(). For example:

mvc.Components.getInstance('description-input').val('');

To find the ID of the input, look through the HTML for the input and see what the ID is. It should look something like this:

var input1 = new TextInput({
     "id": "description-input",
     "searchWhenChanged": false,
     "el": $('#description-input', this.$el)
}, {tokens: true}).render();

View solution in original post

LukeMurphey
Champion

You will need to call the SplunkJS component function. You can do this by using mvc.Components.getInstance() to get the SplunkJS instance and then you can call that version of val(). For example:

mvc.Components.getInstance('description-input').val('');

To find the ID of the input, look through the HTML for the input and see what the ID is. It should look something like this:

var input1 = new TextInput({
     "id": "description-input",
     "searchWhenChanged": false,
     "el": $('#description-input', this.$el)
}, {tokens: true}).render();

pashernx
Explorer

I do have a part of the code for the inputs:

        var input1 = new TextInput({
            "id": "input1",
            "default": "\"\"",
            "searchWhenChanged": false,
            "value": "$form.userid$",
            "el": $('#input1')
        }, {tokens: true}).render();

        input1.on("change", function(newValue) {
            FormUtils.handleValueChange(input1);
        });


        var input2 = new TextInput({
            "id": "input2",
            "default": "\"\"",
            "searchWhenChanged": false,
            "value": "$form.racf$",
            "el": $('#input2')
        }, {tokens: true}).render();

        input2.on("change", function(newValue) {
            FormUtils.handleValueChange(input2);
        });

And I have referenced the same IDs in the clear_fields() function (as in the original post). I tired the below code as well:

$('input1').val('');
                     $('input2').val('');

Neither way it works.

0 Karma

LukeMurphey
Champion

You need to use a reference to the SplunkJS component, not a jQuery reference to the input element directly.

Try this:

mvc.Components.getInstance('input1').val('');
mvc.Components.getInstance('input2').val('');

pashernx
Explorer

It worked. Thanks!!

0 Karma

alacercogitatus
SplunkTrust
SplunkTrust

That's not going to work, unless you have some code you aren't showing.

$('#element').val('');

Does not work. For anything. You need to drill down until you see the Javascript section with the instantiation of the Inputs. Note the variables they are called (might be input1 or element1). Then you reference them in the click function to clear the data.

Pastebin the Sourcecode (and put the link here) and we can review the code and make a better suggestion.

0 Karma
Get Updates on the Splunk Community!

Streamline Data Ingestion With Deployment Server Essentials

REGISTER NOW!Every day the list of sources Admins are responsible for gets bigger and bigger, often making the ...

Remediate Threats Faster and Simplify Investigations With Splunk Enterprise Security ...

REGISTER NOW!Join us for a Tech Talk around our latest release of Splunk Enterprise Security 7.2! We’ll walk ...

Introduction to Splunk AI

WATCH NOWHow are you using AI in Splunk? Whether you see AI as a threat or opportunity, AI is here to stay. ...