Reading javascript variable in shiny / R at application startup

Question

What I want to do is get the user ID from the logged in user wordpress when I load the brilliant application in the iframe. This variable can then be used to save and modify user data.

I got part of the path by adding the following code to the wordpress page:

<?php global $current_user; get_currentuserinfo(); $user_name = $current_user->user_login; $user_ID = get_current_user_id(); ?> 

And then this, to make it a javascript variable:

 <script type="text/javascript"> var username = <?php echo json_encode($user_name) ?> ; var userID = <?php echo json_encode($user_ID) ?> ; </script> 

Using the found example here I can get the variable if I press the div button.

ui.R:

 library(shiny) shinyUI( bootstrapPage( # include the js code includeScript("get_user_id.js"), # a div named mydiv tags$div(id="mydiv", style="width: 50px; height :50px; left: 100px; top: 100px; background-color: gray; position: absolute"), # an element for unformatted text verbatimTextOutput("results") )) 

server.R:

 shinyServer(function(input, output, session) { output$results = renderPrint({ input$mydata }) }) 

get_user_id.js:

 $(document).ready(function() { document.getElementById("mydiv").onclick = function() { document.domain = "DOMAIN_NAME_HERE"; var username = parent.username; var userID = parent.userID; Shiny.onInputChange("mydata", userID); }; }); 

Please note that the domain name (or IP) is necessary because the brilliant application downloaded in the iframe is on a different port than the wordpress page. iframe should be created:

 <script type="text/javascript"> document.domain = "DOMAIN_NAME_HERE"; </script> <iframe id="example1" style="border: none; width: 100%; height: 500px;" src="APP_URL" height="150" frameborder="0"></iframe> 

But I just want to get the variable as soon as the application loads so that I can use it in the application to save the data in the database, etc.
I could not find any way to do this. I was unable to achieve this using ".onload" or several jquery alternatives that I tried. Any clues would be greatly appreciated.

EDIT: Also posted here: https://groups.google.com/forum/#!topic/shiny-discuss/3XM2mHuzqRs

Answer 1

Eric Westlund was kind enough to provide the following solution.

get_user_id.js:

 document.domain = "MYDOMAIN.com"; var userIDVariableName = parent.userID; var userID = document.getElementById("userID"); userID.value = userIDVariableName; var usernameVariableName = parent.username; var username = document.getElementById("username"); username.value = usernameVariableName; 

As already mentioned, do not forget to change the domain. And install it on the page, loading the iframe.

ui.R:

 library(shiny) shinyUI( bootstrapPage( # Hidden input boxes to save the variable to HTML(' <input type="text" id="userID" name="userID" style="display: none;"> '), HTML(' <input type="text" id="username" name="username" style="display: none;"> '), # include the js code includeScript("get_user_id.js"), # Show the output textOutput("view") )) 

Change the script path if necessary.

server.R:

 shinyServer(function(input, output, session) { userID <- reactive({ input$userID }) username <- reactive({ input$username }) output$view <- renderText( paste0( "User ID is: ",userID()," and username is: ",username() ) ) }) 

Add this to the page containing the iframe:

PHP to get a variable from wordpress.

 <?php global $current_user; get_currentuserinfo(); $user_name = $current_user->user_login; $user_ID = get_current_user_id(); ?> 

And then this, to make it a java variable:

 <script type="text/javascript"> var username = <?php echo json_encode($user_name) ?> ; var userID = <?php echo json_encode($user_ID) ?> ; </script> 

Set domain and iframe:

 <script type="text/javascript"> document.domain = "MYDOMAIN.com"; </script> <iframe id="example1" style="border: none; width: 100%; height: 500px;" src="PATH_TO_SHINY_APP" width="300" height="150" frameborder="0"></iframe> 

Answer 2

If you want to call onInputChange as soon as the Shiny application starts, you need to use the following JavaScript code instead of listening for click events.

 $(function() { setTimeout(function() { Shiny.onInputChange("mydata", userID); }, 10) });