Changewheel functionality How it works?

Question

First of all I want share my appreciation for the amazing work done with this snippet (it's really really a cool tool).

I am trying to use mobiscroll in an app that I am currently developing. I love how easy is to use and customize the mobiscroll tool.

What I really find just obscure, is how use the functionality changeWheel. I tried many things but never with success.

What I am trying to accomplish is to change the values of the first wheel (change completely and regenerate the first wheel), when in my second wheel I select (actually what I want is an on change event) one of the two parameters present.

I build up a function that create the arrays for the two wheels, and that change array of the first wheel relatively to the index of the second wheel returned. (I can see that the function works, and that it generate the exact values for the wheels).

How then I can implement this with the onchange event on the inst, using the function changewheel???

Is this function changewheel suppose to do what I am looking for?

To be very clear, think as an example:

first wheel weight of a person second wheel unit of measurement (kg or Lbs)

If I change on the spot Lbs to Kg, I want that the first wheel reflect the changes (updating the values available) - if for example i set the limit weight between 0 and 80kg the correspondent value in lbs need to be between 0 and 177lbs (the whole conversion is handled separately with another customized function, and it works exactly as I want).

I can't figure out how instead implement the changewheel event....an example or some more deep explanation will be really useful.

Thank you so much Best Dinuz

Paulo Almeida · Accepted Answer · 2013-06-26T16:31:01.933

here goes a simple explanation, if you want to update the values of a diferent whell you need to pass the instance of the mobiscroll and call the method options

$(function(){
         var filtersMetrics = [{}];
        var wheelPosMetrics = []
        var wheelPosFunc1 = [];
        var wheelPosFunc = [];

        wheelPosMetrics[0] = "Connection";
        wheelPosMetrics[1] = "Shared";
        wheelPosMetrics[2] = "Deleted";

        filtersMetrics[0]['Metrics']=wheelPosMetrics;

        wheelPosFunc1[0] = "Count";

        wheelPosFunc[0] = "Count";
        wheelPosFunc[1] = "Sum";
        wheelPosFunc[2] = "Avg";

        filtersMetrics[0]['Func']=wheelPosFunc1;


        var metricsScroller = $("#select").mobiscroll().scroller({
            theme : 'android',
            display : 'inline',
            mode: 'scroller',
            wheels: filtersMetrics,
            rows: 3,
            'onChange' : function(v, i , e){


                if(v[0]==1){
                    filtersMetrics[0]['Func']=wheelPosFunc;
                    metricsScroller.mobiscroll('option', 'wheels', filtersMetrics); 
                }else{
                    filtersMetrics[0]['Func']=wheelPosFunc1;
                    metricsScroller.mobiscroll('option', 'wheels', filtersMetrics);
                }



            }
        });

});

I have used the 2.5 version

When display is set to 'modal' this closes the scroller. Is there a way to get around this? — Dean, May 16 '13 at 05:48
so its seems to mo based on the docs on 'modal' options Scroller appears as a popup at the center of the viewport.while in 'inline' - If called on div element, scroller is placed inside the div (overwriting existing content), otherwise is placed after the original element. What that means is that modal is use when you want to launch has a popup, and you maybe want to hide the input field and create a proper button or just having the input field, on the onther side inline means it will always come out, has part of the DOM tree and for so has visible html — Paulo Almeida, May 24 '13 at 17:32
That's right, but if you try to update the scroll wheel while the modal popup is visible it forces it closed. This is a problem, I need it to stay open — Dean, May 26 '13 at 21:43

score 0 · Answer 2 · answered May 15 '15 at 22:01

I also wasn't able to get changeWheel to work, but I found a workaround (I'm using Mobiscroll v2.15.1).

In the onChange–Handler you can set the default values dynamicaly:

.
.
.
onChange: function (values) {

   // here your logic for the current values            

   if (/*here your condition*/) {

      // Example for three wheels:      
      var curWheel = ["1", "2", "3"];

      // set the default values
      $(/*your element*/).mobiscroll("setArrayVal", curWheel, true);
    }
},
.
.
.

Changewheel functionality How it works?

2 Answers2

Linked