从动态html文件中获取有光泽的输入并显示动态输出

时间:2016-06-05 19:17:20

标签: html r shiny shiny-server

我正在使用HTML,Javascript和闪光的组合来构建应用程序。我需要从动态输入内容中获取输入并生成动态输出。

我生成ui的html(www/index.html)是

<html lang="en">
    <head>
        <!-- CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
        <!-- Javascript -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
        <script type="text/javascript" src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
        <script src="scripts.js"></script> 
    </head>

    <body>
        <br>
          <p>
            <label>Multiply Number By:</label><br /> 
            <input type="number" name="n" value="5" min="1" max="10" />
          </p>


        <div id = "mydiv" class="controls  multi-field-wrapper row">
            <div class="multi-fields">
                <div class="multi-field col-md-11 col-lg-11">
                    <input type="text" name="first_num[]" placeholder="First Number?" class="col-md-4 col-lg-3" >
                    <input type="text" name="second_num[]" placeholder=" Second Number?" class="col-md-4 col-lg-3 " >
                    <input type="text" name="third_num" placeholder="Third Number?" class="col-md-4 col-lg-3 " >
                    <a href="#" class="col-md-1 col-lg-1 addField" style='padding-left:20px'>
                        <span class="add-field glyphicon glyphicon-plus-sign"></span>
                    </a>
                </div>
            </div> 
        </div>

        <div id="table" class="shiny-html-output"></div>
    </body>
</html>

我的动态内容的jquery脚本(www/scripts.js)是

jQuery(document).ready(function() {
    $('.multi-field-wrapper').each(function() {
    var $wrapper = $('.multi-fields', this);
    var remove = '<a href="#" style="padding-left:20px" class ="remove-field "><span class=" glyphicon glyphicon-minus-sign"></span></a>';

    $(".add-field", $(this)).on('click', function(e)  {
        e.preventDefault();
        $ccc = $('.multi-field:first-child', $wrapper).clone(true).append(remove).appendTo($wrapper);
        $ccc.find('.addField').remove();
        $ccc.find('input').val('').focus();
    });
    $('.multi-field ', $wrapper).on('click', '.remove-field' ,function(e) {
       e.preventDefault();
        if ($('.multi-field', $wrapper).length > 1)
            $(this).parent('.multi-field').remove();
    });
});
});

我的server.R文件看起来像

library(shiny)

# Define server logic for random distribution application
server <- shinyServer(function(input, output) {

    cat("unlist(input)")
    data <- reactive({ 

    cat("I am here")
    num_times <- input$n    


  })

# Generate an HTML table view of the data
  output$table <- renderTable({
    x=data()
    data.frame(c(1*x,2*x,3*x))
  })
})

在输出中,我只想将动态表中的数字乘以Multiply Number By输入中的数字,如下图所示。 enter image description here 我面临的最大困难是在server.R文件中获取dyanamic内容的值。感谢

0 个答案:

没有答案