How to add event listener to dynamically created form

Accepted Answer

It looks like the approach you might have to take is go within the picker's "done" event listener. Maybe fire an app event inside of the picker's "done" event listener. Then you would need an app listener that would capture the id of the picker and it's value.

Inside of semiModalPicker.js you'll see this code near line 61:


    done.addEventListener('click', function(e) {
        if (type === Ti.UI.PICKER_TYPE_DATE) {
            o.textField.value = dateToString(picker.value);
        } else {
            o.textField.value = picker.getSelectedRow(0).title;    
        }

        modalWin.close();
    });

I would modify it to be something like:


    done.addEventListener('click', function(e) {
        if (type === Ti.UI.PICKER_TYPE_DATE) {
            o.textField.value = dateToString(picker.value);
        } else {
            o.textField.value = picker.getSelectedRow(0).title;    
        }

        var picker_value = o.textField.value // gets the value based on the if/else outcome directly above
        Titanium.App.fireEvent(picker.id + '_updated', picker_value) // fires event for the picker named after the picker and passes in the value.
        modalWin.close();
    });

So, if you call your picker in your var fields by using id:my_picker, you will create a custom fired event for that picker (and any other picker you create) called 'my_picker_updated', and pass in it's value. You could update a global value with it's listener or perform some logic based on which picker is fired. There are probably better approaches, this is just one.

I'm not able to test this, but it probably isn't too far off.

— answered January 27th 2012 by Darren Adams
permalink

2 Comments

PS. For clairification, the done.addEventListener is fired when the user presses done on the picker.

— commented January 27th 2012 by Darren Adams
Darren, thanks a ton…not 100% what I needed but put me on the right track. For Android I need added the code below on form.js where the picker is created.
```
fieldObject.addEventListener('change',function(e){
    form.fireEvent(id, e.selectedValue);    
});
```
On my window that used the form I added the cod below, where hazardType is the particular picker I an interested in it gets it from "id" above.
```
form.addEventListener('hazardType', function(e){
    //use "e" for logic of app...
});
```
Hope this helps someone in the future.

— commented January 30th 2012 by Rich Place

I use the example in the link in the OP to crate a form I want with a few pickers and a few text fields. For one of the text fields I want to populate it with info from my data base after the user makes a picker selection. So the user makes a picker selection and I want to look up some DB info and populate the text field below that picker.

I can't seem to figure out how to make an event and fire that event similar to the submit button in the example, but for one of the pickers. Would I need to modify the forms.js example to create the desired event at the time the picker is created? That seems to negate the benefits of a generic form creator.

Oops, sorry Rainer. This should have been a comment back to your comment not a new answer.

Not entirely sure what it is you want to do but this might be what you want. Add the event listener to your window, say you call it e. you can then do e.source to determine which field it came from.

Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

How to add event listener to dynamically created form

4 Answers

Accepted Answer