Refreshing a picker data on the event of another picker.

Question

Refreshing a picker data on the event of another picker.

You must Login before you can answer or comment on any questions.

Hi all, I have two single column pickers one for Car makes and one for Car models. I want when a Car Make is selected its corresponding Models are loaded in the Car Models picker. e.g if I select Honda in the Car Makes picker then only Honda's models should appear in the Car Models picker and no other company's models should be there. Also the Models are coming from a nested JSON object. Here is how I am trying to do this but the Models picker is always blank with no rows:-

pkr_Make_btnDone.addEventListener('click',function() {      //When a value is selected in Makes Picker
        txt_VM.value =  pkr_VM.getSelectedRow(0).title;
        pkr_VM_view.animate(slide_out);
 
        Ti.App.fireEvent('make',{name: txt_VM.value})
    });
 
Ti.App.addEventListener('make',function(e)
{
    limit=models[e.name].length;  //models is the JSON object that contains Car Models
    var Mdl_data=[];
 
    for(var i=0;i<limit;i++)
    {
        //populate the dictionary for Models picker with selected Car Make's Models
        Mdl_data.push(Titanium.UI.createPickerRow({title: models[e.name][i]}));
    }
    pkr_Mdl.add(Mdl_data); //add the data to the models picker.
})

Is there a way to do this??? If its not possible then please suggest some alternate method to do this easily.Plz somebody help ASAP. I am stucked with it for last two days. Thanks in advance.

1 Answer

Your Answer

Think you can help? Login to answer this question!

it would help if there were a short example of what the JSON model object looked like?

— commented 9 months ago by Aaron Saunders
also is ths specific to android or IOS?

— commented 9 months ago by Aaron Saunders
Hi Aaron, here is the JSON object and its for both iOS and android but right now I am stucked in iOS. I want when Honda is selected its corresponding models are available in model picker from JSON object and so on.

— commented 9 months ago by Muhammad Qasim Khan
what happens when you run this code? Can you create a simple example? I have looked at the data and the code posted above so there must be something else missing that would assist is resolving this issue.

— commented 9 months ago by Aaron Saunders
Is the models variable in scope inside your make event listener? If you put a breakpoint on this line:
limit=models[e.name].length;
what do you see in the models variable in the debugger? What about e.name? If you had data in the models variable, does it have a key that matches e.name?

— commented 9 months ago by Jason Priebe
@Aaron when I run this code every thing works fine except nothing shown in the model picker as expected. The model picker exactly looks like as when an empty array is passed in picker.add(empty_array). You can see it here

@Jason Yes it is inside the scope of make event listener. var models have the JSON data shown in the above comment link. Yes e.name is the name of the selected car make in the pkr_Make_btndone click event above which is matched with JSON object to get its corresponding models. The alert shows everything fine but only model names aren't visible in the model picker.

If anyone can give me email address I can mail the complete code (includes 3 files) so that you test yourself and better understand the problem and help to resolve it. Thanks

— commented 9 months ago by Muhammad Qasim Khan
Can someone tell how I make separate picker rows dictionaries for each item of this JSON object. e.g. separate array of picker rows for honda, separate dictionary for suzuki and so on, so that when a car make is selected I add the corresponding dictionary of models into the Car Model picker. Something like:-
var allModel_rows={}; for(var i=0;i<models.length;i++) //loop for Car Makes available { if(models[i].length>0) //Check if the Make have models allModel_rows.models[i]=[] //array to hold picker rows of models (picker row dictionary for this make) for(var j=0;j<models[i].length;j++) allModel_rows.models[i].push(Ti.UI.createPickerRow({title: models[i][j] }) }
When a car Make is selected then change the Car Model picker's data to show corresponding models:-
Ti.App.addEventListener('make',function(e) //custom event fired when a Car Make is selected. var e has the name of Car Make. { //match selected car make name and get corresponding dictionary of models from allModel_rows var tmp=e.name; //e.name is the name of Car Make. pkr_Models.add(allModel_rows.tmp); }
I think this code may be wrong as I've not tried it but I hope it will give you some idea that what I want to do and what is the problem. I can email the actual code to better understand the issue if anyone want. Thanks for any help.

— commented 9 months ago by Muhammad Qasim Khan
post the code in a gist or on pastebin.... a simple one file example please

— commented 9 months ago by Aaron Saunders
Here you go: http://pastebin.ca/2201975

— commented 9 months ago by Muhammad Qasim Khan
That code doesn't run. First, there's no such thing as Ti.API.xhr. I don't know what you were doing there. I tried to fight through a couple of other undefined variables, and I gave up.

— commented 9 months ago by Jason Priebe
Ohhh... really sorry for that....I just copied it from my project and didn't run it myself..... I done that to make global variables. I create variables and attach them with a Ti object for reuse throughout the app.....You can declare all undeclared variables.......Changing the paste in a while.......sorry once again for the trouble...

— commented 9 months ago by Muhammad Qasim Khan
I've modified the code. The new code is here: http://pastebin.ca/2202801 Now it is in running form. I run it by creating separate files for cmb_Make and cmb_Model and including them in the app.js. You can now see the problem yourself and plzzz help me to get rid out of this problem. It took so long but I couldn't figure out any solution for it. Thanks

— commented 9 months ago by Muhammad Qasim Khan

Accepted Answer

Accepted Answer

OK -- I think I have your answer. This was a strange one. The main problem seems to be that calling Ti.UI.Picker.add() after the picker has been added to the view doesn't seem to work. Note that it works if you add it to a view, but then don't add that view to the window (which your original code does with the pkr_VM, which is added to pkr_VM_view, but pkr_VM_view isn't added to the window until the timeout). But once you've added the picker to the window or a child view of the window, it doesn't seem like you can call add().

So what's the workaround? When you have new data for the picker, remove the picker from its parent view and create a new one. This is a good idea anyway, since there's not really a good way to remove the data from the picker. With your code, if the user chose a different Make, you'd be appending the models for that make to the picker (that is, if you were able to call add() after adding the picker to the window, which you can't anyway).

I've posted the modified code here.

I also found a few issues in your code that you should be aware of.

Avoid use of App-level events when control-level events would be perfectly serviceable; see my code
timeout is not a good solution -- set the controls disabled until the network results are back and the lists are populated; then enable them; see my code
naming conflicts: cancel, done, spacer, toolbar: use CommonJS modules and require() so that you don't have to worry about these sort of things; I made quick-and-dirty name changes for you
pkrModelData is loaded, but unused

Note that your code won't work on android, if that matters to you. My TitanUp library has a view called "SimplePicker" which behaves like yours on iOS but also works on android. Note that it will have trouble with dynamically updated pickers, too. I don't think the changes would be too hard; it would need a setValues() function, which would have to recreate the PickerPopup each time the rows are changed.