Dashboards & Visualizations

Splunk, jquery and dynamic DOM elements

amiftah
Communicator

Hi guys,

I want to display in browser console the number of pages selected from my dashboard panel pagination.

I included that script to my dashboard <form stylesheet="style.css" script="script.js">:

require(['splunkjs/mvc/simplexml/ready!'], function(){
    require(['splunkjs/ready!'], function(){

        console.log("hello from Script");

        $(document).ready(function(){
            $("#panel4 .splunk-paginator a").click(function (){
                var value = $(this).text();
                console.log("value: ",value);
        });
      });
  });
});

The script can display hello from Script in the console, but no action from the click on the paginator.

PS. My jQuery selector is correct, I tested this following block from my browser console first:

$(document).ready(function(){
             $("#panel4 .splunk-paginator a").click(function (){
                 var value = $(this).text();
                 console.log("value: ",value);
         });
       });

It works once, which means when I click on page 1, I got value: 1 but when I click on 2, nothing happens..

0 Karma

jeffland
SplunkTrust
SplunkTrust

The DOM elements on your page are created dynamically (they are based on the Simple XML entries after all), and since you add your event listener to an element, the listener becomes non-functional the moment the original element is replaced by a newly generated element. I'm guessing the paginator is be re-created on switching pages. For more detail and another case of this, see this answers post.
You could try to add your event listener to an element higher up in the DOM and use event bubbling, for example like this (I had tochange your code to use on instead of the shortcut click because that doesn't have the filter option):

$(document).on('click', '#panel4 .splunk-paginator a', function (){
    var value = $(this).text();
    console.log("value: ",value);
});

You might want to use a different selector than document, this is just to give you an idea.

0 Karma

amiftah
Communicator

Hi @jeffland,

It still doesn't work..

require(['splunkjs/mvc/simplexml/ready!'], function(){
    require(['splunkjs/ready!'], function(){

        console.log("hello from scrip");

     $("#panel4").on("click", ".splunk-paginator a", function (){
     var value = $(this).text();
     console.log("value: ",value);
 });
});
});
0 Karma

jeffland
SplunkTrust
SplunkTrust

Yeah, I just checked and it does seem like Splunk does this deliberately (so it appears it's not a mistake in the code). The paginator code stops event propagation, and since it is first to bind to click events, your code never runs since propagation beyond Splunks own handler is stopped.
However, it works if you use vanilla js to attach an event handler to the paginator and use the target of that click event which is the actual a. To print the clicked page to the browser console, it's basically

var paginator = document.querySelector("#panel4 .splunk-paginator");
paginator.addEventListener("click", function(e) {console.log(e.target.text);});

Beware that if you did not assign panel4 explicitly (in Simple XML), it might break if you edit the XML and add or remove a panel before panel 4. It might be a good idea to give the panel an explicit id like this

<panel id="paginator_panel">
  <table ...

and use that id in js.

0 Karma
Get Updates on the Splunk Community!

New in Observability - Improvements to Custom Metrics SLOs, Log Observer Connect & ...

The latest enhancements to the Splunk observability portfolio deliver improved SLO management accuracy, better ...

Improve Data Pipelines Using Splunk Data Management

  Register Now   This Tech Talk will explore the pipeline management offerings Edge Processor and Ingest ...

3-2-1 Go! How Fast Can You Debug Microservices with Observability Cloud?

Register Join this Tech Talk to learn how unique features like Service Centric Views, Tag Spotlight, and ...