Run function on jquery knob release

Question

I have a form that calculates an estimate. I want the sales person to be able to mark up the estimate, by a percentage using jquery-knob. I have it all working, but I want to have the value change on release of the knob, or change for that matter, either one, so they don't have to hit the calculate button again. I haven't been able to get query-knob to fire anything on release or change, I'm sure I am missing something very simple here, but it just escapes me.

Here is the input element itself:

<input type="number" name="adjust" id="adjust" value="100" data-min="75" data-max="125" data-step="2" class="dial notstored adjuster" data-width="150" data-cursor=true data-thickness=.4 data-fgColor="#1C5C67" data-inputColor="black" data-bgColor="#FBFBFB"/>

Here is are some of the calls I have tried, the first one not following the knob readme at all (edit: I have also tried wrapping these in document ready):

<script>
$("#adjust").change(function () {
                alert('monkey')
            });
</script>

And here is one using the knob documentation:

<script>
$("#adjust").knob({
                'release' : function () { alert('monkey'); }
            });
</script>

I've tried many other various incarnations of theses, but it would just make this post longer than it already is. Thanks for any guidance.

EDIT: solved. When you have multiple of these in a form and you call them based on class, but one should fire something on release, make sure it is called by ID and does not have the class.

Try wrapping your code in a DOM ready function `$(document).ready(function() { //your stuff });` — tymeJV, Jul 30 '13 at 14:42
@tymeJV - Tried that, thanks though. I am also testing all of this in a clean file, just to make sure there aren't any conflicts. — jkuhns5, Jul 30 '13 at 14:50
Works here: http://jsfiddle.net/wewKx/ Make sure you have your imports correct and that your script is either in `$(document).ready(function() { }` or comes after the `input` element. — cfs, Jul 30 '13 at 14:53
also all your attributes on your input should be in quotes, even if they are not string values. — cfs, Jul 30 '13 at 14:55
@cfs Thank you. I have about 8 of these things in a multipage form. I was initializing them all based on class, but this one on id, though I still had the class in it, hence no fire... I will fix my attributes. Thank you again, appreciated. — jkuhns5, Jul 30 '13 at 15:16

score 0 · Answer 1 · 2019-12-12T09:23:56.730

sorry ! i see this in 2019 almost: 2020 ! :D thanks Anthony Terrien ! I really do not like spinners from numeric input forms like many stuff doesn't work proper !

well,this is my vision how these could replace spinners : (just when you place this code in a proper html doc just click / push inside to edit)

    <div class="py-5 text-center pi-draggable" draggable="true">
    <div class="container">
      <div class="row">
        <div class="col-md-4">
          <input type="text" class="  " data-cursor="true" value="56" onfocus="thisknob(this);">
        </div>
        <div class="col-md-4">
          <input type="text" class="  " data-cursor="true" value="56" onfocus="thisknob(this);">
        </div>
        <div class="col-md-4">
          <input type="text" class="  " data-cursor="true" value="56" onfocus="thisknob(this);">
        </div>
      </div>
    </div>
  </div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"> </script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Knob/1.2.13/jquery.knob.min.js"> </script> <script>
    var current = null;

    function thisknob(what) {
      target = what;
      if (current != null) resetknob();
      current = $(what).knob({
        min: 0,
        max: 300,
        stopper: true,
        'release': function(v) {
          // console.log('da');
          resetknob();
        }
      });
    }

    function resetknob() {
      value0 = $(current[0]).find('input')[0].value;
      //console.log($(current[0]));
      $(current[0]).parent().html('<input type="text" class="  " data-cursor="true" value="' + value0 + '" onfocus="thisknob(this);" >');
      current = null;
    }
  </script>

Run function on jquery knob release

1 Answers1