最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Shiny with jquery UI - Stack Overflow

programmeradmin4浏览0评论

I want to use jquery UI with shiny (not using shinyjqui library). It works perfect when I have a layer and tried to move it using jqueryUI, but when this layer is dynamically generated using insertUI, then, it doesn´t work.

Here is the code:

library(shiny)

ui <- fluidPage(theme = "style.css",
            tags$script(src = "jquery-ui.js"),
            tags$script(src = "script2.js"),
            actionButton("add","Add layer"),
            div(class="aux"),
            div(id="works",style="width:300px;height:200px;background:red"))



server <- function(input, output, session) {

    observeEvent(input$add,{
    insertUI(
      selector = ".aux",
      where="afterEnd",
      ui  = div(id=paste0("new",input$add),style="width:300px;height:200px;background:blue")

    )


  })






}
shinyApp(ui, server)

And the js script

  $( function() {


    $("#works").draggable();
    $("#new1").draggable();


  });

Thanks!

I want to use jquery UI with shiny (not using shinyjqui library). It works perfect when I have a layer and tried to move it using jqueryUI, but when this layer is dynamically generated using insertUI, then, it doesn´t work.

Here is the code:

library(shiny)

ui <- fluidPage(theme = "style.css",
            tags$script(src = "jquery-ui.js"),
            tags$script(src = "script2.js"),
            actionButton("add","Add layer"),
            div(class="aux"),
            div(id="works",style="width:300px;height:200px;background:red"))



server <- function(input, output, session) {

    observeEvent(input$add,{
    insertUI(
      selector = ".aux",
      where="afterEnd",
      ui  = div(id=paste0("new",input$add),style="width:300px;height:200px;background:blue")

    )


  })






}
shinyApp(ui, server)

And the js script

  $( function() {


    $("#works").draggable();
    $("#new1").draggable();


  });

Thanks!

Share Improve this question edited Dec 27, 2018 at 12:20 Stéphane Laurent 84.7k18 gold badges137 silver badges256 bronze badges asked Dec 27, 2018 at 11:10 jffjff 3204 silver badges15 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 8

That's because #new1 does not exist at the start-up. You have to execute the javascript code after it have been created, with shinyjs::runjs for example. And use immediate=TRUE in insertUI.

library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  tags$head(
    tags$script(src = "jquery-ui/jquery-ui.min.js"),
    tags$script("$(function() {
                    $('#works').draggable();
                })")
  ),
  actionButton("add","Add layer"),
  div(class="aux"),
  div(id="works",style="width:300px;height:200px;background:red"))

server <- function(input, output, session) {

  observeEvent(input$add,{
    insertUI(
      selector = ".aux",
      where="afterEnd",
      ui = div(id=paste0("new",input$add), style="width:300px;height:200px;background:blue"),
      immediate = TRUE
    )
    runjs("$('#new1').draggable();")
  })

}

shinyApp(ui, server)

发布评论

评论列表(0)

  1. 暂无评论