Develop Reference

Can not read property length of null in titanium appcelerator

I am retrieving the json data using titanium.But the problem is that whenever i calculate the length of json data it says can not read length of null Here is my code:
Ti.UI.setBackgroundColor('#000');
var win1 = Ti.UI.createWindow({
backgroundColor : '#fff',
title : 'Tab 1'
});
var tab1 = Ti.UI.createTab({
icon : 'KS_nav_views.png',
title : 'Tab 1',
window : win1
});
var JsonTable = Ti.UI.createTableView({
height : Ti.UI.FILL,
width : Ti.UI.FILL
});
win1.add(JsonTable);
function getData() {
var myfontsize = '14dp';
// I needed to add this to test
var tableData = [];
var Json, Story;
var xhr = Ti.Network.createHTTPClient({
onload : function() {
var json = JSON.parse(this.responseText);
// declare your variables :-)
//alert(JSON.stringify(Story));
// alert(Story.nombre);
alert(json.length);
// only one . between things
for (var i = 0; i < json.length; i++) {
Story = json[i];
//Ti.API.info('Story', JSON.stringify(Story));
//Ti.API.info('Story.nombre', Story.nombre);
var row = Ti.UI.createTableViewRow({
backgroundColor : 'yellow',
height : '85dp',
width : Ti.UI.FILL
});
var labTitle = Ti.UI.createLabel({
backgroundColor : 'orange',
color : 'black',
font : {
fontSize : myfontsize,
fontWeight : 'bold'
},
height : Ti.UI.SIZE,
left : '25%',
text : Story.nombre,
top : '2%',
width : Ti.UI.FILL
});
row.add(labTitle);
tableData.push(row);
}
JsonTable.setData(tableData);
},
onerror : function(e) {
Ti.API.debug("STATUS: " + this.status);
Ti.API.debug("TEXT: " + this.responseText);
Ti.API.debug("ERROR: " + e.error);
alert('There was an error retrieving the remote data. Try again.');
},
timeout : 5000
});
JsonTable.addEventListener('click', function(e) {
var index = e.index;
});
xhr.open("GET", "http://aplicaciones4.sct.gob.mx/sibuac_internet/SerEscogeRuta?estados");
xhr.send();
}
var btnGo = Ti.UI.createButton({
title : 'Go'
});
btnGo.addEventListener('click', function(e) {
getData();
});
//win1.setRightNavButton(btnGo);
win1.add(btnGo);
var img = Ti.UI.createImageView({
height : 32,
image : 'activity_indicator.gif',
width : 32
});
//win1.add(img);
var tabGroup = Ti.UI.createTabGroup();
tabGroup.addTab(tab1);
tabGroup.open();
Can you help me in this
Thanks in advance

Try naming the result something other than "json".
Also, there's sloppy var declarations...
"var Json,Story;" << "J"son upper-case, never used

Auto-complete Textfield in titanium ios & Android

I want autocomplete textbox like if i press a it should shows related words like apple,aeroplane etc.,i want to make like similar google search.is there any control like this operation in ios and android on titanium.Help with examples codes or it's not possible in titanium?

The following code will work for you. Try it and modify as per your need. Here I Used array(searchArray) as data storage(You can replace it with database field or source whatever as per your requirement).
//Table view showing your autocomplete values
var tblvAutoComplete = Ti.UI.createTableView({
width : '100%',
backgroundColor : '#EFEFEF',
height : 0,
maxRowHeight : 35,
minRowHeight : 35,
allowSelection : true
});
//Starts auto complete
txtAutoComplete.addEventListener('change', function(e){
var pattern = e.source.value;
var tempArray = PatternMatch(searchArray, pattern);
CreateAutoCompleteList(tempArray);
});
//You got the required value and you clicks the word
tblvAutoComplete.addEventListener('click', function(e){
txtAutoComplete.value = e.rowData.result;
});
//Returns the array which contains a match with the pattern
function PatternMatch(arrayToSearch, pattern){
var searchLen = pattern.length;
arrayToSearch.sort();
var tempArray = [];
for(var index = 0, len = arrayToSearch.length; index< len; index++){
if(arrayToSearch[index].substring(0,searchLen).toUpperCase() === pattern.toUpperCase()){
tempArray.push(arrayToSearch[index]);
}
}
return tempArray;
}
//setting the tableview values
function CreateAutoCompleteList(searchResults){
var tableData = [];
for(var index=0, len = searchResults.length; index < len; index++){
var lblSearchResult = Ti.UI.createLabel({
top : 2,
width : '40%',
height : 34,
left : '5%',
font : { fontSize : 14 },
color : '#000000',
text : searchResults[index]
});
//Creating the table view row
var row = Ti.UI.createTableViewRow({
backgroundColor : 'transparent',
focusable : true,
height : 50,
result : searchResults[index]
});
row.add(lblSearchResult);
tableData.push(row);
}
tblvAutoComplete.setData(tableData);
tblvAutoComplete.height = tableData.length * 35;
}
This code worked for me in both ios and android. Hope your problems get resolved:D

cool i can give some example for you with android auto address suggestion bar
var search = Titanium.UI.createTextField({
height : '40sp',
hintText : 'Search',
top : '3sp',
right : '0%',
width : '73%',
textAlign : 'left',
font : {
fontFamily : 'Verdana',
fontSize : '13sp',
},
});
your result dispaly as table row
var resulttable = Ti.UI.createTableView({
top : '0%',
left : '0%',
width : '100%',
height : '100%',
separatorColor : '#000000',
});
and add event listner as change and any change call function with your value and if value is empty remove table from your view
search.addEventListener("change", function(event, type) {
Titanium.API.info("in change event listener");
if ('' != search.value) {
tabgroupContentView.add(resulttable);
if (resulttable.data.length > 0) {
for (var i = resulttable.data[0].rows.length - 1; i >= 0; i--) {
resulttable.deleteRow(i);
}
}
auto_complete(search.value);
} else {
tabgroupContentView.remove(resulttable);
}
});
call following function to auto complte
function auto_complete(search_term) {
loader.open("GET", "https://maps.googleapis.com/maps/api/place/autocomplete/json?input=" + search_term + "&types=geocode&language=en&sensor=true&key=bar blar blar this is my key use ur one");
loader.onload = function() {
var histryresult = eval('(' + this.responseText + ')');
jsonArry = histryresult.predictions;
jsonArryterms = histryresult.terms;
for (var i = 0; i < jsonArry.length; i++) {
var service_row = Ti.UI.createTableViewRow({
height : '70sp',
width : '100%',
backgroundColor : '#ffffff',
backgroundFocusedColor : '#FF8F2F',
backgroundSelectedColor : '#FF8F2F',
hasChild : false
});
var lbl_oderid = Ti.UI.createLabel({
left : '3%',
top : '10%',
text : jsonArry[i].terms[1].value,
color : '#A70CAF',
font : {
fontSize : '17sp',
fontWeight : 'bold'
},
height : 'auto',
width : 'auto'
});
var descriptiontext;
if (jsonArry[i].description == undefined) {
descriptiontext = 'Not Valable';
} else {
descriptiontext = jsonArry[i].description;
}
var lbl_description = Ti.UI.createLabel({
left : '5%',
top : '50%',
text : descriptiontext,
color : '#000000',
font : {
fontSize : '12sp',
},
height : 'auto',
width : 'auto'
});
service_row.add(lbl_oderid);
service_row.add(lbl_description);
service_row.addEventListener('click', function(e) {
var locaName = jsonArry[e.index].description;
if (jsonArry[e.index].description == undefined) {
} else {
reversGeoloader.open("GET", "http://maps.googleapis.com/maps/api/geocode/json?address=" + locaName + "&sensor=false");
reversGeoloader.onload = function() {
var geoResult = eval('(' + this.responseText + ')');
jsonArry = geoResult.results;
var newlat = jsonArry[0].geometry.location.lat;
var newlng = jsonArry[0].geometry.location.lng;
curentlatitude = newlat;
curentlongitude = newlng;
getReversGeo(curentlatitude, curentlongitude, 'str');
usercurentlocation.setText('Set by serch');
tabTestWindow.close();
};
reversGeoloader.send();
}
});
resulttable.appendRow(service_row);
}
};
loader.send();
}

textField.addEventListener('change', function(e) {
// you can fill a tableView in this event with the suggested data
});
or this tutorial link might solve your problem
AutoCompleteTextField

Titanium Android Simple Form Creation

Im a Titanium Beginner who is trying to create a form page with 2 textfields of Name and address and a DateTimePicker. I am facing 2 problems right now being :
1) the DateTimePicker is successfully shown but i would like both of it and also including the 2 textfields to be on the same window, with a same submit button.
2) I have tried numerous times but am unable to create a simple textfield at all even just creating it on a single page.It just doesnt show up.
Anyone could offer some constructive help?
Thanks in advance. The Below is my current code.
var winTimePicker = Titanium.UI.createWindow({});
winTimePicker.backgroundColor = 'black';
var doneBtn = Ti.UI.createButton({
title: 'Done',
});
doneBtn.addEventListener('click', function() {
winTimePicker.hide();
});
winTimePicker.add(doneBtn);
var timePicker = Ti.UI.createPicker({
type:Ti.UI.PICKER_TYPE_TIME,
bottom:0,
});
// turn on the selection indicator (off by default)
timePicker.selectionIndicator = true;
timePicker.addEventListener('change', function(e) {
//your code
});
winTimePicker.add(timePicker);
//open window
winTimePicker.open();
var winDatePicker = Titanium.UI.createWindow({});
winDatePicker.backgroundColor = 'black';
var doneBtn = Ti.UI.createButton({
title: 'Done',
});
doneBtn.addEventListener('click', function() {
winDatePicker.hide();
});
winDatePicker.add(doneBtn);
var datePicker = Ti.UI.createPicker({
type:Ti.UI.PICKER_TYPE_DATE,
bottom:0,
});
// turn on the selection indicator (off by default)
datePicker.selectionIndicator = true;
datePicker.addEventListener('change', function(e) {
//your code
});
winDatePicker.add(datePicker);
//open window
winDatePicker.open();
var textField = Titanium.UI.createTextField({
color:'#336699',
width:"auto",
height:"auto",
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
});
var textField2 = Titanium.UI.createTextField({
color:'#336699',
width:"auto",
height:"auto",
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
});

Check this code out and make changes as you find suitable to it:
var timePickerWin = Ti.UI.createWindow({
navBarHidden : true,
backgroundColor : '#fff'
});
var startTime = Ti.UI.createPicker({
top : '15dp',
left : '50dp',
useSpinner : false,
selectionIndicator : true,
type : Ti.UI.PICKER_TYPE_TIME,
format24 : false,
height : '130dp',
// width:'auto'
});
var endTime = Ti.UI.createPicker({
top : '15dp',
left : '50dp',
useSpinner : false,
selectionIndicator : true,
type : Ti.UI.PICKER_TYPE_TIME,
format24 : false,
height : '130dp'
});
var nextButton = Ti.UI.createButton({
width : '220dp',
height : '45dp',
top : '15dp',
title : 'Next',
backgroundColor : '#294079',
font : {
fontSize : '18dp',
fontWeight : 'bold'
},
color : '#fff'
});
startTime.addEventListener('change', function(e) {
//alert("User selected date: " + e.value);
startPickerValue = e.value;
});
endTime.addEventListener('change', function(e) {
//alert("User selected date: " + e.value);
endPickerValue = e.value
});
var fullNameTextBox = Ti.UI.createTextField({
borderStyle : Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
width : '275dp',
height : '45dp',
//value : '',
top : '15dp',
color : '#000000',
hintText : 'Enter full name'
// backGroundColor:'gray',
});
var emailTextBox = Ti.UI.createTextField({
borderStyle : Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
width : '275dp',
height : '45dp',
//value : '',
top : '15dp',
color : '#000000',
hintText : 'Enter email'
});
Finally add all these UI elements to the window which is the timePickerWin using add function
timePickerWin.add(startTime);
and so on for all the UI elements.After that open the timePickerWin as below
timePickerWin.open()
Make suitable layout changes by varying the left,right,height and width properties of each element.

Create a CheckBox in Titanium

I have List of Checkboxes which i want to create using FOR LOOP.
I have following type of data.
Value 1 --> checkbox image
Value 2 -->
Value 3 -->
.
.
.
Value 15 --> checkbox Image
I am using following code for that but not getting how will it work??? Is it correct code??
var chkArray = ['Value 1', 'Value 2', 'Value 3', 'Value 4', 'Value 5', 'Value 6', 'Value 7', 'Value 8', 'Value 9', 'Value 10'];
AssessmentArray = function createChkBx() {
var chkBx = [];
for(var i in chkArray) {
var t = 80;
var checkbox = Ti.UI.createSwitch({
style : Ti.UI.Android.SWITCH_STYLE_CHECKBOX,
title : chkArray[i],
value : true,
left : '20dp',
top : t + 30,
height : 25,
width : 'auto'
});
checkbox.addEventListener("change", function(e) {
Ti.API.info("The checkbox has been set to " + e.value);
});
chkBx.push(checkbox);
}
return chkBx;
}
var assessData = new AssessmentArray();
Now how should I add this to my Window??? This is specifically for Android only...

var AssessmentArray = function()
{
function AssessmentArray ()
{
//Pass the parent view inside which u want to add the check boxes and teh values as array
//gap or the distance between two checkboxes
this.addCheckBoxes = function(window, values, gap)
{
var t = 0;
var chkBx = [];
var i = 0;
for(i = 0; i < values.length; i++) {
var checkbox = Ti.UI.createSwitch({
style : Ti.UI.Android.SWITCH_STYLE_CHECKBOX,
title : chkArray[i],
value : true,
left : '20dp',
top : i * gap,
height : 25,
width : 'auto'
});
checkbox.addEventListener("change", function(e) {
Ti.API.info("The checkbox has been set to " + e.value);
});
win.add(checkbox);
chkBx.push(checkbox);
}
return chkBx;
}
}
return AssessmentArray;
}();
var ass = new AssessmentArray();
ass.addCheckBoxes(Ti.UI.createWindow(), ['Value 1', 'Value 2', 'Value 3', 'Value 4', 'Value 5', 'Value 6'], 50);
try some thing like this.

U may prefer something like this,it can be used both in Ios and Android.
var win = Titanium.UI.createWindow({
title : 'app',
backgroundColor : 'white',
fullscreen : false,
navBarHidden : true,
layout : 'vertical',
height : Ti.UI.FILL,
width : Ti.UI.FILL
});
var checkboxview = Titanium.UI.createView({
width : Ti.UI.FILL,
height : Ti.UI.SIZE,
//layout : 'horizontal',
horizontalWrap : false,
//right : '10dp',
//left : '10dp',
layout : 'horizontal',
//backgroundImage : '/images/backblue.png'
backgroundColor : '#045FB4',
//top : '20dp',
//backgroundColor:''
});
win.add(checkboxview);
var checkbox = Ti.UI.createButton({
title : '',
top : 10,
right : 10,
width : 30,
height : 30,
borderColor : 'black',
borderWidth : 2,
borderRadius : 3,
backgroundColor : 'white',
backgroundImage : 'none',
color : '#fff',
font : {
fontSize : 25,
fontWeight : 'bold'
},
value : false //value is a custom property in this casehere.
});
checkboxview.add(checkbox);
var hinttext = Ti.UI.createLabel({
color : 'black',
font : {
fontSize : '17dp',
//fontWeight : 'bold',
fontFamily : 'Rod'
},
left : '10%',
text : 'user1'
});
checkboxview.add(hinttext);
//Attach some simple on/off actions
checkbox.on = function() {
this.backgroundColor = '#007690';
this.title = '\u2713';
this.value = true;
};
checkbox.off = function() {
this.backgroundColor = '#aaa';
this.title = '';
this.value = false;
};
checkbox.addEventListener('click', function(e) {
if (false == e.source.value) {
e.source.on();
alert(hinttext.text);
} else {
e.source.off();
}
});
var checkboxview1 = Titanium.UI.createView({
width : Ti.UI.FILL,
height : Ti.UI.SIZE,
//layout : 'horizontal',
horizontalWrap : false,
//right : '10dp',
//left : '10dp',
layout : 'horizontal',
//backgroundImage : '/images/backblue.png'
backgroundColor : '#045FB4',
//top : '20dp',
//backgroundColor:''
});
win.add(checkboxview1);
var checkbox1 = Ti.UI.createButton({
title : '',
top : 10,
right : 10,
width : 30,
height : 30,
borderColor : '#666',
borderWidth : 2,
borderRadius : 3,
backgroundColor : '#aaa',
backgroundImage : 'none',
color : '#fff',
font : {
fontSize : 25,
fontWeight : 'bold'
},
value : false,
//value is a custom property in this casehere.
});
checkboxview1.add(checkbox1);
var hinttext1 = Ti.UI.createLabel({
color : 'black',
font : {
fontSize : '17dp',
//fontWeight : 'bold',
fontFamily : 'Rod'
},
left : '10%',
width : Ti.UI.SIZE,
height : Ti.UI.SIZE,
text : "User2"
});
checkboxview1.add(hinttext1);
//Attach some simple on/off actions
checkbox1.on = function() {
this.backgroundColor = '#007690';
this.title = '\u2713';
this.value = true;
};
checkbox1.off = function() {
this.backgroundColor = '#aaa';
this.title = '';
this.value = false;
};
checkbox1.addEventListener('click', function(e) {
if (false == e.source.value) {
e.source.on();
alert(hinttext1.text);
} else {
e.source.off();
}
});

Android titanium overwrite (clear table)

hope this is my last question for today... O.o
So im filling up a table with input from a user:
var textField = Ti.UI.createTextField({
hintText:"Zoeken over twitter",
backgroundColor:"#fff",
borderColor:"#fff",
borderWidth:1,
borderRadius:10,
left:10,
right:10,
top:10,
height:50
});
Ti.UI.currentWindow.add(textField);
var buttonSearch = Ti.UI.createButton({
title:"Zoeken",
left:10,
right:10,
top:70,
height:50
});
Ti.UI.currentWindow.add(buttonSearch);
buttonSearch.addEventListener("click", function() {
if ( typeof tableview == 'undefined' ) {
} else {
Ti.UI.currentWindow.remove(tableview);
}
var twitterUserName = textField.value;
var httpClient = Ti.Network.createHTTPClient();
httpClient.timeout = 10000;
httpClient.open("GET","http://api.twitter.com/1/statuses/user_timeline.json?count=10&screen_name=" + twitterUserName);
var twitterData = [];
httpClient.onload = function() {
try {
var tweets = JSON.parse(this.responseText);
for (var i=0; i < tweets.length; i++) {
for (var i=0; i < tweets.length; i++) {
var tweetText = tweets[i].text;
var user = tweets[i].user.screen_name;
var avatar = tweets[i].user.profile_image_url;
var created_at = tweets[i].created_at;
var row = Ti.UI.createTableViewRow({hasChild:true,
height:'auto'});
var postView = Ti.UI.createView({
height:'auto',
layout:'vertical',
left:5,
top:5,
bottom:5,
right:5
});
var avatarImageView = Ti.UI.createImageView({
image:avatar,
left:0,
top:0,
height:48,
width:48
});
postView.add(avatarImageView);
var userLabel = Ti.UI.createLabel({
text:user,
left:54,
width:120,
top:-48,
bottom:2,
height:16,
textAlign:'left',
color:'#444444',
font:{fontFamily:'Trebuchet MS',fontSize:14,
fontWeight:'bold'}
});
postView.add(userLabel);
var dateLabel = Ti.UI.createLabel({
text:created_at,
right:0,
top:-18,
bottom:2,
height:14,
textAlign:'right',
width:110,
color:'#444444',
font:{fontFamily:'Trebuchet MS',fontSize:12}
});
postView.add(dateLabel);
var tweetTextLabel = Ti.UI.createLabel({
text:tweetText,
left:54,
top:0,
bottom:2,
height:'auto',
width:236,
textAlign:'left',
font:{fontSize:14}
});
postView.add(tweetTextLabel);
row.add(postView);
twitterData[i] = row;
}
}
var tableview = Titanium.UI.createTableView({data:twitterData,
minRowHeight:58, top:130});
Ti.UI.currentWindow.add(tableview);
} catch(E) {
alert(E);
}
};
httpClient.send();
});
The problem is my second search overwrites my first search witouth removing the table so its displaying 2 tables on top of each other... as u can see i tried to remove the previous table with a typeoff = undefined but this does not work... any ideas on how i can remove the previous filled up table? i tried to do just a remove but this obviously throws errors because the table doesnt exist at first...

This is how I did it.
if (tableview.data.length > 0) {
for (var i = tableview.data[0].rows.length-1; i >= 0; i--) {
tableview.deleteRow(i);
}
}