选择器更改事件未在Titanium中首次触发

Question

I am using picker in my Tiatnium Application.

Picker data is loading from json response.I first store API data in Temporary array and then adding data to picker.

The problem is when I click picker elements for the first time the change event doesn't get fired. After first click is done then if I click on any element it works as expected.

Here is the small code snippet of it

for (var i = sorted.length - 1; i >= 0; i--) {
            pickerData[i] = Ti.UI.createPickerRow({
                title : sorted[i],

        });
            Ti.API.info('From sorted ' + i + sorted[i]);
        }
$.picker.add(pickerData);
$.picker.addEventListener('change', function(e) {
            countRow = 0;
            data.length = 0;
            showfilterData(e.row.title, jsonResponse);
        });

So what is the problem.

Can anyone explain?

Answer 1

The following example works fine:

index.xml

<Alloy>
    <Window id="mainWindow">
    </Window>
</Alloy>

index.js

var picker = Titanium.UI.createPicker();
var data = [];
data[0]=Ti.UI.createPickerRow({title:'Bananas'});
data[1]=Ti.UI.createPickerRow({title:'Strawberries'});
data[2]=Ti.UI.createPickerRow({title:'Mangos'});
data[3]=Ti.UI.createPickerRow({title:'Grapes'});
picker.add(data);
picker.addEventListener('change', function(e) {
    console.log(e.row.title);
});
$.mainWindow.add(picker);
$.mainWindow.open();

Every time (also the first one) that I click on a row of the picker I get the proper log on the console. Tested on Titanium 4.1.0, iOS 8.4

The picker works fine. I guess there is something else wrong in your code (something you didn't show us).

Let me know if this example doesn't work for you

Answer 2

This is the first time I am giving answer to my own question. For all those who have problem in getting first click of picker this may help you.

• If you write picker in XML file then you might face this issue so do I because we add data from the code and picker is already displayed when the window opens so add picker in your js file...this may not be the technical description but I tried this so I assume this works for all.I am posting both ways in which it doest not work(means first click issue) and the way in which it works as expected.

Here is the code in which you might face issue.

<Alloy>
<Window id="winpast" class="container" title="Past issues" onOpen="openpastIssues">
    <View id="view2"  width="Ti.UI.FILL" height="Ti.UI.FILL" backgroundColor="#A9F5A9" >
        <View id="viewcheck1" >
            <Label id="title" width="Ti.UI.SIZE" text="Past Issues" height="Ti.UI.SIZE" textAlign="Ti.UI.TEXT_ALIGNMENT_CENTER"></Label>
            <ImageView id="menuImg" image="/images/menu.png" onClick="showsideBar" left="5"></ImageView>
            <Picker id="picker"  selectionIndicator="true" height="Ti.UI.SIZE" width="Ti.UI.SIZE" right="10">
            </Picker>
        </View>
    </View>
</Window>

js file

for (var i = sorted.length - 1; i >= 0; i--) {
            pickerData[i] = Ti.UI.createPickerRow({
                title : sorted[i],

        });
$.picker.add(pickerData);//picker is added in xml file and data is added now
picker.addEventListener('change', function(e) {
            alert(e.row.title);

        });
$.winpast.open();

The above snippets may have issue with picker first click.

Now here is the correct way that I implemented to remove this issue with the advice of @Riccardo Bucco

I just gave a trial using his suggestion and found out this.

Here is proper code.

<Alloy>
<Window id="winpast" class="container" title="Past issues" onOpen="openpastIssues">
    <View id="view2"  width="Ti.UI.FILL" height="Ti.UI.FILL" backgroundColor="#A9F5A9" >
        <View id="viewcheck1" >
            <Label id="title" width="Ti.UI.SIZE" text="Past Issues" height="Ti.UI.SIZE" textAlign="Ti.UI.TEXT_ALIGNMENT_CENTER"></Label>
            <ImageView id="menuImg" image="/images/menu.png" onClick="showsideBar" left="5"></ImageView>
        </View>
    </View>
</Window>

js file

var picker = Ti.UI.createPicker({
            right:10
        });
for (var i = sorted.length - 1; i >= 0; i--) {
            pickerData[i] = Ti.UI.createPickerRow({
                title : sorted[i],

        });
            Ti.API.info('From sorted ' + i + sorted[i]);
        }
picker.add(pickerData);//we add data here and picker is not added yet
$.viewcheck1.add(picker);//after adding whole data we are adding picker in the view so it resolves the first click issue.
 $.winpast.open();

The second way works fine for me and there is no first click issue with picker.If any thing in my answer is not properly mentioned then please correct me.

Hope it helps.

Answer 3

This is long time to answer this question, but I have found a new way to do this task using Alloy XML as well.

1. Creating picker in js file works well in change event.
2. If you have created picker in XML file and you are adding picker rows in js file, then you need to call the below method twice. It's little odd but it works neatly.

index.xml

<Alloy>
<Window>
    <Picker id="PICKER" width='70%' height="Ti.UI.SIZE" onChange="changeValue"></Picker>
<Window>
</Alloy>

index.js

(function setPickerValues() {
   $.PICKER.add(rows)   // rows is an array of Ti.UI.PickerRows

   // call these two lines to make the change event work
   $.PICKER.setSelectedRow(0, 1);   // this will set the picker row to the row at index 1
   $.PICKER.setSelectedRow(0, 0);   // now it is necessary to set row at index 0 again to make it work.
})();

function changeValue(e) {
   Ti.API.info('Current Row = ' + e.rowIndex);
}

I know this way is little odd, but yes it works pretty well and takes less lines of code than creating whole picker in js file.