CODEWITHSUNDEEP
iostitaniumparent-childappceleratoraddeventlistener
user7420795
user7420795

Reputation: 199

How to update image of image view using parent child relationship in Appcelerator?

I have created the radio buttons in my iOS app as shown in the image below. I want to change the image of the remaining radio button from selected to unselected as soon as user clicks on any of the radio button.

Below is my code of eventlistener.

       vwBottomContainer.addEventListener("click", function(e) {
            Ti.API.info('e.source.id: ' + e.source.id);
            if (e.source.id == "CheckBox") {
                if (e.source.status == "unselected") {
                    e.source.status = "selected";
                    e.source.image = "/images/checked.png";
                } else {
                    e.source.status = "unselected";
                    e.source.image = "/images/unchecked.png";
                }
            } else if (e.source.id == "TextBox") {
                e.source.editable = true;
                e.source.focus();
            } else if(e.source.id == "radiobutton") {
                var t = null;
                for(t = 0 ; t < e.source.parent.parent.children.length; t++) {
                    e.source.parent.parent.children[t].children[0].image = "/images/radio-button_ori.png";
                    e.source.parent.parent.children[t].children[0].status = "unselected";
                    Ti.API.info('e.source: '+JSON.stringify(e.source.parent.parent.children[t].children[0]));
                }
                t = null;

                e.source.image = "/images/radio-button_active.png";
                e.source.status = "selected";
            }
        });

The for loop above in the code is unable to change the image of other radio buttons from selected to non selected

can you tell me what I am doing wrong? Also let me know if you want any further clarification.

Thanks in Advcance.

enter image description here

Upvotes: 0

Views: 95

Answers (2)

miga
miga

Reputation: 4055

Are you sure that the nesting is correct? So e.source.parent.parent.children[t].children[0].image = "/images/radio-button_ori.png"; is the radio button you want to change?

Try a different setup:

Are you using Alloy? Then just give the images an own ID and access it directly.

If not: Push all your radiobutton images into an array, add a position to vwBottomContainer and access the radiobutton out of the array:

var rbts = [];
rbts.push(radioButtonImage1);
rbts.push(radioButtonImage2);
rbts.push(radioButtonImage3);
outerViewWithClickEvent1.radioID = 0;
outerViewWithClickEvent2.radioID = 1;
outerViewWithClickEvent3.radioID = 2;

inside the onClick event:

rbts[e.source.radioID].image = "newImage.jpg";

It would also help if you show the code/view of your radio button.

Upvotes: 0

guillefix
guillefix

Reputation: 994

If you're using a ListView, you should use updateItemAt method.

Give a look at this example from Appcelerator documentation (http://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.ListItem):

$.listView.addEventListener('itemclick', function(e) {
    var item = $.section.getItemAt(e.itemIndex);
    if (item.properties.accessoryType == Ti.UI.LIST_ACCESSORY_TYPE_NONE) {
        item.properties.accessoryType = Ti.UI.LIST_ACCESSORY_TYPE_CHECKMARK;
        item.properties.color = 'red';
    } else {
        item.properties.accessoryType = Ti.UI.LIST_ACCESSORY_TYPE_NONE;
        item.properties.color = 'black';
    }
    $.section.updateItemAt(e.itemIndex, item);
});

Upvotes: 1

Related Questions