Hello Observable Community!
I am learning about interactive, dynamic reporting: where a user selects a option from a dropdown menu and the associated reporting elements change. I have found that, as a notebook gets more complex, the dropdowns stop working.
For example, in this draft notebook, the first three dropdown menus all appear to work, but the fourth does not (under the sub-section marked ‘Compliance’):
Note: I am using the dropdown code from @jgrunik’s fork of Jeremy Ashkenas’ input collection:
function dropdown(options) {
let fy = html `<select>`
for (var i = 0; i < options.length; i++) {
var option = document.createElement("option");
option.value = options[i];
option.text = options[i];
fy.appendChild(option);
}
return fy;
}
I am getting my error using Google Chrome [Version 66.0.3359.170 (Official Build) (32-bit)]. Unfortunately, I only have access to a work computer for the next few days, and as a consequence my browsers are limited to Chrome and IE (that is, I don’t have admin privileged to install and test with Firefox).
Can someone validate if you are experiencing the same thing? Any ideas about why this might be happening and how to solve?
I appreciate your help and guidance!
Sincerely,
Aaron
A bit of an update:
I visited the notebook with a mobile device using Safari, and the fourth dropdown appears to work there. I also visited with Chrome on a mobile device and the dropdown worked fine, too. So the issue appears to be limited to my desktop and to Chrome.
After rebooting my computer using Chrome, however, I am still hitting the same problem described above: the first three work, the fourth doesn’t.
To troubleshoot further, I borrowed a friend’s computer to view this site with Firefox [Version 60.0.1], but it would not let me connect to the page, saying:
The owner of aaronkyle.static.observableusercontent.com has configured their website improperly. To protect your information from being stolen, Firefox has not connected to this website.
and:
aaronkyle.static.observableusercontent.com uses an invalid security certificate.
The certificate is not trusted because the issuer certificate is unknown.
The server might not be sending the appropriate intermediate certificates.
An additional root certificate may need to be imported.
Error code: SEC_ERROR_UNKNOWN_ISSUER
Here’s a picture:
… At the same time, the certificate is verified by CloudFlare with a green lock symbol. I haven’t yet managed to get Firefox to connect to see if the error on the fourth dropdown is occurring or not (still not working in Chrome).
Oddly, I get this same error for all Observable pages and can’t get around it.
I would love to hear from anyone about whether there is any known error for different web browsers (or Chrome in particular) whereby one can hit too many repetitions of a n input element on a page? [e.g. DOM select dropdown doesn’t work in Chrome … but this appears to be a bit different, as my dropdowns stop working after the notebook grows too complex…]
Also would be interested if anyone’s had the same trouble with Firefox security issues.
I appreciate any help and guidance!
Sincerely,
Aaron
Very strange, Aaron.
To address the security certificate error first: Looking at your notebook in Firefox 60.0.1, I don’t see that error at all.
Also, the fourth dropdown works for me both in Firefox and Chrome…
@aaronkyle — Inspired by your link to @jgrunik’s dropdowns, I’ve also added select to the inputs notebook, supporting all of the usual bells and whistles, and multiselect.
No idea if that will help you with your non-working select problem … but it might.
2 Likes
@jashkenas
Thank you, Jeremy. Seems like it is “just me”…
I have had several problems with dropdowns and user inputs as I have tried to prototype dynamic reporting documents. What is most puzzling to me is that the effect I am experiencing is quasi-reproducible – at least on my machine. The notebook I linked above is a fork of this more complex version, where the dropdowns started to get buggy me early in the drafting. In the forked version, I stripped out a lot of the extra bits, noted that more of the dropdowns started working, and yet still encountered the buggy behavior after the fourth iteration.
I am glad to know that it’s not ‘supposed’ to happen…
I love Observable and, due to this platform, I have learned more about JavaScript and data visualization in the past few weeks than I have in several years of slow progress learning about web communications and data management. I remain an overwhelmed beginner, and appreciate all the time and guidance that the Observable team and community has given to helping me out. I can’t thank you enough.
I’ll try out your new dropdown selection tool. Thank you for that as well! Your input collection is indeed helpful for those of us just getting started.
Regarding the firefox security issues… I was at a hotel when I tried to access the notebook. My friend and I had installed a fresh version of Firefox, and we couldn’t get around the security limits. We’re now on an extremely low bandwidth connection in the woods and yet the security restriction has disappeared! Maybe Firefox had figured out that the hotel gateway was bad…
With sincere thanks and best wishes,
Aaron
Thank you again for adding dropdowns to your input collection!
The bug I am experiencing must have something to do with the internals of Chrome. The dropdowns in your notebook also don’t work for me until I pull them out for a new notebook, but anything more complex breaks. I also see that, when I click into one of your text input boxes, Chrome gives me a dropdown of options that appear to be generated from searches I’ve ran in Tom’s module debugger tool (i.e. cached in the browser memory). I’ll try clearing all stored browser data and will see where that takes me…
Thanks again. I am so impressed with the generosity of the Observable team and community!
Sincerely,
Aaron
