mobiScroll - Reset value of wheels when clicking extra button

Question

I'm trying to add a thrid functionality to the mobiscroll scroller. First of all some explanations: I have 4 custom created wheels from "0" to "9". The user can insert a 4-digit number here.

Additionally to the standard "cancel" ("Abbrechen") and the "add" ("OK") button i want to implement an reset ("Bestand") button, which sets all wheels within the scroller to the value "0". Adding this additionally button haven't been any problem, but adding the wanted functionality to it unfortunately is. The wanted function just should reset the value of all 4 wheels to the value "0". Following my code so far:

init the wheels....

var whl1 = {'1':'1',
         '2':'2', 
         '3':'3',
         '4':'4', 
         '5':'5', 
         '6':'6',
         '7':'7',
         '8':'8',
         '9':'9',
         '0':'0'};

var whl2 = {'1':'1',
         '2':'2', 
         '3':'3',
         '4':'4', 
         '5':'5', 
         '6':'6',
         '7':'7',
         '8':'8',
         '9':'9',
         '0':'0'};

var whl3 = {'1':'1',
         '2':'2', 
         '3':'3',
         '4':'4', 
         '5':'5', 
         '6':'6',
         '7':'7',
         '8':'8',
         '9':'9',
         '0':'0'};

var whl4 = {'1':'1',
         '2':'2', 
         '3':'3',
         '4':'4', 
         '5':'5', 
         '6':'6',
         '7':'7',
         '8':'8',
         '9':'9',
         '0':'0'};

 var wheel = [{},{},{},{}];
 wheel[0]['1000er'] = whl1;
 wheel[1]['100er'] = whl2;
 wheel[2]['10er'] = whl3;
 wheel[3]['1er'] = whl4;

init the scroller.... (within a loop).......

$('#' + i +'').scroller({
  display: 'modal',
  mode: 'clickpick',
  lang : 'de',
  headerText: function(value)   {
      //Some Stuff in here  
      },
  button3Text: "Bestand",
  button3: function(){
         // this function doesn't work................
         $('#' + i +'').mobiscroll('setValue', ['0', '0', '0', '0']);
  },
  formatResult: function(data) {
     // some other stuff in here
      },
  onSelect: function(valueText, inst) {
    // some other stuff, too
  },
  wheels: wheel,
  height: 40
    });   

I have tried many ways to realize the functionallity, but nothing worked.... does anyone have an idea, how I can fix this issue? Because I already lost a lot of time fixing this issue (2 full days...), I would be very grateful for every resonse or little hint...... Thanks in advance and have a nice week!

Answer 1

I think that inside the button3 function the value of i is always the same, it is not remembered what value it had inside the loop.

You can try to loop through the elements with jquery like this:

HTML:

<input id="t1" class="mobiscroll" />
<input id="t2" class="mobiscroll" />
<!-- .... -->

Javascript:

$('.mobiscroll').each(function() {
    var that = $(this);

    that.mobiscroll({
        display: 'modal',
        mode: 'clickpick',
        lang : 'de',
        headerText: function(value)   {
            //Some Stuff in here  
        },
        button3Text: "Bestand",
        button3: function(){
            // this function doesn't work................
            that.mobiscroll('setValue', ['0', '0', '0', '0']);
        },
        onSelect: function(valueText, inst) {
            // some other stuff, too
        },
        wheels: wheel,
        height: 40
    });
});