jQuery UI spinner - suffix & prefix

Question

I have seen that it is possible to add a suffix to the jQuery UI spinner with the help of the widget functionality.

Now, I was trying to add a prefix, too. This failed and I cannot figure out why.

The error thrown is: Uncaught TypeError: value.substring is not a function for the prefix.

I am using jQuery v1.12.4 and jQuery UI v1.12.1.

Is there anybody out there that can help?

$(document).ready(function() {

  $('.spinner1').spinner();

  $.widget('ui.suff_spinner', $.ui.spinner, {
    _format: function(value) {
      return value + 'test';
    },
    _parse: function(value) {
      return parseInt(value);
    }
  });
  $('.spinner2').suff_spinner();

  $.widget('ui.pref_spinner', $.ui.spinner, {
    _format: function(value) {
      return 'test' + value;
    },
    _parse: function(value) {
      return parseInt(value.substring(4));
    }
  });
  $('.spinner3').pref_spinner();

});

.container {
  width: 400px;
  text-align: right;
}

label {
  display: inline-block;
  text-align: right;
  vertical-align: top;
  padding-right: 0.4em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="container"><label for="spinner2">Normal spinner</label><input name="spinner1" id="spinner1" class="spinner1" /></div>
<div class="container"><label for="spinner1">Spinner with suffix</label><input name="spinner2" id="spinner2" class="spinner2" /></div>
<div class="container"><label for="spinner3">Spinner with prefix</label><input name="spinner3" id="spinner3" class="spinner3" /></div>

Thanx in advance...

Answer 1

The problem is that _parse is called 2 times, one time to make the calculation and one time to change the aria-valuenow attribute. So one first time there's a substring, but not the second.

You could use a regexp to make it more flexible. Like this for example:

$(document).ready(function() {

  $('.spinner1').spinner();

  $.widget('ui.suff_spinner', $.ui.spinner, {
    _format: function(value) {
      return value + 'test';
    },
    _parse: function(value) {
      return parseInt(value);
    }
  });
  $('.spinner2').suff_spinner();

  $.widget('ui.pref_spinner', $.ui.spinner, {
    _format: function(value) {
      return 'test' + value;
    },
    _parse: function(value) {
      let regexp = /\-?\d+/.exec(value)
      return  regexp ? parseInt(regexp[0]) : NaN;
    }
  });
  $('.spinner3').pref_spinner();

});

.container {
  width: 400px;
  text-align: right;
}

label {
  display: inline-block;
  text-align: right;
  vertical-align: top;
  padding-right: 0.4em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="container"><label for="spinner2">Normal spinner</label><input name="spinner1" id="spinner1" class="spinner1" /></div>
<div class="container"><label for="spinner1">Spinner with suffix</label><input name="spinner2" id="spinner2" class="spinner2" /></div>
<div class="container"><label for="spinner3">Spinner with prefix</label><input name="spinner3" id="spinner3" class="spinner3" /></div>