3

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

enter image description here

The select roe count is correct but the text is not visible. Why?

Vinod
  • 2,263
  • 9
  • 55
  • 104

2 Answers2

3

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];
});
0101
  • 2,697
  • 4
  • 26
  • 34
  • I am not sure ,but `e.row.title` is probably null which it can not be. https://jira.appcelerator.org/browse/TIMOB-17263 – 0101 Oct 01 '14 at 10:44
  • The question is why is `e.row.title` empty (null)? What about `e.value`? I really don't know what you want to do ,but basically here `params: [e.row.title]` must be some value not null. – 0101 Oct 01 '14 at 10:50
  • Now I'm not getting the error, but in second pick list 2 rows are selected but for some reason the column titles are not visible. Only blank rows are showing which I attached in screenshot in my question. Why? – Vinod Oct 01 '14 at 11:08
  • Try `console.log("Row title: " + model.get("movieName"));` in `movies.each`. – 0101 Oct 01 '14 at 11:29
  • It is printing null in title, [INFO] : Row title: null [INFO] : Row title: null – Vinod Oct 01 '14 at 11:34
  • See, so you have no value in `model.get("movieName");` -> `movieName`. Check whether it is being saved correctly... – 0101 Oct 01 '14 at 11:39
2

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];
});
LHIOUI
  • 3,287
  • 2
  • 24
  • 37
  • Now the rows are showing correctly but the row title text is not visible. What is the issue. Is that styling issue? – Vinod Sep 27 '14 at 16:09
  • The problem might be in `movieName` property. Is it correct name? – 0101 Sep 27 '14 at 21:30
  • There is no issue with movieName property. I have updated the question and screenshot. Plase suggest me why was the text is not visible – Vinod Sep 29 '14 at 14:19