Appcelerator scope issue when clicking a view - javascript

I'm going crazy here trying o work out why the scoping of my variable won't pick up the right value from a loop of 60 items from a DB in my Appcelerator project.
My map marker displays the correct label, but when I click it, no matter what combo of scoping I try, I cannot get the correct value in the alert. It just returns the 60th entry every time.
Likely a schoolboy error, but this is driving me nuts.
This is my function
function loadAnimals() {
var db = Ti.Database.open('myDB');
var getSpecies = db.execute('select * from species');
while (getSpecies.isValidRow()) {
var speciesID = getSpecies.fieldByName('speciesnid');
var speciesName = getSpecies.fieldByName('speciesname');
var speciesDesc = getSpecies.fieldByName('speciesdescription');
var speciesLatitude = getSpecies.fieldByName('specieslatitude');
var speciesLongitude = getSpecies.fieldByName('specieslongitude');
var speciesConStatus = getSpecies.fieldByName('speciesconservationstatus');
var speciesMarkerFilename = getSpecies.fieldByName('speciesiconfilename');
var speciesMarkerIcon = getSpecies.fieldByName('speciesmapicon');
var speciesMarkerURI = getSpecies.fieldByName('speciesmapiconurl');
var speciesImageFullPath = speciesMarkerURI.replace("public://", "http://myurl.com/");
var speciesImageFullPath = speciesImageFullPath.replace(" ", "%20");
var imageFile = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, speciesMarkerIcon);
var iconFile = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, speciesMarkerFilename);
var annotationView = Ti.UI.createView({
backgroundColor: '#222222',
width: 150,
height: 75,
layout:'vertical'
});
var addtoTourView = Ti.UI.createView({
height:20,
backgroundColor:'#6ea108'
});
var addtoTourTitle = Ti.UI.createLabel({
color: '#FFF',
text: 'ADD TO TOUR',
width: 150,
height: 15,
top:3,
textAlign: 'center',
font: {
fontSize: 14,
fontWeight: 'bold'
}
});
var annotationTitle = Ti.UI.createLabel({
color: '#FFF',
text: 'test',
width: 150,
height:15,
top:0,
textAlign: 'center',
font: {
fontSize: 14,
fontWeight: 'normal'
}
});
var blankView = Ti.UI.createView({
backgroundColor: '#222222',
width: 1,
height: 73,
borderRadius: 0
});
annotationView.add(addtoTourView);
addtoTourView.add(addtoTourTitle);
annotationView.add(annotationTitle);
annotations.push(Map.createAnnotation({
latitude: speciesLatitude,
longitude: speciesLongitude,
title: ' ',
//pincolor: Map.ANNOTATION_RED,
image: iconFile,
animate: true,
myid: speciesID,
rightView: annotationView,
leftView: blankView
}));
addtoTourView.addEventListener('click', function(e) {
//alert(speciesName + ' has dded to Tour');
var dialog = Ti.UI.createAlertDialog({
message: 'Added to your Tour',
ok: 'Continue',
title: speciesName //this is the 60th entry, not the correct one
});
dialog.show();
// do the insert into the DB
var db = Ti.Database.open('myDB');
db.execute('INSERT INTO tour (speciesnid) VALUES (?)', speciesID); // same with this ID, needs to the correct ID
db.close();
});
annotationTitle.text = speciesName;
//load up the next record
getSpecies.next();
};
// close the database
getSpecies.close();
// add markers to map
mapview.annotations = annotations;
};// end of loadAnimals fucntion
Can anyone suggest what I'm doing wrong?

Michaels solution sounds right.
Let me post what I was gonna say anyway. I focus on explaining the scope problem, on why your code doesn't do what you expected.
In javascript the scope is bound to the function. When you declare a variable within a loop (for/while/do...) things can get a little confusing. You are not creating new variables, you are just overriding the value of the first (and only) variable with that name.
So, you have 1 variable in function loadAnimals, called speciesName. In the while-loop you just override the value of that variable. After the 60'th iteration, the variable just remembers the last thing you set it to.
When the client clicks on the marker, the loop is finished, the value has been set a long time ago.
Notice: there are probably solutions provided by your map service, but I don't know about that.
1 solution: 'this'.
The 'this' variable tells you what has been affected. Inside a onClick callback, this is the element that was clicked on.
The solution to your problem will probably involve 'this'. But I'm not sure exactly how.
Here an example of what I mean.
<h2>Click on the animal</h2>
<p>dog</p>
<p>cat</p>
<p>hamster</p>
<script>
function loadAnimals() {
var speciesName = '';
var animalElements = document.getElementsByTagName('p');
for (var i=0; i<animalElements.length; i++) {
speciesName = animalElements[i].innerHTML ; // notice, this variable will be overridden, so this variable is useless within the onClick callback.
animalElements[i].addEventListener('click', function(e) {
// variable 'this' is the <p> that was clicked on.
var value_clicked_on = this.innerHTML;
alert(value_clicked_on);
});
}
}
window.onload = loadAnimals;
</script>

When creating your annotations array to add to to the map add your title to the annotation paramters as well as the speciesID which you are setting with the key - myid.
annotations.push(Map.createAnnotation({
latitude: speciesLatitude,
longitude: speciesLongitude,
title: ' ',
//pincolor: Map.ANNOTATION_RED,
image: iconFile,
animate: true,
myid: speciesID, // We'll be querying this
myname: speciesName, // and also this
rightView: annotationView,
leftView: blankView
}));
Then add your event listener once onto the map object instead of each individual annotation object. This manages memory more efficiently and is the correct way to add it. Don't add the event listener on for every annotation, this is bad practise.
// Handle click events on any annotations on this map.
mapview.addEventListener('click', function(evt) {
Ti.API.info("speciesID " + evt.annotation.myid + " clicked, speciesName: " + evt.annotation.myname);
});
On this single event listener you can now create your alert dialog and DB insert by accessing each annotations individual properties by inspecting
evt.annotation
On the Map object you can do the following as well:
The click event includes a value which you can interrogate clicksource
This clicksource will let you know the source - pin, annotation, leftButton, rightButton, leftView, rightView, title, or subtitle which you can use in the event listener.
Also available is the source object that fired the event - source. You can then test if the clicksource is not null and the source is coming from the "ADD TO TOUR" element that you want to place the trigger on. still getting all your annotation properties from evt.annotation

Related

How to retrieve and modify a list in jquery

I have a list and I want to retrieve and modify it.
Like If I want to change fontsize from 14px to 10px.
Also I am not able to alert it in a different function even thought its in a global variable.
alert(options) shows undefined.
var options = {
colors: ['#795548', '#EF851C', '#6633CC'],
fontsize: "14px",
}
Actually I am working on google charts and want to get this static list(declared globally) in below function.
Calling function :-
function LoadCurrentChartData(currentChart) {
alert(options);
var chart = new google.visualization.Table(document.getElementById('Graph1'));
chart.draw(data, options);
}
You need to define your variable before using this. Check below
function func1(){
console.log(options.fontsize);
}
//func1();//calling from here will give error
var options = {
colors: ['#795548', '#EF851C', '#6633CC'],
fontsize: "14px",
}
func1();
//Edit fontsize value
options.fontsize = "10px";
console.log("After chage");
func1();

Looking for the best way to export and import a variable between modules

So I am working with learning CommmonJS using Appcelerator and I am trying to figure the best way to use a variable from one module (which is an array) in a my ui module. My issue is that in my ui module I have the main window(globally) for the ui and I have an eventlistener on a button that calls a function (in the same module) that opens a map. This map needs the variable that I getting from the previous module. Just not sure what is the best way to do this. Any advice would be awesome.
Data.js
var read = function(){
console.log("---read is activated---");
var db = Ti.Database.open('fourSqDB');
var rows = db.execute('SELECT fourSqID, name, lat, lng, distance, type FROM fourSqTBL');
var dbArray = [];
while (rows.isValidRow()){
var record = {
fourSqID: rows.fieldByName('fourSqID'),
name: rows.fieldByName('name'),
lat: rows.fieldByName('lat'),
lng: rows.fieldByName('lng'),
distance: rows.fieldByName('distance'),
type: rows.fieldByName('type'),
};
dbArray.push(record);
rows.next();
}
rows.close();
db.close();
var getUI = require('ui'); //go into ui.js
//getUI.buildUI(dbArray); //fire buildMainUI function
getUI.buildSecUI(dbArray); //fire buildSecUI function
return dbArray; }; //close read function
ui.js
var win = Ti.UI.createWindow({
layout: "vertical",
backgroundColor: "#ccc"
//background: "images/bg.png"
});
//Navigation Window
var navWin = Ti.UI.iOS.createNavigationWindow({
window: win,
});
var label1 = Ti.UI.createLabel({
//top: 250,
textAlign: "center",
text: "This is the shisha app created by Emmanuel Farrar for AVF1512 Week 3 assignment "
});
var labelButton = Ti.UI.createLabel({
text: "Go To Data",
color: "white"
});
var statementView = Ti.UI.createView({
borderColor: "black", borderRadius: 10,
top: 10, bottom: 0,
height: 300, width: 350
});
var buttonView = Ti.UI.createView({
backgroundColor: "#1f2f34",
top: statementView.bottom + 200,
borderRadius: 10,
height: 75,
width: 350
});
///////////////////////////////////////////
// buildSecUI function (map and listing)
///////////////////////////////////////////
var buildSecUI = function(dbArray){ //dbArray from data.js read function
console.log("---buildSecUI is activated---");
console.log(dbArray);
var secWin = Ti.UI.createWindow({
layout: "vertical",
backgroundColor: "#ffffff"
});
//building the map
var Map = require('ti.map');
var mapView = Map.createView({
mapType: Map.NORMAL_TYPE,
region: {latitude:25.2867, longitude:51.5333,
latitudeDelta:0.05, longitudeDelta:0.05},
animate:true,
regionFit:true,
userLocation:true
});
//array for annotations (pins for maps)
var annotations = [];
for ( var i = 0 ; i < dbArray.length; i++ ) {
// this section will create annotations and add them on the mapView
var pin = Map.createAnnotation({
latitude: dbArray[i].lat,
longitude: dbArray[i].lng,
title: dbArray[i].name,
type: dbArray[i].type,
animate:true,
pincolor:Map.ANNOTATION_PURPLE
});
annotations[i] = pin;
//annotations.push(pin);
// console.log(annotations[i]);
console.log("Pin Info: " + + "Lat" + pin.latitude + " / " + "Lng "+ pin.longtitude);
mapView.addAnnotation(annotations[i]); // adds annotations
} //for loop closure
secWin.add(mapView);
navWin.openWindow(secWin);
}; //closure for buildSecUI
exports.buildSecUI = buildSecUI;
//event listner
buttonView.addEventListener("click", buildSecUI); //closure for buildSecUI
// adding stuff here
statementView.add(label1);
buttonView.add(labelButton);
win.add(statementView, buttonView);
navWin.open();
I think you should go the other way.
In data.js export the read function but leave out the two getUI lines.
exports.read = function() {
// your code except the two getUI lines
return dbArray;
};
Then in ui.js require the data module, call the exported read() and build the UI with it.
var data = require('data');
var dbArray = data.read();
buildSecUI(dbArray);
This way you the data module is unaware of where and how its used (as it should be).
Well I figured what the problem was though like most things it just identified another problem, lol. In this case it worked to turn the whole thing into a function and move the .openWindow method to the event listener as its own function.
buttonView.addEventListener("click", function(){navWin.openWindow(secWin);});

Add javascript to Wordpress loop with class selection

I would like to add category icons to a Wordpress page, each icon animated with snap.svg.
I added the div and inside an svg in the loop that prints the page (index.php). All divs are appearing with the right size of the svg, but blank.
The svg has a class that is targeted by the js file.
The js file is loaded and works fine by itself, but the animation appears only in the first div of that class, printed on each other as many times it is counted by the loop (how many posts there are on the actual page from that category).
I added "each()" and the beginning of the js, but is not allocating the animations on their proper places. I also tried to add double "each()" for the svg location and adding the snap object to svg too, but that was not working either.
I tried to add unique id to each svg with the post-id, but i could not pass the id from inside the loop to the js file. I went through many possible solutions I found here and else, but none were adaptable, because my php and js is too poor.
If you know how should I solve this, please answer me. Thank you!
// This is the js code (a little trimmed, because the path is long with many randoms, but everything else is there):
jQuery(document).ready(function(){
jQuery(".d-icon").each(function() {
var dicon = Snap(".d-icon");
var dfirepath = dicon.path("M250 377 C"+ ......+ z").attr({ id: "dfirepath", class: "dfire", fill: "none", });
function animpath(){ dfirepath.animate({ 'd':"M250 377 C"+(Math.floor(Math.random() * 20 + 271))+ .....+ z" }, 200, mina.linear);};
function setIntervalX(callback, delay, repetitions, complete) { var x = 0; var intervalID = window.setInterval(function () { callback(); if (++x === repetitions) { window.clearInterval(intervalID); complete();} }, delay); }
var dman = dicon.path("m136 ..... 0z").attr({ id: "dman", class:"dman", fill: "#222", transform: "r70", });
var dslip = dicon.path("m307 ..... 0z").attr({ id: "dslip", class:"dslip", fill: "#196ff1", transform:"s0 0"});
var dani1 = function() { dslip.animate({ transform: "s1 1"}, 500, dani2); }
var dani2 = function() { dman.animate({ transform: 'r0 ' + dman.getBBox().cx + ' ' + dman.getBBox(0).cy, opacity:"1" }, 500, dani3 ); }
var dani3 = function() { dslip.animate({ transform: "s0 0"}, 300); dman.animate({ transform: "s0 0"}, 300, dani4); }
var dani4 = function() { dfirepath.animate({fill: "#d62a2a"}, 30, dani5); }
var dani5 = function() { setIntervalX(animpath, 200, 10, dani6); }
var dani6 = function() { dfirepath.animate({fill: "#fff"}, 30); dman.animate({ transform: "s1 1"}, 100); }
dani1(); }); });
I guess your error is here:
var dicon = Snap(".d-icon");
You are passing a query selector to the Snap constructor, this means Snap always tries to get the first DOM element with that class, hence why you're getting the animations at the wrong place.
You can either correct that in two ways:
Declare width and height inside the constructor, for example var dicon = Snap(800, 600);
Since you are using jQuery you can access to the current element inside .each() with the $(this) keyword. Since you are using jQuery instead of the dollar you could use jQuery(this).
Please keep in mind this is a jQuery object and probably Snap will require a DOM object. In jQuery you can access the dom object by appending a [0] after the this keyword. If var dicon = Snap( jQuery(this) ); does not work you can try with var dicon = Snap( jQuery(this)[0] );
Additionally, you have several .attr({id : '...', in your code. I assume you are trying to associate to the paths an ID which are not unique. These should be relatively safe since they sit inside a SVG element and I don't see you are using those ID for future selection.
But if you have to select those at a later time I would suggest to append to these a numerical value so you wont have colliding ID names.

Raphaeljs path id inside a set attributes

I'm working on a map with Raphaeljs and I have the paths inside a set because I want all of them to have the same attributes and all is good but now I would like to set an id to each path and I did it to one but the attributes got lost, so my question is...Is there a way to have an path.id inside a set with the set attributes? Thanks
Here is the file http://jsfiddle.net/tLSpv/2/
var paper = Raphael(0,0,540, 615);
var newmexico = paper.set();
newmexico.push(
paper.path("M343.249,11.503l-1.658,3.554l-0.474,16.822c0,0-3.554-0.711-5.449-0.711 s-5.686,3.554-5.449,4.265c0.237,0.711-1.895,13.268-1.895,14.215s3.554,4.502,3.317,5.449c-0.237,0.948-0.711,3.554-0.474,4.502 c0.237,0.948,0.711,7.345,0.474,9.477c-0.237,2.132,0.948,11.846-1.658,13.268h42.883v5.449h38.855h37.197V73.103l1.303-1.303V1.239 L340.643,1.18v4.4L343.249,11.503z").node.id = 'colfax';
).attr({
fill: '#F7F0EA',
stroke: '#006599',
'stroke-width': 1,
cursor: 'pointer'
})
.hover(function () {
this.animate({fill: '#006599'}, 300);
},
function () {
this.animate({fill: '#F7F0EA'}, 300)
}
);
Here is a suggestion. Add Raphaels data() function to your on top of your attribute list.
Exp:
for (var i = 0, i < 5, i++) {
paper.circle(10 + 15 * i, 10, 10)
.attr({fill: "#000"})
.data("i", i)
.click(function () {
alert(this.data("i"));
});
}
This little example is taken from here. data Adds or retrieves given value associated with given key. In this case "i" is a key and i is the value.
This is how I assign ids to my Raphael objects. Good Luck

YUI Tooltip not displaying on top of Panel

Currently having a problem trying to get YUI Tooltips to display on top of a YUI Panel after it is shown that were previously created. The problem is is that the Panel cannot be registered to the overlay manager because it would require a TON of code to be changed and tested extending a hard deadline. The only way to get this to work is to setup the Tooltips after the Panel is shown. Problem there is the amount of code changes that would have to be done to attach another function call. My problem is that I was hoping that I could use the event handling to use "showEvent" but I cannot seem to get it to work (I apologize for word count):
var panel_obj = new YAHOO.widget.Panel('someID', {
width: "700px",
height: "500px",
close: true,
draggable: false,
modal: true,
constraintoviewport: true,
visible: false,
fixedcenter: true
});
panel_obj.render();
var tooltip_name = 'newTooltip1';
var element_id = 'htmlElementIDToBecomeTooltip';
function createTooltip() {
window[tooltip_name] = new YAHOO.widget.Tooltip(tooltip_name, {
context: element_id,
xyoffset: [15, -15],
zIndex: 999
});
}
function successfulScenario() {
panel_obj.show();
createTooltip();
}
function failedScenario1() {
YAHOO.util.Event.addListener(
'someID',
"showEvent",
createTooltip
);
}
function failedScenario2() {
createTooltip();
panel_obj.show();
}
The only way I have seem to get it working is by running something like successfulScenario(). I'm coming from a jQuery background so I'm still learning YUI. I would love to be able to just extend (subclass) YAHOO.widget.Panel's show() function to call createTooltip but I'm not that much of a guru or I would probably need to change a very large codebase to do it.
try using the "container" property for the tooltip config (so the container would be the panel's element):
function createTooltip() {
window[tooltip_name] = new YAHOO.widget.Tooltip(tooltip_name, {
container: panel_obj.element,
context: element_id,
xyoffset: [15, -15]
});
}
This is the quick solution, using the show event and/or extending the class would be nice but gotta run, if you still need help, I'll check back (also check the example that i made with your code http://jsfiddle.net/3GWaM/2/ ).
function createTooltip() {
var tooltipEl = document.createElement('DIV');
panel_obj.get('element').appendChild(tooltipEl);
window[tooltip_name] = new YAHOO.widget.Tooltip(tooltipEl, {
context: element_id,
xyoffset: [15, -15],
zIndex: 999
});
}
This will ensure the that the tool tip div is created inside the dialog box, instead of in the document body, ensuring it does not appear below the dialog box.
Also, if you want to extend the panel class just do the following
function MyPanel(el, config) {
MyPanel.superclass.constructor.apply(this, arguments);
this.createToolTip();
}
YAHOO.lang.extend(MyPanel, YAHOO.widget.Panel , {
createToolTip: function () {
// create tool tip here
this.on('show', this.showTooltip, this, true);
},
showToolTip: function () {this.toolTip.show();}
});
function getPanelIDFromElementID (element_id) {
var parent_panel = YAHOO.util.Dom.getAncestorByClassName(element_id, 'yui-panel');
var parent_id = null;
if (parent_panel) {
parent_id = parent_panel.id;
}
return parent_id;
}
function createTooltips() {
var tooltip_elements = YAHOO.util.Dom.getElementsByClassName('tooltip');
for (var i = 0; i < tooltip_elements.length; i++) {
var ele_id = tooltip_elements[i].getAttribute('id');
var name = ele_id.charAt(0).toLowerCase() + ele_id.slice(1);
var nameArray = name.split("_");
for (var x=1; x < nameArray.length; x++) {
nameArray[x] = nameArray[x].charAt(0).toUpperCase() + nameArray[x].slice(1);
}
var elementName = nameArray.join('');
window[elementName] = new YAHOO.widget.Tooltip(elementName, {
context: escape(ele_id),
xyoffset: [15, -15],
zIndex: 999,
container: getPanelIDFromElementID(ele_id)
});
}
}

Categories