Table drilldown: Append # to end of link

[enexwhy]

Hi community,

I have the following drilldown,

when clicked on, hides/shows some tables, depending on what 'form.show_table' is.
Some of the tables have many rows, and this means I would have to scroll very far down in order to see that table.
I would like to add a function similar to "a href='#table_id'", that immediately brings me to that table when I click on the field 'Details'.

I have tried adding as follows but it does not work (seems to ignore the 'link' tags; yes I have already declared the ID for that table):

How can I achieve an effect similar to using "a href='#table name'"?
I am open to suggestions that also include using Javascript.

Thank you!

[jeffland · Accepted solution]

The general idea has been discussed before here. See if that is enough to get you started and feel free to ask any questions.

[enexwhy]

Hello! That link was very helpful.
However, I am now only halfway done.

While the '#id' part basically does work now, it only works when the tables have already been loaded.
In some cases when I click on the button, the inputs are changed, the query must be re-run and the tables will have to be loaded again. When that happens, the '#id' does not work. I suppose that is because the .js part is trying to execute 'window.location.href = url' even before the table exists.

My next question is, how can I detect whether the table has already been loaded before executing 'window.location.href = url'? I have tried multiple suggestions from other sites but cannot achieve this.

Thank you!

[jeffland]

On a general note, make sure you require splunkjs/mvc/simplexml/ready!. It makes sure your code runs after the dashboard components have been initialized.
I couldn't reproduce your problem: when I re-run the search of a table, I can still link to it while the search runs and the table updates. If you look at the DOM, you'll see that the div with your id never changes, only the contents of some child change. I doubt the issue is with re-running the table's search.

[enexwhy]

Yes, I already included splunkjs/mvc/simplexml/ready!, but I am not very familiar with Javascript so maybe there is a difference in where I placed the code.

Anyway I solved my problem by getting the height of the tbody element to determine whether the table has loaded:

var interval = setInterval(function() {
var tbody = document.getElementById('synth_lint').getElementsByTagName('tbody');
var height = tbody[0].offsetHeight;

if (height) {
    var url = window.location.href.split('#')[0] + '#synth_lint';
window.location.href = url;
clearInterval(interval);
}

}, 100);

Thanks for your help!

[jeffland]

That's because you're waiting for the tbody of your table. If you just link to the id'd element directly, you don't have to wait at all and are still taken to the same place on the page.