R Shiny Javascript

Question

내 반짝이는 앱에 맞춤 자바 스크립트를 삽입하려고합니다. 내가 페이지를로드하고 자바 스크립트를 실행할 수 있지만 자바 스크립트에서 'confirm_list'버튼을 눌러 처리하기 위해 반짝이는 데이터를 다시 얻을 수는 없습니다. 나는이 튜토리얼 (https://www.aridhia.com/blog/the-sky-is-not-the-limit-embedding-raw-html-and-javascript-to-create-dynamic-ui-elements-in-shiny-applications/)을 따라왔다.

세 파일의 폴더 구조 server.R

# Define server logic 
shinyServer(function(input, output) { 

    # Server code goes here 

    output$attendee_table <- renderTable({ 
    df <- data.frame(Name = unlist(input$attendees$name), 
        Department = unlist(input$attendees$department), 
        Email = unlist(input$attendees$email)) 
    df 
    }) 
}) 

widgets.R

# Creating raw HTML widget form containing ("Name","Department","Email") fields and Remove button of CSS class 'remover' 

attendeeForm <- '<p> 

        <label for="name">Name: </label> 
        <input style="width: 150px;" id="name" type="text" placeholder="Enter name"> 

        <!--Department field--> 
        <label for="department">Department: </label> 
        <input style="width: 150px;" id="department" type="text" placeholder="Enter department"> 

        <!--Email field--> 
        <label for="email">Email: </label> 
        <input style="width: 150px;" id="email" type="text" placeholder="example@email.com"> 

        <!--Remove button--> 
        <input type = "button" class="remover" value = &#10008> 
        </p> 
        ' 

|-ui.r 
|-server.r 
|-widget.r 
|-www 
    |-script.js 

ui.r

library(shiny) 
library(stringi) 

source("../widgets.R") 

attendeeForm <- stri_replace_all_charclass(attendeeForm, "\\p{WHITE_SPACE}", " ") 

# Define UI space for our application 
shinyUI(fluidPage(

    # First lets create a button which will trigger adding a new attendee form. 
    actionButton('add_Button', 'Add attendee!'), 

    # Now, lets create a DIV element to which we will be adding attendee forms. 
    div(id="div"), 

    tags$head(HTML(sprintf(
    "<script> 
    function addAttendee() { 
     var attendee = \'%s\'; 
     $('#div').append(attendee) 
    } 
    </script>", attendeeForm))), 

    tags$body(HTML('<script> 
addAttendee(); 
    </script>')), 

    # On click event to triger addAttendee function 
    tags$head(HTML(" 
    <script> 
    $(document).on('shiny:connected', function(event) { 
     $('#add_Button').on('click', function() {addAttendee()}) 
    }) 
    </script> 
")), 

    # Trigger removeAttendee function when button of class 'remover' is clicked. 
    tags$head(HTML(" 
    <script> 
    function removeAttendee(el) { 
     $(el).parents(\"p\").remove() 
    }; 

    $(document).on('click','.remover',function() { 
     removeAttendee(this) 
    }); 
    </script> 
")), 

    actionButton('confirm_list', 'Confirm attendees'), 

    tags$head(HTML(" 
    <script> 
    $(document).on('shiny:inputchanged', function(event) { 

     $('#confirm_list').on('click', function() {getAttendees()}) 

    });    
    </script> 
")), 

    tags$head(tags$script(src = 'script.js')), 

    tableOutput('attendee_table') 

)) 

이다

script.js

function getAttendees() { 
    var name = []; 
    var department = []; 
    var email = []; 
    var attendees = []; 

    $(".name").each(function() { 
    name.push($(this).val()) 
    }) 

    $(".department").each(function() { 
    department.push($(this).val()) 
    }) 

    $(".email").each(function() { 
    email.push($(this).val()) 
    }) 

    Shiny.onInputChange("attendees", {name, department, email}) 
} 

Answer 1

오류는 위젯 및 스크립트 조합이었다. 스크립트에서 클래스 이름, 부서 및 전자 메일을 참조하려고했지만 widget.R에서 html을 작성한 곳에서는 클래스 대신 ID를 사용했습니다.

따라서 widgets.r는

attendeeForm <- '<p> 

        <label for="name">Name: </label> 
        <input style="width: 150px;" class="name" type="text" placeholder="Enter name"> 

        <!--Department field--> 
        <label for="department">Department: </label> 
        <input style="width: 150px;" class="department" type="text" placeholder="Enter department"> 

        <!--Email field--> 
        <label for="email">Email: </label> 
        <input style="width: 150px;" class="email" type="text" placeholder="example@email.com"> 

        <!--Remove button--> 
        <input type = "button" class="remover" value = &#10008> 
        </p> 
        '