javascript - Shiny 的 HTML UI 受 Javascript OnLoad 限制?

标签 javascript jquery html r shiny

我正在使用 R 3.0.1 和 Shiny 0.7.0 创建一个带有 HTML UI 的 Shiny 网页。

关于 body 元素的 OnLoad() 事件,我似乎偶然发现了 Shiny 中的限制或错误。

因为 Shiny 没有为多个 HTML 页面准备,正如 Joe Cheng 所说 here我正在尝试使用 jQuery 而不是在必要时显示和隐藏 divs

如果我在 OnLoad 事件中隐藏 div 外,这工作得相当好。在那种情况下,响应式(Reactive)输入组件 似乎不再被 Shiny 检测到。

下面你可以看到一个测试用例:

Server.R

library(shiny)

shinyServer(function(input, output) {

    output$caption <- renderText({input$myInput})

})

index.html

<head>
    <script src="shared/jquery.js" type="text/javascript"></script> 
    <script src="shared/shiny.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/library.js"></script>    
</head>

 <body onload="initForm();"> 


    <div id="dMenu">

        <a href="#" onclick="showFoo();">Show foo div</a>
        <br>
        <a href="#" onclick="showBar();">Show bar div</a>
    </div>

    <!-- some random div -->
    <div id="foodiv">This is the Foo div</div>

    <!-- div with reactive input -->                
    <div id="bardiv">
        This is the Bar div
        <br>
        <input type="text" id="myInput" class ="shiny-bound-input" name="myInput" autocomplete="off"> 
        <div id="caption" class="shiny-text-output shiny-bound-output"></div>
    </div>

</body>

library.js

function showFoo(){
    $('#foodiv').show();    
    $('#bardiv').hide(); 
}


function showBar(){
    $('#foodiv').hide();
    $('#bardiv').show();    
}


function initForm(){
    /*showFoo();    */
}

如果你按原样使用这段代码,Shiny 将对 myInput 组件中的更改使用react,并将它们写入 caption 组件。另一方面,如果您注释掉 initForm() 中的代码,它将停止对您写入 myInput 的任何内容使用react。

我用 Firefox 23.0.1 对此进行了测试。

有人知道我做错了什么吗?

最佳答案

查看此 shiny mailing list温斯顿发表。

你可以写

shinyServer(function(input, output) {
  output$caption <- renderText({input$myInput})
  outputOptions(output, 'caption', suspendWhenHidden=FALSE)
})

确保元素在隐藏时仍然更新。

关于javascript - Shiny 的 HTML UI 受 Javascript OnLoad 限制?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19166322/

相关文章:

javascript - 使用 UJS 创建辅助标签

javascript - 使用 D3 的线图不是从我想要的日期开始

jquery - 根据内容大小设置动画并调整 div 动态高度

javascript - jquery - 以 html 形式计算相似的数据字段/类名

javascript - 同一输入框中输出值

javascript - 关闭事件的颜色框

javascript - d3 直线和圆数据

jquery - 如何使用 jquery 将 css 3d 转换属性添加到 dom 元素?

javascript - 搜索后去掉空格

javascript - 单击提交按钮时需要重置填充数据库值的文本框