Reputation: 2311
I have two pick lists in my app, both are dynamic values coming from DB. The values in to second pick list are displayed based the value selected in first pick list. So change event of first pick list the second pick list values should dynamically change with out refreshing the page.
My code is as follows,
Controller:
$.picker.addEventListener('change',function(e){
languageid = e.row.title;
alert("language is : "+ languageid);
movie.fetch({query: "SELECT * FROM movies WHERE id = '"+languageid+"';"});
var column = Ti.UI.createPickerColumn();
movie.each(function(model){
var row = Ti.UI.createPickerRow({
title: model.get("movieName")
});
column.addRow(row);
});
$.picker1.columns = [column];
});
View:
<Alloy>
<Collection src="UserLanguage"/>
<Collection src="movies"/>
<Window class="container">
<Picker id="picker"/>
<Picker id="picker1"/>
</Window>
</Alloy>
Style:
".container": {
backgroundColor:"black"
}
"#picker": {
width: '90%',
top: '25dp'
}
"#picker1": {
width: '90%',
top: '100dp'
}
Model
exports.definition = {
config : {
"columns": {
"id": "text",
"movieName": "text"
},
"adapter": {
"type": "sql",
"collection_name": "movies"
}
}
};
Screenshot result
The select roe count is correct but the text is not visible. Why?
Upvotes: 3
Views: 473
Reputation: 2702
OK, let's start from beginning because current solution is too messy...
View: (Make sure that you have got models/Movies.js)
<Alloy>
<Collection src="UserLanguage"/>
<Collection src="Movies"/>
<Window class="container">
<Picker id="picker"/>
<Picker id="picker1"/>
</Window>
</Alloy>
Controller: (The problem was that @Coyote selects data from table called movie
not movies
). So it should look like this:
var movies = Alloy.Collections.Movies;
$.picker.addEventListener("change", function(e) {
var column = Ti.UI.createPickerColumn();
movies.fetch({
query: {
statement: "SELECT * FROM movies WHERE id = ?;",
params: [e.row.title] // How can be `title` an id?
}
});
movies.each(function(model) {
var row = Ti.UI.createPickerRow({
title: model.get("movieName")
});
column.addRow(row);
});
$.picker1.columns = [column];
});
Upvotes: 3
Reputation: 3337
Just use the query parameter passed to fetch function :
$.picker.addEventListener('change',function(e){
languageid = e.row.title;
//alert("language is : "+ languageid);
movie.fetch({query: "SELECT * FROM movie WHERE id = '"+languageid+"';"});
var column = Ti.UI.createPickerColumn();
movie.each(function(model){
var row = Ti.UI.createPickerRow({
title: model.get("movieName");
});
column.addRow(row);
});
$.picker1.columns = [column];
});
Upvotes: 2