adding custom css for table elements by row in RShiny using jQuery

[Bahgat]

The following code consists of two containers or divs or bucket_lists from the sortable R package and each bucket_list consists of two add_rank_list functions.

The first container elements are completly unmovable where the disabled arguments in each add_rank_list are set to TRUE, while the second container allows the user to drag and drop the items except the first item, since the disabled argument in the first add_rank_list function is set to TRUE but in the second function is set to FALSE.

I would like to apply a red background color to the element in the second container if its value is "Camp". Additionally, I would like to apply the same background color to the element in the first container that shares the same row with the "Camp" element. Despite attempting different methods, I have been unable to achieve this outcome. Any assistance would be greatly appreciated.

    library(shiny)
library(sortable)

ui <- fluidPage(
  actionButton(inputId = "id1", "run"),
  uiOutput("id2")
)

server <- function(input, output, session) {
  observeEvent(input$id1, {
    output$id2 <- renderUI({
      
      tagList(
        tags$style(
          HTML(paste0("
              .custom-sortable .rank-list-item-Camp {
              background-color: red 
              }
                      "))
        ),
        tags$script(
          HTML("
                $(document).ready(function() {
                $('.custom-sortable .rank-list-item').each(function(index) {
                if ($(this).text() === 'Camp') {
                targetIndex = index;
                }
                });
                $('.custom-sortable .rank-list-item').eq(targetIndex).addClass('rank-list-item-Camp');
                });
                     ")
        ),
        div(
          style = "width: 15%; float: left; overflow: hidden;",
          bucket_list(
            header = NULL,
            class = c("default-sortable","custom-sortable" ),
            orientation = c("vertical"),
            add_rank_list(
              text = NULL,
              labels = 100,
              options = sortable_options(disabled = T)
            ),
            add_rank_list(
              text = NULL,
              labels = c(50,40,30,15),
              options = sortable_options(disabled = T)
            )
          )
        ),

        div(
          style = "width: 15%; float: left; overflow: hidden;",
          bucket_list(
            header = NULL,
            class = c("default-sortable", "custom-sortable"),
            orientation = c("vertical"),
            add_rank_list(
              text = NULL,
              labels = c("Fixed"),
              options = sortable_options(disabled = T)
            ),
            add_rank_list(
              text = NULL,
              labels = c("Camp", rep("No Info",3)),
              options = sortable_options(disabled = F)
            )
          )
        )
        
      )
    })
  }
 )
}

shinyApp(ui, server)

[andrie]

Simplify your script to:

    $(document).ready(function() {
      $('.custom-sortable .rank-list-item').each(function(index) {
        if ($(this).text() === 'Camp') {
          $(this).addClass('rank-list-item-Camp');
        }
      });
    });

And a simplified version of your app:

library(shiny)
library(sortable)

ui <- fluidPage(
  uiOutput("id2")
)

style <-
  HTML(
    ".custom-sortable .rank-list-item-Camp {
        background-color: red
    }"
  )

script <-
  HTML(
    "
    $(document).ready(function() {
      $('.custom-sortable .rank-list-item').each(function(index) {
        if ($(this).text() === 'Camp') {
          $(this).addClass('rank-list-item-Camp');
        }
      });
    });
  ")

server <- function(input, output, session) {
  output$id2 <- renderUI({
    tagList(
      tags$style(style),
      tags$script(script),
      div(
        bucket_list(
          header = NULL,
          class = c("default-sortable", "custom-sortable"),
          orientation = c("vertical"),
          add_rank_list(
            text = NULL,
            labels = c("Fixed"),
            options = sortable_options(disabled = T)
          ),
          add_rank_list(
            text = NULL,
            labels = c("Camp", rep("No Info",3)),
            options = sortable_options(disabled = F)
          )
        )
      )
    )

  })
}

shinyApp(ui, server)

[Bahgat]

Thank you very much for your answer. My code gives the same output as yours, so I do not have a problem with adding the class to the "Camp" element in the second container. However, my main point is to add the class to the element in the first container which has the same row as the "Camp" element in the second container and take into consideration the the user can drag and drop "Camp" element in the second container