autoLoader.js - The Little Script That Could - I Think I Can, I Think I Can

Please contact me is you have any questions, comments and or suggestions at bob{@}decorplanit.com (remove brackets)

In its simplest form it is only three lines long and calls the autoNumeric plugin function with defaults on the ready state. You can use any jQuery selector to specify which input field that will use the plugin. Please note the following:

• If you use an id as the selector and the id name uses special characters (period, colon, right and left brackets) they will need to be escaped (\\., \\:, \\[, \\]). You can also use $( document.getElementById( id ).autoNumeric(); that does not require escaping the special characters (thanks Evan C.). Please see this for a in depth review on special characters.
• On this site I use the class="auto' just for consistency.

jQuery(function($) {
	$('selector').autoNumeric();// initiates AutoNumeric with defaults  
});

You can also pass options to autoNumeric that override the defaults from the autoLoader function. There are nine options that can be passed, see the demo page for details. Please note the precedence order: defaults - options - metadata.

jQuery(function($) {
	$('selector').autoNumeric({
		mNum: 6, //nine options available
		mDec: 3  //see demo page for details
	});
});

When using class (auto on my demo page) as your selector you can use addClass to dynamically to additional input fields. Please note the two following samples:

First: when the addClass is used prior to autoNumeric is called. The newly added input field with the class=auto will be recognized by the plugin.

jQuery(function($) { // example of adding class prior to initiating autoNumeric
	$('selector').addClass('auto'); // the input field will inherited the options
	$('input.auto').autoNumeric({
		mNum: 6,
		mDec: 3
	});
});

If you add a input field after autoNumeric() has been initiated you will need to call autoNumeric() again. Note options can be passed.

jQuery(function($) { //example of adding class after autoNumeric has been loaded
	$('input.auto').autoNumeric({options}); // initiates AutoNumeric with defaults
	$('selector').addClass('auto').autoNumeric({options});// AutoNumeric is required! 
});

The autoLoader function can easily be modified to retrieve data from the server to populate the input fields with the proper format. The following example uses a PHP created JSON data file and the $.fn.autoNumeric.Format(id, value) function. Please note you are not limited to JSON data only - it is totally up to you where on how the data is retrieved.

The non-formatted data will be formatted to the target input field assigned format. Again remember the precedence order: defaults - options - metadata.

jQuery(function($) {
  $('input.auto').autoNumeric();
  $.getJSON("test_JSON.php", function(data) {
    var valueFormatted = '';
    $.each(data, function(key, value) { // loops through JSON keys and returns value
       valueFormatted = $.fn.autoNumeric.Format(key, value);				  
       $('#' + key).val(valueFormatted);
    });
  });
});
// JSON values can be sent as text or numeric values (Note: this has mixed values)
{
  "idA": "1355.527",
  "idB": "9712547",
  "idC": 0.524, 
  "idD": 135544.5244
}

Below is a live example of populating the input field with JSON data.

Back to the main page

Please contact me is you have any questions, comments and or suggestions at bob{@}decorplanit.com (remove brackets)