Menu
A call to numericInput(), like this:
numericInput("obs", "Observations:", 10, min = 1, max = 100)
constructs HTML code like this:
<div class="form-group shiny-input-container">
<label for="obs">Observations:</label>
<input id="obs" type="number" class="form-control" value="10" min="1" max="100"/>
</div>
Then, presumably, in the browser, JavaScript code provided by one of the scripts included in the HTML doc's header finds that <input> element and renders it with the interactive widget displayed below:
I'm having a hard time, though, figuring out where the code that finds that <input> element and then triggers production of the corresponding widget is stored. Is it in Shiny's own JavaScript, or in that borrowed from by Bootstrap or jQuery UI or one of the other plugins that ship with shiny?
Where is the JavaScript code that provides the widget pictured above and associates it with the HTML <input> element? And how, from the code that's involved, might I have learned that on my own?
More only possibly useful details
This section of the script "shiny.js" finds the <input> element of interest, and provides methods that can get and set the widget's value. It doesn't (as far as I can see) provide the widget itself.
var numberInputBinding = {};
$.extend(numberInputBinding, textInputBinding, {
find: function(scope) {
return $(scope).find('input[type="number"]');
},
getValue: function(el) {
var numberVal = $(el).val();
if (/^\s*$/.test(numberVal)) // Return null if all whitespace
return null;
else if (!isNaN(numberVal)) // If valid Javascript number string, coerce to number
return +numberVal;
else
return numberVal; // If other string like "1e6", send it unchanged
},
setValue: function(el, value) {
el.value = value;
[... snip ...]
}
});
inputBindings.register(numberInputBinding, 'shiny.numberInput');
And here is a copy of the <head> section of the the shiny-generated HTML file that results in the numericInput widget. The scripts it references can mostly be found here
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="application/shiny-singletons"></script>
<script type="application/html-dependencies">json2[2014.02.04];jquery[1.11.0];shiny[0.12.2];bootstrap[3.3.1]</script>
<script src="shared/json2-min.js"></script>
<script src="shared/jquery.min.js"></script>
<link href="shared/shiny.css" rel="stylesheet" />
<script src="shared/shiny.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="shared/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="shared/bootstrap/js/bootstrap.min.js"></script>
<script src="shared/bootstrap/shim/html5shiv.min.js"></script>
<script src="shared/bootstrap/shim/respond.min.js"></script>
<title>Hello Shiny!</title>
</head>
614
Here's the incorrect assumption that made this so hard for me to figure out:
Then, presumably, in the browser, JavaScript code provided by one of the scripts included in the HTML doc's header finds that element and renders it with the interactive widget displayed below:
In fact, as @epascarello points out, modern browsers themselves support <input type="number">.
(For further documentation of this fact, along with a long list of the features whose support was enabled by the incorporation of JavaScript in these modern web browsers, see Chapter 4 of "HTML for Web Designers".)
54
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
