Dynamically generated buttons and pass variable to new window with JSON - json

Question

First I am a beginner and this is my first app. I have been working on this app for several days and I am stuck. On the page remote_read-org-3.js I am creating buttons that are a list of states. These are being pulled from a mySQL database. This part is working. I need to pass the stateabbr to the next window when the button is clicked. The problem is it passes the last state in the list no matter which button I click.
This is remote_read-org.js It may not been the cleanest code but I am still working through the how to's
var currentWin = Ti.UI.currentWindow;
var view02 = Titanium.UI.createView({
top:0,
left:0,
height: '100%',
width: '100%',
backgroundImage: 'images/wcs_background_2.jpg',
})
var label01 = Titanium.UI.createLabel({
text: "US STATES",
top:25,
left:125,
height:'auto',
width:'175',
textAlign: "left",
font:{fontFamily:'Arial',fontWeight:'bold',fontSize:24},
color: "#1c1e3b",
})
var label02 = Titanium.UI.createLabel({
text: "Attachments",
top:50,
left: 125,
height:'24',
width:'150',
textAlign: "left",
font:{fontFamily:'Arial',fontWeight:'bold',fontSize:18},
color: "#1c1e3b",
})
var view01 = Titanium.UI.createView({
top:90,
left:70,
height: 375,
width: Ti.UI.FILL,
})
var currentWin = Ti.UI.currentWindow;
var sendit = Ti.Network.createHTTPClient();
sendit.open('GET', 'http://localhost/test/read.php');
sendit.send();
sendit.onload = function(){
var json = JSON.parse(this.responseText);
var json = json.states;
var dataArray = [];
var scroller = Ti.UI.createScrollView({
height: Ti.UI.FILL,
width: Ti.UI.FILL,
});
var brandView = Ti.UI.createView({ //Primary view for buttons
title: 'Hello',
top:0,
left:0,
height : Ti.UI.FILL,
width : Ti.UI.FILL,
contentHeight : "auto",
backgroundColor : "transparent",
layout : "horizontal",
horizontalBounce :false,
});
scroller.add(brandView);
view01.add(scroller);
var pos;
for( pos=0; pos < json.length; pos++){
dataArray.push({title:'' + json[pos].stateAbbr + ''});
// set the array to the tableView
var btn = Ti.UI.createButton({
title: json[pos].stateAbbr,
width: 60,
height: 70,
top: pos * 0, // space the buttons at 105
left: 2,
backgroundImage: 'images/state_icon.png',
MyID: json[pos].stateAbbr,
});
btn.addEventListener('click', function(e) {
var newWindow = Titanium.UI.createWindow({
url: 'remote_read_acc.js',
MyID: btn.MyID
});
newWindow.open(newWindow);
});
brandView.add(btn);
};
};
var brandView = Ti.UI.createView({
});
view02.add(view01);
view02.add(label01);
view02.add(label02);
currentWin.add(view02);
I need to pass the stateabbr to this new window
remote_read_acc.js
var currentWin = Ti.UI.currentWindow;
var view02 = Titanium.UI.createView({
top:0,
left:0,
height: '100%',
width: '100%',
backgroundImage: 'images/wcs_background_2.jpg',
})
var label01 = Titanium.UI.createLabel({
text: "US STATES",
top:25,
left:125,
height:'auto',
width:'175',
textAlign: "left",
font:{fontFamily:'Arial',fontWeight:'bold',fontSize:24},
color: "#1c1e3b",
})
var label02 = Titanium.UI.createLabel({
text: "Attachments",
top:50,
left: 125,
height:'24',
width:'150',
textAlign: "left",
font:{fontFamily:'Arial',fontWeight:'bold',fontSize:18},
color: "#1c1e3b",
})
var view01 = Titanium.UI.createView({
top:90,
left:90,
height: 375,
width: Ti.UI.FILL,
})
var currentWin = Ti.UI.currentWindow;
var sendit = Ti.Network.createHTTPClient();
sendit.open('GET', 'http://localhost/test/attachments.php');
sendit.send();
sendit.onload = function(){
var json = JSON.parse(this.responseText);
var json = json.attachments;
var dataArray = [];
var scroller = Ti.UI.createScrollView({
height: Ti.UI.FILL,
width: Ti.UI.FILL,
});
var brandView = Ti.UI.createView({ //Primary view for buttons
title: 'Hello',
top:0,
left:0,
height : Ti.UI.FILL,
width : Ti.UI.FILL,
contentHeight : "auto",
backgroundColor : "transparent",
layout : "horizontal",
horizontalBounce :false,
});
scroller.add(brandView);
view01.add(scroller);
var pos;
for( pos=0; pos < json.length; pos++){
dataArray.push({title:'' + json[pos].attachmentName + ''});
// set the array to the tableView
var btn = Ti.UI.createButton({
title: json[pos].attachmentName ,
width: 190,
height: 30,
top: pos * 0, // space the buttons at 105
left: 2,
MyID: json[pos].attachmentName,
});
btn.addEventListener('click', function(e) {
var newWindow = Titanium.UI.createWindow({
url: '',
});
newWindow.open(newWindow);
brandView.add(btn);
};
};
var brandView = Ti.UI.createView({
});
view02.add(view01);
view02.add(label01);
view02.add(label02);
currentWin.add(view02);
I also then need to use that stateabbr that I passed to query the dataArray to pull just the values from the array that matches the stateabbr variable. so I can display them on this page.
Any help would be greatly appreciated

Answer 1

It's passing the last state in the list cause you are adding event listeners in a for loop and ignoring JavaScript scope rules (they are not the easiest to understand that's for sure). So what is happening is that btn is always equal to the last btn you create. Instead try this, use the source attribute of every click event, this separates your inner scope from the outer scope of the for loop:
btn.addEventListener('click', function(e) {
var newWindow = Titanium.UI.createWindow({
url: 'remote_read_acc.js',
MyID: e.source.MyID // Get the actual button that was clicked
});
newWindow.open(newWindow);
});
To optimize this even further I would move the event listener function outside of the loop. Also, I wouldn't use the url attribute of the window, as that will open an entirely different JavaScript context, which is pretty heavyweight, instead try to use the require() CommonJS directive.