jQuery Knob, Submit only on last change/release

Question

I am using jQuery Knob by anthonyterrien with step set to 20. I want to submit the value of the knob to the server. Problem is that change functions is called every time the user moves the knob using right click or left click(release is called only once if click is used ), and release is called every time the user uses scroll on knob. I want to somehow minimize or possible make only a single ajax call to the server, considering that the user is playing with the control.

here is the knob html :

<input class="knob" id="knob_imgid1" data-entryid="knob_imgid1" data-angleOffset=-125 data-angleArc=250 data-step="20" data-displayInput=false data-width="100%" data-fgColor="#428BCA" data-skin="tron" data-thickness=".1" value="20" />

Knob jquery :

$(".knob").knob({ 
        change: function (value) {
            value = parseInt(value, 10); 
        }
        release: function (value) {
            value = parseInt(value, 10); 
        }
});

result i desire :

$(".knob").knob({ 
        change: function (value) {
            //make an ajax call only the last time when this function was called
        }
        release: function (value) {
            //make an ajax call only the last time when this function was called
        }
});

The call results : https://i.stack.imgur.com/RS7S4.png 1

Ultimately i want to minimize ajax calls or make a call once to send value:40 to the server (as per the image result)

Its my first time on stackoverflow please ignore my mistakes. — experimentalcoder, Sep 05 '14 at 11:33
What does 40 have to do with your problem? Do you want to send a call to the server once the value has exceeded 40? Do you want to send the value once the user has stopped and it's greater than 40? etc. — drneel, Sep 05 '14 at 11:58
@drneel .. If possible on the last time the change/release function is called. (as per the image posted 40 is the last value and this should be sent to the server ) — experimentalcoder, Sep 05 '14 at 12:04
@experimentalcoder I'm not sure what you mean by the release function is called every time you scroll the knob. I'm only seeing the release called once — drneel, Sep 05 '14 at 12:05
@drneel .. the knob can be triggered using click and mouse scroll.on mouse scroll the release function is called for every step — experimentalcoder, Sep 05 '14 at 12:10
@experimentalcoder ah. I see. After testing, it looks like if you scroll fast enough, it only fires when you stop. It fires more frequently when you scroll slowly. Not really sure how to deal with that. — drneel, Sep 05 '14 at 12:51

Adriien M · Answer 1 · 2014-09-05T12:31:11.117

0

You can test if the current value = the final value, store the finalValue in your html element:

<input class="knob" .... data-finalValue="20" />

And get it in the Javascript:

$(".knob").knob({ 
     change: function (value) {
        var finalValue = parseInt($(this).data("finalValue"));
        if (value === finalValue)
             // Last call => Ajax call
     }
});

edited Sep 05 '14 at 12:31

answered Sep 05 '14 at 11:45

Adriien M

1,165
7
6

That doesn't work. $(this).attr("value") is undefined & $(this)[0].val() is equal to the value the user started at – drneel Sep 05 '14 at 11:54
In this case, the best is to add a data attribute to the know input like: (I edited my post) – Adriien M Sep 05 '14 at 12:30

score 0 · Accepted Answer · answered Sep 05 '14 at 13:51

Thankyou all, for your quick responses. I created an solution(with a bit.. help from @Adriien M) which minimize the ajax calls using the timeout function

Please let me know if there is better solution than this.

Here is the code:

var sec3lastvalue = 0;
var sec5lastvalue = 0;

function sec5functioncheck(passedvalue) {
    console.log("5Sec Check : Value=" + passedvalue);
    sec5lastvalue = passedvalue;
    if (sec5lastvalue === sec3lastvalue) {
        console.log("Make Ajax Call, Send:" + passedvalue);
    }
}

function sec3functioncheck(passedvalue) {
    console.log("3Sec Check : Value=" + passedvalue);
    sec3lastvalue = passedvalue;
}

var oldvalue = 0;
$(".knob").knob({ 
        release: function (value) {
           value = parseInt(value, 10);
           if (oldvalue != value) {
             setTimeout(function () {
                sec3functioncheck(value);
             }, 3000);
             setTimeout(function () {
                sec5functioncheck(value);
             }, 5000);
           }
           oldvalue = value; 
        }
});

Here is the result: [https://i.stack.imgur.com/NtcXk.png]

jQuery Knob, Submit only on last change/release

2 Answers2