jquerycldrjquery-globalize

jQuery call to undefined Globalize.format function


I am trying to get globalize working with the spinner widget in jQuery. My code includes are ordered as such:

<script type='text/javascript' src='/js/jquery-2.0.3.min.js'></script>
<script type='text/javascript' src='/js/jquery-migrate-1.2.1.min.js'></script>
<script type='text/javascript' src='/css/jquery/jquery-ui.js'></script>

<script type='text/javascript' src="/resources/js/cldr.js"></script>
<script type='text/javascript' src="/resources/js/cldr/event.js"></script>
<script type='text/javascript' src="/resources/js/cldr/supplemental.js></script>

<script type='text/javascript' src="/resources/js/globalize.js"></script>

<script type='text/javascript' src="/resources/js/globalize/message.js"></script>
<script type='text/javascript' src="/resources/js/globalize/number.js"></script>
<script type='text/javascript' src="/resources/js/globalize/plural.js"></script>
<script type='text/javascript' src="/resources/js/globalize/date.js"></script>

<script type='text/javascript' src="/resources/js/globalize/currency.js"></script>
<script type='text/javascript' src='js/index.js'></script>

I try to load the cldr stuff like their documentation says and after that i go through each spinner container and apply the spinner widget based on the input name:

$.when(
  $.get( "/resources/js/cldr/main/en/numbers.json" ),
  $.get( "/resources/js/cldr/main/en/currencies.json" ),
  $.get( "/resources/js/cldr/supplemental/likelySubtags.json" ),
  $.get( "/resources/js/cldr/supplemental/numberingSystems.json" ),
  $.get( "/resources/js/cldr/supplemental/ordinals.json" ),
  $.get( "/resources/js/cldr/supplemental/plurals.json" )
).then(function() {

  // Normalize $.get results, we only need the JSON, not the request statuses.
  return [].slice.apply( arguments, [ 0 ] ).map(function( result ) {
      return result[ 0 ];
  });

}).then( Globalize.load ).then(function() {

  /**
        Add a spinner to each spinner class
    */
    $(".spinner").each(function () {

        var $S = $(this).children("input");
        var name = $(this).attr("name");

        switch (name) {

            case "one-count":

                $S.spinner({
                  min: 0,
                  step: 1,
                  start: 0
                });

            break;

            case "currency-1k-count":

                $S.spinner({
                  min: 0,
                  step: 1000,
                  start: 0,
                  numberFormat: "C"
                });

            break;
        }
    });
});

When I include the numberFormat in the property section of the spinner widget and go to click the spinner on the page, it throws an error saying:

Uncaught TypeError: Globalize.format is not a function jquery-ui.js(line:12778)

I go to the jquery-ui.js file at line 12778 and i see it is making a call to Globalize.format. So i go into my Globalize.js file and there is no function called format... what gives?


Solution

  • from version 1.x of globalize library, doesn't have the format function for formatting numbers in all the modules, but whether its has method per each module in specific like currencyFormatter for the currency module. the solution that I look is that:

    var locale = 'es-CO';
    
    $.when(
      $.getJSON( window.Misc.urlFull("cldr/supplemental/likelySubtags.json") ),
      $.getJSON( window.Misc.urlFull("cldr/main/"+ locale +"/numbers.json") ),
      $.getJSON( window.Misc.urlFull("cldr/supplemental/numberingSystems.json") ),
      $.getJSON( window.Misc.urlFull("cldr/supplemental/plurals.json") ),
      $.getJSON( window.Misc.urlFull("cldr/supplemental/ordinals.json") ),
      $.getJSON( window.Misc.urlFull("cldr/main/"+ locale +"/currencies.json") ),
      $.getJSON( window.Misc.urlFull("cldr/supplemental/currencyData.json") )
    ).then(function() {
    
      // Normalize $.get results, we only need the JSON, not the request statuses.
      return [].slice.apply( arguments, [ 0 ] ).map(function( result ) {
        return result[ 0 ];
      });
    
    }).then( Globalize.load ).then(function() {
    
      Globalize.locale( locale );
    
      $.widget( "ui.sspinner", $.ui.spinner, {
        _parse: function( val ) {
          if ( typeof val === "string" && val !== "" ) {
            val = window.Globalize && this.options.numberFormat ?
              Globalize.numberParser({ maximumFractionDigits : 10 })(val) : +val;
          }
          return val === "" || isNaN( val ) ? null : val;
        },
    
        _format: function( value ) {
          if ( value === "" ) {
            return "";
          }
    
          if( window.Globalize && this.options.numberFormat ){
    
            this.options.currency || ( this.options.currency = 'COP' );
    
            switch( this.options.numberFormat ) {
              case 'C': return Globalize(this.options.culture).formatCurrency( value, this.options.currency ); break;
              default: return Globalize(this.options.culture).formatNumber( value ); break;
            }
          }
        }
      });
      
      
      var config = {
        '.spinner-currency' : {
          step: 5,
          start: 1000,
          min: 0,
          numberFormat: "C",
          culture: 'es-CO',
          currency: 'COP'
        },
        '.spinner-quantity': {
          step: 1,
          start: 1,
          min: 0
        }
      };
    
      for (var selector in config) {
    
        $(selector).each(function(index, el) {
          var $el = $(el);
          var spinner = {};
    
          if( !$el.sspinner( "instance" ) ){
            spinner = $el.sspinner(config[selector]);
    
            if( $el.val() == '' )
              spinner.sspinner( "value", 0 );
          }
        });
      }
    });