CODEWITHSUNDEEP
mobiletitaniumtitanium-alloy
Sparragus
Sparragus

Reputation: 913

How to use UI object inside an included view in Titanium Alloy

I have four files that look similar to these:

index.xml

<Alloy>
    <Window>
        <View class="container">
            <View id="report">

                <!-- Adds a textfield for name entry -->
                <Require type="view" src="textfield" id="name"/>

                <Button id="checkNameValue" title="Check Value"  width="100" height="40" onClick="checkname"/>
            </View>
        </View>
    </Window>
</Alloy>

index.js

function checkname(e) {
    alert("Your name is " + $.name.getView('nameTextField').value);
}

textfield.xml

<Alloy>
    <View id="nameView">
    </View>
</Alloy>

textfield.js

var nameTextField = Titanium.UI.createTextField({
    hintText:"Type your name",
    height:40,
    width:300,
    top:20,
    borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});

$.nameView.add(nameTextField);

When I try clicking the Button to read the name value, I get an error:

message = "'undefined' is not an object (evaluating $.name.getView(\"nameTextField\").value')";

What is going wrong and how can I fix this?

Upvotes: 0

Views: 2325

Answers (2)

Ashish
Ashish

Reputation: 2018

Simply you can add your Textfield into the included file as well like

textfield.xml

<Alloy>
    <View id="nameView">
          <TextField value="" hintText="Type Here" id="textfield" />
    </View>
</Alloy>

Now you can access the textfield easily into your index file as :

index.js

alert($.name.textfield.value);

Upvotes: 0

Aaron Saunders
Aaron Saunders

Reputation: 33335

try changing textfield.js to

$.nameTextField = Titanium.UI.createTextField({
    hintText:"Type your name",
    height:40,
    width:300,
    top:20,
    borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});

$.nameView.add($.nameTextField);

Then your alert code should look like this

alert("Your name is " + $.name.nameTextField.value);

Upvotes: 2

Related Questions