Cannot insert JavaScript code into a R shiny.semantic app

Question

I am having issues inserting a javascript code into a Shiny app (clicking/unclicking the All box should check/uncheck all the boxes).

app.R

library(shiny.semantic)

ui <- semanticPage(
    multiple_checkbox(input_id = "myCheckbox",
                      label = NULL,
                      choices = c("All", "A", "B"),
                      class = "customCheckbox"),
    
    includeScript(path = "www/myscript.js"),
)
    
server <- function(input, output, session) {
    
}

shinyApp(ui, server)

myscript.js

$(".customCheckbox input[value='All']").click(function(e) {
  $(".customCheckbox input[type='checkbox']").prop('checked', $(e.target).prop("checked"));
});

I know that the javascript code works as shown below.

$(".customCheckbox input[value='All']").click(function(e) {
  $(".customCheckbox input[type='checkbox']").prop('checked', $(e.target).prop("checked"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="ui form grouped fields ss-checkbox-input customCheckbox" id="myCheckbox">
  <label for="myCheckbox"></label>
  <div class="field">
    <div class="ui checkbox  ">
      <input type="checkbox" name="myCheckbox" tabindex="0" value="All"/>
      <label>All</label>
    </div>
  </div>
  <div class="field">
    <div class="ui checkbox  ">
      <input type="checkbox" name="myCheckbox" tabindex="0" value="A"/>
      <label>A</label>
    </div>
  </div>
  <div class="field">
    <div class="ui checkbox  ">
      <input type="checkbox" name="myCheckbox" tabindex="0" value="B"/>
      <label>B</label>
    </div>
  </div>
</div>

I also tried different ways to insert the javascript code into the Shiny app.

app_2.R

library(shiny.semantic)
library(shinyjs)

ui <- semanticPage(
    useShinyjs(),
    
    multiple_checkbox(input_id = "myCheckbox",
                      label = NULL,
                      choices = c("All", "A", "B"),
                      class = "customCheckbox")
)
    
server <- function(input, output, session) {
    runjs(HTML("
        $(\".customCheckbox input[value='All']\").click(function(e) {
            $(\".customCheckbox input[type='checkbox']\").prop('checked', $(e.target).prop(\"checked\"));
        });
    "))
}

shinyApp(ui, server)

app_3.R

library(shiny.semantic)

ui <- semanticPage(
    tags$script(src = "myscript.js"),
    # OR 
    #tags$head(tags$script(src = "myscript.js"))
    
    multiple_checkbox(input_id = "myCheckbox",
                      label = NULL,
                      choices = c("All", "A", "B"),
                      class = "customCheckbox")
)
    
server <- function(input, output, session) {}

shinyApp(ui, server)

Edit

When using shiny::fluidPage instead of shiny.semantic::semanticPage, everything works fine. However I would need to stick to shiny.semantic.

library(shiny.semantic)

ui <- fluidPage(
    multiple_checkbox(input_id = "myCheckbox",
                      label = NULL,
                      choices = c("All", "A", "B"),
                      class = "customCheckbox"),
    includeScript(path = "www/myscript.js"),
)
    
server <- function(input, output, session) {}

shinyApp(ui, server)

Your app_2.R runs fine for me. Perhaps you just need to restart RStudio. — YBS
– YBS, Commented Jul 21, 2021 at 15:29
@YBS I tried restarting RStudio with no luck. I noticed though that the problem comes from ui <- semanticPage(...). The JS script works fine when using ui <- fluidPage(...) instead (see edit). I use shinyjs_1.1, shiny.semantic_0.4.3 and shiny_1.5.0. — 6PO0222
– 6PO0222, Commented Jul 21, 2021 at 16:00
I have shinyjs_2.0 and shiny.semantic_0.4.0. Same Shiny. — YBS
– YBS, Commented Jul 21, 2021 at 17:31

6PO0222 · Accepted Answer · 2021-07-22 08:58:49Z

0

I actually found a workaround by removing the hidden class of the All box.

library(shiny.semantic)
library(shinyjs)

ui <- semanticPage(
    useShinyjs(),
    
    multiple_checkbox(input_id = "myCheckbox",
                      label = NULL,
                      choices = c("All", "A", "B"),
                      class = "customCheckbox")
)

server <- function(input, output, session) {
    runjs(HTML("
        $(\".customCheckbox input[value='All']\").removeClass(\"hidden\");
        
        $(\".customCheckbox input[value='All']\").click(function(e) {
            $(\".customCheckbox input[type='checkbox']\").prop('checked', $(e.target).prop(\"checked\"));
        });
    "))
}

shinyApp(ui, server)

edited Jul 22, 2021 at 8:58

answered Jul 22, 2021 at 8:38

6PO0222

1418 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Cannot insert JavaScript code into a R shiny.semantic app

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related