Блестящий с JQuery UI - PullRequest
       6

Блестящий с JQuery UI

0 голосов
/ 27 декабря 2018

Я хочу использовать JQuery UI с «Блестящим» (не используя библиотеку «Блэкджик»).Он отлично работает, когда у меня есть слой и я пытался переместить его с помощью jqueryUI, но когда этот слой динамически генерируется с помощью insertUI, он не работает.

Вот код:

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)

И скрипт js

  $( function() {


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


  });

Спасибо!

1 Ответ

0 голосов
/ 27 декабря 2018

Это потому, что #new1 не существует при запуске.Вы должны выполнить код javascript после того, как он был создан, например, shinyjs::runjs.И используйте immediate=TRUE в 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)

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...