Dashboards & Visualizations

Splunk, jquery and dynamic DOM elements

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

Champion

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

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

Champion

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
State of Splunk Careers

Access the Splunk Careers Report to see real data that shows how Splunk mastery increases your value and job satisfaction.

Find out what your skills are worth!