Use Jquery add text into Dashboard navigator?

[王雪松]

I try to add text in the blue area, the following code chunk is my bad idea. I want to show different messages by clicking different buttons or selections.

How can I use variables, such as input$uploadFileName, and show it in Blue area?

body <- dashboardBody(
    useShinyjs(),
    # This will call message-handler.js
    tags$head(tags$script(src = "message-handler.js"),
              tags$link(rel = "stylesheet", type = "text/css", href = "css/tmod.css"),
              tags$style(HTML(
                  '.myClass {
                  font-size: 15px;
                  line-height: 50px;
                  text-align: left;
                  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
                  padding: 0 15px;
                  overflow:hidden;
                  color:#2780e3;
                  }
                  '))),
    tags$script(HTML('$(document).ready(function() {
                     $("header").find("nav").append(\'<span class="myClass"> Text Here </span>\');
                     })
                     ')),.......
                         .......

[PeterS]

Hello,

Easy option: use the server logic to observe changes in fileinput and then change the text in the header.

To use jquery at client side seems to be more challenging, these are my findings so far:

I cannot access the fileInput value via browser. It seems (if my understanding of JS and comments is correct) that value of the input is set to null after the .getValue method is finished.

This is what browser shows in shiny input values

Shiny.shinyapp.$inputValues

{fInput:shiny.file: null, iBreak:shiny.action: 2, .clientdata_output_someText_hidden: false, .clientdata_pixelratio: 1, .clientdata_url_protocol: "http:", …}

fInput:shiny.file: null

iBreak:shiny.action: 2

__proto__: Object

and input binding register for file input:

getValue: function(el) {

    // This returns a non-undefined value only when there's a 'data-restore'

    // attribute, which is set only when restoring Shiny state. If a file is

    // uploaded through the browser, 'data-restore' gets cleared.

    var data = $(el).attr('data-restore');

    if (data) {

      // blahblahblah

      return data;

    } else {

      return null;

    }

  }

so far this is the only reproducible example i was able to create however the event triggers before the fileinput native and thus the element's inner html is changed before 

runApp(launch.browser = TRUE,

       shinyApp(

         ui=dashboardPage(

           dashboardHeader(title='Header',tags$li(class='dropdown',style='border:2px solid white;',id='headerCustomText')),

           dashboardSidebar(disable = TRUE),

           dashboardBody(fileInput(inputId = 'fInput',label = 'Upload file'),

           tags$script('$(document).ready(

                       $("#fInput").on("change",function(){$("#headerCustomText").html($(".form-group.shiny-input-container input[type=text]").val())})

                       )'))),

         server=shinyServer(function(input,output){

         })

       )

)

At this stage i would either suggest creating duplicate of fileInput element with it's own inputbinding which will accept additional parameter as id of element where to change the text.

Alternatively google for JQuery Mutation Observer and make it observer this: $(".form-group.shiny-input-container input[type=text]").val() to change your text.

I will explore further later today to see if i can find easier solution.

Rgds,

Peter

[王雪松]

Thank you.

Your code gives me a lot of ideas, but I have not figured out how to use dynamic content. One reason is I am not familiar with JQuery and html.

I am still working on it..

Thank you again for your help. 

Best,

Song

在 2017年8月21日星期一 UTC+2下午12:10:58，PeterS写道：