appcelerator titanium alloy onclick being ignored

Question

I have an onClick listener added to an ImageView in index.xml. clicking the ImageView does not fire the function specified in the index.js, however adding the onClick to the containing view does. It's almost as if the containing view is catching the click and not allowing the contained ImageView to receive it. However, I have several of these and others seem to work fine.

index.xml:

<Alloy>
<Window class="container" onOpen="onWIndowLoad">
    <View id="wholeView">
        <!-- header -->
        <View id="appTopMenuHolder">
            <ImageView id="appMenuButton" image="/images/menu_icon.png" onClick="askWhy"></ImageView>
            <View id="appTitle"></View>
            <View id="newIcon"></View>
        </View>
        <View id="group"> <!-- removed onClick="testViewClick" -->
            <ImageView id="porfilePic" image="/images/profile.png" onClick="askWhy"></ImageView> <!-- removed onClick="askWhy" -->
        </View>
        <!-- scrollable status section -->
        <ScrollView id="statusViewHolder" scrollType="vertical">
        </ScrollView>
    </View>
</Window>

index.js:

function askWhy(e) {
    alert("why");
}

any help or a push in the right direction would be greatly appreciated. Thank you, -NP

kabomi kabomi · Accepted Answer · 2013-11-30T16:24:24

I'm sure that your problems comes from your styles (normally in a .tss file). Try this code in your index.tss file:

".container":{
    backgroundColor: 'black'
}
"#appTopMenuHolder":{
    top:0,
    backgroundColor: 'red',
    height: 100,
    width: Ti.UI.FILL
}
"#appTitle":{
    top:0,
    backgroundColor: 'yellow',
    height:20
}
"#newIcon":{
    top:20,
    backgroundColor: 'white',
    height:20
}
"#group":{
    top: 100,
    backgroundColor: 'blue'
}
"#statusViewHolder":{
    backgroundColor: 'green',
    bottom: 50,
    height: 100,
    width: Ti.UI.FILL
}

Your problem could be that you don't specify position and dimension values to your views. When that happens and a layout property is not set, titanium will center the views and set dimensions to 'auto' value. The 'auto' value, in this case, will fill its parent.

So that your view newIcon could be overlapping the views: appTitle and appMenuButton. Same could happen with statusViewHolder. It could be overlapping all the other views within wholeView.

Saying that, you better specify positions and dimensions of all your components to avoid unexpected behaviors.

appcelerator titanium alloy onclick being ignored

1 Answers