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!

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 ...