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..
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.
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);
});
});
});
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.