javascriptjquerymobiscroll

Mobiscroll, identify element triggering it


Scenario:

I've got a form which needs multiple time and select pickers, In order to reduce duplications I came up with the plan of having only 2 hidden inputs one for time and the other for the select picker, then I have multiple links/buttons with the class of for e.g. "triggerTime"

HTML:

<input class="hidden" id="timeSelect" />

<button class="triggerTime" id="btn1">Select time 1</button>
<button class="triggerTime" id="btn2">Select time 2</button>
<button class="triggerTime" id="btn3">Select time 3</button>

JavaScript:

//triggering time picker
$('.triggerTime').click(function(e){
    e.stopPropagation();
    e.preventDefault();
    $('#timeSelect').mobiscroll('show');
    //$('#timeSelect').mobiscroll('trigger', name, $.makeArray(e));
});

//activating time picker
$('#timeSelect').mobiscroll().time({
    theme: 'ios7',
    display: 'bottom',
    mode: 'scroller',
    headerText: false,
    onSelect: function(valueText,inst) {
        console.log('onSelect',valueText,inst,this);
    },
    onShow: function(html, valueText, inst) {
        console.log('onShow',html,valueText,inst);
    },
    onBeforeShow: function (html, inst) {
    console.log('onBeforeShow',html,inst,this);
    }
});

Question:

Is there a way to pass on the information of the element triggering the mobiscroll during "onSelect"? I need to know which button triggered the mobiscroll

Component versions:


Solution

  • Only way I could achieve what I wanted (no additional activation needed)

    $('.triggerTime').click(function(e){
        e.stopPropagation();
        e.preventDefault();
        var clickedElement = $(this);
        $('#timeSelect').mobiscroll({
                anchor: clickedElement,
                theme: 'ios7',
                display: 'bottom',
                mode: 'scroller',
                headerText: false,
                preset: 'time',
                onSelect: function (valueText,inst) {
                        clickedElement.html(valueText);
                }
        });
        $('#timeSelect').mobiscroll('show');
    });