Chapter 5 jQuery

5.1 About

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

• Natively in Shiny

5.2 Selection

• Classic

// ID
$("#plop")
// Class
$(".plop")

• Filter

$("button:contains('this')")
$("a[href = 'https://thinkr.fr']")
$( "td:eq( 2 )" ) // element at index
$( "li:nth-child(2)" )
$( "input:checked" )

<div id = 'pouet' name = 'bing' class = 'blob' value = '1' data-this = '12'>Oï</div>

• get

var x = $("#pouet")
x.attr("id")
x.attr("value") // character
x.data("this") // Number
x.outerHeight()

• set

x.attr("id", "bibi")
x.attr("value", parseInt(x.attr("value")) + 1 ) // Adding 1 to value

5.3 Event

5.3.1 Add event

var x = $("#pouet");
x.on("click", function(){
  $(this).attr("value", parseInt($(this).attr("value")) + 1 )
})

5.3.2 Shiny Example

library(shiny)
library(magrittr)
ui <- function(request){
  tagList(
    textInput(
      "txt", "Enter txt"
    ), 
    tags$script('
    document.getElementById("txt").addEventListener("keypress", function(event){
      Shiny.setInputValue("txt_keypress", event.key, {priority : "event"})
    })
    ')
  )
}

server <- function(input, output, session){
  observeEvent( input$txt_keypress , {
    print(input$txt_keypress)
    if (input$txt_keypress == "Enter"){
      print("VALIDATED")
    }
  })
  
}

shinyApp(ui, server)

---