All geek questions in one place

What JavaScript code implements the brilliant numericInput widget?

A call to numericInput() , for example:

 numericInput("obs", "Observations:", 10, min = 1, max = 100)

Generates HTML as follows:

 <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, the JavaScript code provided by one of the scripts included in the HTML doc header finds the <input> element and displays it using the interactive widget displayed below:

enter image description here

I find it difficult, however, to find out where the code is stored that finds this <input> element, and then starts creating the corresponding widget. Is it in Shiny's own JavaScript, or is it borrowed from Bootstrap or jQuery UI or one of the other plugins that come with brilliant ones ?

My question (s):

Where is the JavaScript code that contains the widget depicted above and associates it with the HTML <input> element? And how from this code could I find out on my own?

Additional, possibly useful information

This section of the script "shiny.js" finds the <input> element of interest and provides methods that you can get and set the value of the widget. It does not show (as far as I see) 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 in a brilliant- generated HTML file, resulting in a numericInput widget. The scripts that he refers to can mainly 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>
+5
source share
1 answer

Here's the wrong assumption, which makes it so hard for me to understand:

Then, presumably, in the browser, the JavaScript code provided by one of the scripts included in the HTML doc header finds the element and displays it using the interactive widget below:

In fact, as @epascarello notes, modern browsers support <input type="number"> . (For additional documentation on this fact, along with a long list of features whose support has been enabled by including JavaScript in these modern web browsers, see Chapter 4, “HTML for Web Designers . ” )

+2
source

Source: https://habr.com/ru/post/1234330/

More articles:


All Articles