Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change second tabset on click #264

Closed
mfherman opened this issue Apr 28, 2020 · 12 comments
Closed

Change second tabset on click #264

mfherman opened this issue Apr 28, 2020 · 12 comments

Comments

@mfherman
Copy link

@mfherman mfherman commented Apr 28, 2020

I'm working on a self-contained flexdashboard project and I'm wondering if it's possible when a user clicks to a new tab in one tabset, it changes to a new tab on a second tabset as well.

So for example, when you click on "Chart B1" below, I would also like to change view to "Chart B2" in the second column. And clicking on "Chart A2" would change back to "Chart A1", etc. etc.

Screen Shot 2020-04-25 at 07 32 59

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
---

```{r setup, include=FALSE}
library(flexdashboard)
```

Column {.tabset}
-----------------------------------------------------------------------

### Chart A1

### Chart B1

Column {.tabset}
-----------------------------------------------------------------------

### Chart A2

### Chart B2

NOTE: I've asked this on RStudio Community and StackOverflow without any answers.

@bransonf
Copy link

@bransonf bransonf commented May 4, 2020

This can be implemented with JavaScript. Full answer on StackOverflow

@cderv
Copy link
Collaborator

@cderv cderv commented May 5, 2020

I saw this issue as a nice JS exercie and I came up with this JS chunk using JQuery and bootstrap tabset helper

```{js}
document.addEventListener("DOMContentLoaded", function(){
    $('a[data-toggle="tab"]').on('click', function(e){
      child = e.target.parentNode;
      column = $(e.target).closest("div[id]");
      columnid = column.attr("id");
      tabnum = Array.from(child.parentNode.children).indexOf(child);
      if (columnid == "column") {
        columnto = "column-1";
      } else {
        columnto = "column";
      }
      $("div[id="+columnto+"] li:eq("+tabnum+") a").tab('show');
    })
});
```

It can work with any number of tabs in your two colomn format.

It is just another way to do what was answer on SO. Hope it helps

@mfherman
Copy link
Author

@mfherman mfherman commented May 6, 2020

Thanks to both of these great solutions!

@mfherman mfherman closed this as completed May 6, 2020
@Gerardo-P-Garcia
Copy link

@Gerardo-P-Garcia Gerardo-P-Garcia commented Jul 13, 2020

When I attempt this, switching to another page within the document and back resets the first column to 1 while leaving the 2nd wherever it was last on. Any means of fixing this?

@cderv
Copy link
Collaborator

@cderv cderv commented Jul 14, 2020

Any means of fixing this ?

Do you talk about a fix in the JS snipper above or with some issue in the package ?

For the former asking, on Stackoverflow or RStudio community would be a better place to get help modifying the Javascript code so that it suits your need. The first answer #264 (comment) comes from there

@npiepgrass
Copy link

@npiepgrass npiepgrass commented Nov 5, 2021

Thank you for this wonderful solution, this is very useful. I wasn't able to get the intended functionality when I knit the minimal example in rmarkdown. I checked my indents and spacing the rmarkdown document, and I inspected the html output and found the js script. Is there anywhere I should look to figure out what the problem might be?

@McQdev
Copy link

@McQdev McQdev commented Nov 29, 2021

Same issue. The minimal example no longer works.

@McQdev
Copy link

@McQdev McQdev commented Nov 29, 2021

@cderv any thoughts on what might have changed between when this jQuery solution was authored and now such that it's no longer functioning?

@cderv
Copy link
Collaborator

@cderv cderv commented Nov 29, 2021

I don't know specifically. One would need to debug the JS code and adapt it to the newer version of rmarkdown output.

Recent rmarkdown will use JQuery 3 by default for example. Also, this could not work if you are using a format that would use Bootstrap 4 or higher by default.

Did one of you tried looking into what is breaking ?

@McQdev
Copy link

@McQdev McQdev commented Nov 29, 2021

Not sure what's breaking; there are no console errors or obvious issues in the timeline that I can tell. I'm not familiar with debugging JS within an rmarkdown so I'm not entirely sure how to proceed.

@McQdev
Copy link

@McQdev McQdev commented Nov 29, 2021

Not sure if it's helpful, but I've been unable to get any JS event listeners working in rmarkdown... Again, no console messages or indications of what's broken, they just have stopped listening!

@McQdev
Copy link

@McQdev McQdev commented Nov 29, 2021

Failed to execute 'querySelectorAll' on 'Element' is what I'm getting in browser debugger, seems.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants