Yang-Tang / shinyjqui

jQuery UI Interactions and Effects for Shiny
https://yang-tang.github.io/shinyjqui/
Other
273 stars 32 forks source link

Appending Custom JavaScript to jqui_selectable #13

Closed BrentKey closed 4 years ago

BrentKey commented 7 years ago

Hi,

I really like this library and have been working on adding it to one of my projects. I want to be able to select elements of type 'checkbox' then toggle the value "checked" to true or false. Would appreciate any advice on adding custom JS actions to my code.

I have a uiOutput("chk_boxes") element in my ui.R file that is linked to the following renderUI on the server side:

variable df is a 6x8 dataframe

      output$chk_boxes <- renderUI({
          column(1, checkboxGroupInput("pc1", "Col 1", choices=as.list(df[1]))),
          column(1, checkboxGroupInput("pc2", "Col 2", choices=as.list(df[2]))),
          column(1, checkboxGroupInput("pc3", "Col 3", choices=as.list(df[3]))), 
          column(1, checkboxGroupInput("pc4", "Col 4", choices=as.list(df[4]))),
          column(1, checkboxGroupInput("pc5", "Col 5", choices=as.list(df[5]))),
          column(1, checkboxGroupInput("pc6", "Col 6", choices=as.list(df[6]))),
      })

remove selected elements that are not of type "checkbox"

if attribute "checked" is true, change to false. If attribute is false, change to true

  shiny_opt = list(
    selected = list(
               select = JS('function(event, item){
                            if(item.attr("type") == "checkbox"){
                               if(item.attr("checked") == true){
                                    item.attr("checked", false);
                               }else{
                                item.attr("checked", true);
                            }}
                         }')
    ))
  jqui_selectable('#chk_boxes', options=list(
    shiny= shiny_opt
  ))

Am I doing this correctly? When I implement the jqui_selectabled example from the documentation,it selects all checkboxes, the 'checkboxGroupInput' element, and the 'renderUI' element and highlights them. I need it to filter out the 'checkboxGroupInput' and 'renderUI' elements and toggle the value of "checked" instead of highlighting the elements. I also want the changes to be permanent (whereas in your example the highlighted portion goes away if you click on something else).