Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Basic Example - Not Working in Firefox #66

Open
markwynter opened this issue May 13, 2016 · 7 comments
Open

Basic Example - Not Working in Firefox #66

markwynter opened this issue May 13, 2016 · 7 comments

Comments

@markwynter
Copy link

markwynter commented May 13, 2016 •
edited
Loading

Hi Dean
I'm only a few hours in to learning your project. With your simple PageCol example, if I run the ui = fluidPage(... ) scenario, then everything works nicely across browsers, Firefox included.

However, if I use a www/index.html file for the UI (which I require for creating a custom Dashboard), and do the extra steps required, then the example code works nicely in RStudio and Chrome, but not Firefox. Please see attached screenshot for the Firefox console errors.

Have you come across this issue before in FF? Hopefully its reproducible. I would welcome any insights or suggestions.

firefox_console_errors

My Shiny App file structure is:
global.R
server.R
www/index.html

#server.R
library(shiny)
library(shinyjs)
jsCode <- "shinyjs.pageCol = function(params){$('body').css('background', params);}"
shinyServer(function(input, output) {
useShinyjs(html = TRUE)
extendShinyjs(text = jsCode)
observeEvent(input$col, {
      js$pageCol(input$col)
    })
})

<!--Contents of www/index.html file-->
<!DOCTYPE html>
<html lang="en">
<head>
<script src="shared/jquery.js" type="text/javascript"></script>
<script src="shared/shiny.js" type="text/javascript"></script>
<script src="shinyjs/inject.js"></script>
<link rel="stylesheet" type="text/css" href="shared/shiny.css"/>
</head>
<body>
<div class="form-group shiny-input-container">
<label class="control-label" for="col">Colour:</label>
<div>
<select name="col"><option value="white" selected>white</option>
<option value="yellow">yellow</option>
<option value="red">red</option>
<option value="blue">blue</option>
<option value="purple">purple</option></select>
<script type="application/json" data-for="col" data-nonempty="">{}</script>
</div>
</div> 
</body>
</html>

Best regards
Mark
@daattali
Copy link
Owner

I just spent over an hour trying to figure out the problem, but I still don't understand why FF is behaving differently. It seems like when FF doesn't recognize that the shinyjs global variable exists when it tried to add new functions. I'm very confused as to why it acts like this, it feels like a bug in FF. I spent almost two hours looking into this and it just doesn't make sense, I really feel like it's a bug in FF. I might try to come back to it later, but right now I don't know if that's fixable in the near future, sorry!

@markwynter
Copy link
Author

Many thanks Dean for looking into this. For now I'll use a MutationObserver function in index.html to watch for changes in a hidden RShiny output div - and apply a CSS property to multiple targetDiv's based on the value of the output div. It doesn't use your package, but it works well.

<!-- HIDDEN RSHINY OUTPUTS OBSERVED BY JAVASCRIPT FUNCTION BELOW FOR DYNAMIC STYLING OF ELEMENTS -->
<div id="shinyOutputColor" class="shiny-text-output" style="visibility: hidden"></div>

<script>
$(function() {

function observeDivChange(source, target, cssproperty) {
var sourceElement = document.querySelector(source);
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if(mutation.addedNodes[0]){
$(target).css(cssproperty, mutation.addedNodes[0].nodeValue);
}
}); 
});
var config = { attributes: true, childList: true, characterData: true };
observer.observe(sourceElement, config);
}

observeDivChange("#shinyOutputColor", "#target-div1", "background-color");
observeDivChange("#shinyOutputColor", "#target-div2", "background-color");
observeDivChange("#shinyOutputColor", "#target-div3", "background-color");

});

</script>

@judas-christ
Copy link

We just ran into a similar problem in Firefox. We solved it by injecting the shiny event handlers after the script tag here: https://github.com/daattali/shinyjs/blob/master/R/utils.R#L39

@daattali
Copy link
Owner

@judas-christ can you share more details on what exactly you did to get it to work?

@judas-christ
Copy link

judas-christ commented Jan 16, 2023 •
edited
Loading

This is our fork where it works: Olink-Proteomics@d4273fa

The issue seems to be that the shinyjs object is called before being instantiated. It's unclear why this happens only in Firefox. Moving this line last (ie from line 38 to 41 as you can see in the commit above) fixed it:

shiny::tags$script(shiny::HTML(controllers)),

Note that while this works for us, we haven't tested it extensively so it might cause issues with other setups.

@daattali
Copy link
Owner

Thanks, that's helpful!
I actually made some changes to that setupJS() function yesterday and it's no longer being used. The system for injecting javascript is now different. It's experimental for now but from my testing so far it seems to hold up. I'm curious if the latest github version fixes this issue.

@daattali
Copy link
Owner

As mentioned last night, I'm currently working on re-writing shinyjs to make it much easier for users. It should now be simpler to include it in an htmlTemplate, you don't need to use the inject script anymore, you don't even need to do anything in the html. All you need to do now is call useShinyjs() and optionally extendShinyjs() in the server, but in a special way. I added two examples showing this: using extendShinyjs() with a script and using extendShinyjs() with a string

I haven't documented it yet because this is still a work in progress so I'm hoping to simplify it even more. I would appreciate if you can try this method and let me know if it works or not.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@daattali @judas-christ @markwynter