We Keep Coding

Reload this javascript file after an ajax page load (YITH Infinite Scroll)

I have a woocommerce shop that has an ajax page load navigation. So a user clicks next page and more products are loaded via ajax.
However, I have a javascript file that manipulates the colors on each product on a page load. But since I have introduced this ajax page load, the script no longer loads after a next page is requested.
I am using YITH Infinite Page scroll. They have a trigger yith_infs_added_elem that I can use to do some code after the ajax has been loaded.
So I currently have:
jQuery(document).on('yith_infs_added_elem', function() {
});
This is the YITH trigger I have to use to run my script after the ajax has loaded.
But I am stuck. I have read many other solutions for other people, but I cannot seem to figure out how to reload my javascript file - /js/javascript/colors/dominant-color-shop.js.
My javascript file that normally runs on page load is:
jQuery( document ).ready( function( $ ) {
var image = new Image;
var colorThief = new ColorThief();
var bg;
var vibrant_color;
var vibrantText;
$('.post-image-hidden-container').each(function() {
bg = $(this).text();
var rgbs_text = [];
image.onload = function() {
$('.shop-page-item-thumb').each(function() {
var thumb = $(this);
var rgbs = [];
thumb.find('img').each(function() {
var vibrant = new Vibrant(this);
var swatches = vibrant.swatches();
var dominantColor = colorThief.getColor(this);
var productColorPalette = colorThief.getPalette(this, 12);
var productLightestColor = productColorPalette.reduce(function(previousValue, currentValue) {
var currLightNess = (0.2126*currentValue[0] + 0.7152*currentValue[1] + 0.0722*currentValue[2]);
var prevLightNess = (0.2126*previousValue[0] + 0.7152*previousValue[1] + 0.0722*previousValue[2]);
return (prevLightNess < currLightNess) ? currentValue : previousValue;
});
/* Create Shades and Tints of Lightest Color */
var lightShadeRGB = productLightestColor.join();
lightShadeRGB = lightShadeRGB.split(',');
var r = lightShadeRGB[0],
g = lightShadeRGB[1],
b = lightShadeRGB[2];
var rpt = lightShadeRGB[0] - 35,
gpt = lightShadeRGB[1] - 35,
bpt = lightShadeRGB[2] - 35;
var tintDk = 'rgb('+rpt+', '+gpt+', '+bpt+')';
for (var swatch in swatches) {
if (swatches.hasOwnProperty(swatch) && swatches[swatch]) {
rgbs.push(swatches[swatch].getHex());
rgbs_text.push(swatches[swatch].getTitleTextColor());
}
}
vibrant_color = rgbs[0];
vibrant_color_2 = rgbs[1];
darkVibrant = rgbs[2];
darkMuted = rgbs[3];
lightVibrant = rgbs[4];
vibrantText = rgbs_text[0];
vibrantText_2 = rgbs_text[1];
darkVibrantText = rgbs_text[2];
darkMutedText = rgbs_text[3];
lightVibrantText = rgbs_text[4];
thumb.parent().find('.product-bottom-info-container').css({
borderTop: '4px solid ' + vibrant_color
});
thumb.parent().find('.hot-badge').css({
backgroundColor: darkMuted,
color: darkMutedText
});
thumb.parent().find('.mp3-badge').css({
backgroundColor: vibrant_color,
color: vibrantText
});
thumb.parent().find('.mp3-badge-link').css({
color: vibrantText
});
thumb.parent().find('.wav-badge').css({
backgroundColor: vibrant_color_2,
color: vibrantText_2
});
thumb.parent().find('.wav-badge-link').css({
color: vibrantText_2
});
thumb.parent().find('.hot-post-bookmark').css({
color: vibrant_color
});
thumb.parent().find('.the-rating-stars-icons').css({
color: vibrant_color
});
thumb.parent().find('.progress-bar').css({
backgroundColor: vibrant_color
});
});
});
}
image.src = bg;
});
$('#player-toggler-id').css({
backgroundColor: '#181f24'
});
});
It works fine until I request the next page. The javscript no longer works. How exactly can I call this script all over again, once the yith ajax has loaded with this trigger - yith_infs_added_elem.
I have read up on .on() .live() (which is deprecated), etc. Can anyone help?

Your function only runs on page load...
To trigger it again later, you should make it a named function.
So the script stays exactly the same, but wrapped with function arrangeColors(){ (You can name it as you wish) and }.
Then, in the ajax success callback, call this function again.
jQuery( document ).ready( function( $ ) {
function arrangeColors(){ // Make the script a named function
var image = new Image;
var colorThief = new ColorThief();
var bg;
var vibrant_color;
var vibrantText;
$('.post-image-hidden-container').each(function() {
bg = $(this).text();
var rgbs_text = [];
image.onload = function() {
$('.shop-page-item-thumb').each(function() {
var thumb = $(this);
var rgbs = [];
thumb.find('img').each(function() {
var vibrant = new Vibrant(this);
var swatches = vibrant.swatches();
var dominantColor = colorThief.getColor(this);
var productColorPalette = colorThief.getPalette(this, 12);
var productLightestColor = productColorPalette.reduce(function(previousValue, currentValue) {
var currLightNess = (0.2126*currentValue[0] + 0.7152*currentValue[1] + 0.0722*currentValue[2]);
var prevLightNess = (0.2126*previousValue[0] + 0.7152*previousValue[1] + 0.0722*previousValue[2]);
return (prevLightNess < currLightNess) ? currentValue : previousValue;
});
/* Create Shades and Tints of Lightest Color */
var lightShadeRGB = productLightestColor.join();
lightShadeRGB = lightShadeRGB.split(',');
var r = lightShadeRGB[0],
g = lightShadeRGB[1],
b = lightShadeRGB[2];
var rpt = lightShadeRGB[0] - 35,
gpt = lightShadeRGB[1] - 35,
bpt = lightShadeRGB[2] - 35;
var tintDk = 'rgb('+rpt+', '+gpt+', '+bpt+')';
for (var swatch in swatches) {
if (swatches.hasOwnProperty(swatch) && swatches[swatch]) {
rgbs.push(swatches[swatch].getHex());
rgbs_text.push(swatches[swatch].getTitleTextColor());
}
}
vibrant_color = rgbs[0];
vibrant_color_2 = rgbs[1];
darkVibrant = rgbs[2];
darkMuted = rgbs[3];
lightVibrant = rgbs[4];
vibrantText = rgbs_text[0];
vibrantText_2 = rgbs_text[1];
darkVibrantText = rgbs_text[2];
darkMutedText = rgbs_text[3];
lightVibrantText = rgbs_text[4];
thumb.parent().find('.product-bottom-info-container').css({
borderTop: '4px solid ' + vibrant_color
});
thumb.parent().find('.hot-badge').css({
backgroundColor: darkMuted,
color: darkMutedText
});
thumb.parent().find('.mp3-badge').css({
backgroundColor: vibrant_color,
color: vibrantText
});
thumb.parent().find('.mp3-badge-link').css({
color: vibrantText
});
thumb.parent().find('.wav-badge').css({
backgroundColor: vibrant_color_2,
color: vibrantText_2
});
thumb.parent().find('.wav-badge-link').css({
color: vibrantText_2
});
thumb.parent().find('.hot-post-bookmark').css({
color: vibrant_color
});
thumb.parent().find('.the-rating-stars-icons').css({
color: vibrant_color
});
thumb.parent().find('.progress-bar').css({
backgroundColor: vibrant_color
});
});
});
}
image.src = bg;
});
$('#player-toggler-id').css({
backgroundColor: '#181f24'
});
} // Add this closing bracket
// Call the function on load
arrangeColors();
});

I make it work now like this:
<script type="text/javascript">
jQuery(document).ready(function ($) {
loadAnimation();
jQuery(document).on("yith_infs_added_elem", function () {
loadAnimation();
});
function loadAnimation() {
//here put your code for something to doin my case .add-to-cart trigger
}
//here other functions for example flyToElement
});
</script>

backbone: how to pass data to a render view

is there a way to pass data to render
The following code is what I'm currently using:
render:function() {
var background =
var highlight = this.model.get('highlight');
$(this.el).find('div').each(function(index,element) {
if(index < highlight) {
$(element).css({'background': 'url("assets/img/alphabet/ok/ok.png"), url('+background+')'});
$(element).attr('id', 'ok');
} else {
$(element).removeAttr('id');
}
})
}
maybe like this pic:

... you can do something like this:
this.background : [],
//...
initialize : function(){
//...
this.background.push(string.charAt(i));
//...
},
render : function(){
//...
var background = this.background[index];
//...
}
but, maybe also for loop inside your initialize can stay inside render, because it render the view (with .append()).
EDIT NOTE:
I repeat, the possibilities to move around the loop in the initialization function in the render function.
I try to change your backbone view structure:
var WordView = Backbone.View.extend({
initialize : function(){
this.listenTo(this.model,"remove",this.remove);
},
render : function(){
var $Div,
string = this.model.get('string'), //use _string (string can cause some issue in IE)
highlight = this.model.get("highlight"),
letter_width = 36,
letter_heigth = 35,
word_width = string.length * letter_width;
if(this.model.get("x") + word_width > $(window).width()) this.model.set({x:$(window).width() - word_width});
$(this.el).css({
position:"absolute",
top : this.model.get("y"),
left : this.model.get("x")
});
var background,char;
for(var i; i < string.length; i++){
char = string.charAt(i);
background = "url('"+char+"') no-repeat";
$Div.removeAttr("id"); //seems useless
if(i < highlight){
background = "url('assets/img/alphabet/ok/ok.png'),url('"+char+"')";
$Div.id("ok"); //maybe is better $Div.class("ok");
}
$Div = $("<div>").clone();
$Div.css({
width : letter_width,
heigth : letter_height,
float: "left",
"background" : background
}).appendTo($(this.el));
}
}
});

Modifying Titanium Widgets without using global variables

I am trying to modify the following titanium Widget.
https://github.com/pablorr18/TiFlexiGrid
It is a photo gallery, where you can fetch remote images and store it in a gallery. See this question for a background to what the problem is:
Modifying widgets in an alloy project
The trouble I am having is that, like the poster in that thread said, I am unable to get the variable passed (in this case image URL) to my controller using callback functions. In Widget.JS, at the bottom of the file, I added the following code:
Widget.xml
<Alloy>
<View id="fgMain">
<Button title="Click me!" onTouchend="buttonClicked"/>
<View id="fgWrapper">
<ScrollView id="fgScrollView"/>
</View>
</View>
</Alloy>
Widget.js
// This will hold our callback
var onClickCallback;
// The button has been clicked, call callback
function buttonClicked(e) {
if(typeof(onClickCallback) === 'function') {
onClickCallback({ type:'clicked!' }); }
}
// Assign our callback
function onClick(callback) {
onClickCallback = callback;
};
// Make the onClick function public
exports.onClick = onClick;
I was then hoping to go into my main app and get the values from the callback function like this:
photoGallery.xml
<Alloy>
<Window>
<Widget id="myWidget" src="myWidget" />
</Window>
</Alloy>
photoGallery.js
// Now we can intercept the click within the widget
// and use the values passed
$.myWidget.onClick(function(e) {
alert(e.type);
});
The trouble is, as the onTouchend event did not fire, I was unable to pass the variable to the controller which inherits the widget as the callback functions are not set.
The original widget.js code is as follows:
exports.createGrid = function(args){
var params = args || {};
//Ti.API.info('Params es ---> '+ JSON.stringify(params));
var columns = params.columns || 4;
var space = params.space || 5;
var data = params.data || {};
var options = params.params || {};
var layout = params.layout || 'gallery';
var screenWidth = params.width || Ti.Platform.displayCaps.getPlatformWidth();
if (OS_ANDROID) {
screenWidth /= Ti.Platform.displayCaps.logicalDensityFactor;
}
var newWidth = screenWidth - space;
var columnWidth = (newWidth / columns) - space;
var frameBGcolor = options.backgroundColor || '#fff';
//ADJUST THE SCROLLVIEW
$.fgScrollView.left = space;
$.fgScrollView.top = space;
$.fgScrollView.right = -1;
$.fgMain.backgroundColor = frameBGcolor;
for (var x=0;x < data.length; x++){
var frame = Ti.UI.createView({
width:columnWidth,
height:columnWidth,
backgroundColor:options.gridColor || '#eee',
top:0,
left:0,
right:space,
bottom:space
});
var overlay = Ti.UI.createView({
width:Ti.UI.FILL,
height:Ti.UI.FILL,
backgroundColor:'transparent',
zIndex:1,
strImage:data[x].image
});
var gridElement;
//TYPE OF LAYOUT
switch(layout){
case('gallery'):
gridElement = Widget.createController('gallery',{
image:data[x].image,
title:data[x].title,
width:columnWidth,
padding:options.padding || 10,
showTitle:options.showTitle || false
}).getView();
overlay.addEventListener('click',function(e){
exports.openModal(e.source.strImage);
});
break;
case('customView'):
gridElement = data[x];
break;
}
frame.add(gridElement);
// This condition makes the overlay not be added if it's not gallery layout.
// It's used to make the custom view, caputre the click method. If not,
// The overlay is on top of it and captures the click.
if(layout == 'gallery')
frame.add(overlay);
$.fgScrollView.add(frame);
};
};
exports.openModal = function(url){
var overlay = Ti.UI.createView({
width:Ti.UI.FILL,
height: Ti.UI.FILL,
backgroundColor:'#000',
opacity:0,
zIndex:100
});
var topView = Ti.UI.createView({
width:Ti.UI.FILL,
height: Ti.UI.FILL,
zIndex:1200,
visible:false
});
//this gets image , adds it to top view
var imgView = Ti.UI.createImageView({
image: url,
width:Ti.UI.SIZE,
height: Ti.UI.SIZE
});
//add it
topView.add(imgView);
$.fgMain.add(overlay);
if (OS_IOS){
//ANIMATION OF OVERLAY
overlay.animate({opacity:0.7,duration:200});
//ANIMATION FOR POP EFFECT
var t = Titanium.UI.create2DMatrix();
t = t.scale(0);
var a = Titanium.UI.createAnimation();
a.transform = t;
a.duration = 200;
$.fgMain.add(topView);
topView.animate(a);
a.addEventListener('complete', function(){
topView.visible = true;
var t2 = Titanium.UI.create2DMatrix();
t2 = t2.scale(1.2);
topView.animate({transform:t2, duration:200},function(e){
var t4 = Titanium.UI.create2DMatrix();
t4 = t4.scale(1.0);
topView.animate({transform:t4, duration:200});
//alert('animation complete');
//hide cancel button
});
});
}
else{
//ANIMATION OF OVERLAY
overlay.animate({opacity:0.7,duration:200},function(e){
topView.visible = true;
$.fgMain.add(topView);
});
}
topView.addEventListener('click',function(e){
if (OS_IOS){
var t3 = Titanium.UI.create2DMatrix();
t3 = t3.scale(1.2);
var a2 = Titanium.UI.createAnimation();
a2.transform = t3;
a2.duration = 200;
topView.animate(a2);
a2.addEventListener('complete', function(){
var t5 = Titanium.UI.create2DMatrix();
t5 = t5.scale(0);
topView.animate({transform:t5, duration:200},function(e){
$.fgMain.remove(topView);
overlay.animate({opacity:0,duration:200},function(e){
$.fgMain.remove(overlay);
});
});
});
}
else{
$.fgMain.remove(topView);
overlay.animate({opacity:0,duration:200},function(e){
$.fgMain.remove(overlay);
});
}
});
};
exports.clearGrid = function(){
$.fgScrollView.removeAllChildren();
};
From looking at it, the only way it seems to get an event handler to register is to put it one of the functions (createGrid) and call it like this:
exports.createGrid in widget.xml
var button = Titanium.UI.createButton({
title : 'Use Picture',
top : 10,
width : 100,
height : 50
});
button.addEventListener('click',function(e)
{
Titanium.API.info(url);
//do not want to store in global variable
Alloy.Globals.urlFromGal = url;
});
//add it
topView.add(imgView);
topView.add(button);
$.fgMain.add(overlay);
However I am not sure how to adapt that code to this:
// This will hold our callback
var onClickCallback;
// The button has been clicked, call callback
function buttonClicked(e) {
if(typeof(onClickCallback) === 'function') {
onClickCallback({ type:'clicked!' }); }
}
// Assign our callback
function onClick(callback) {
onClickCallback = callback;
};
// Make the onClick function public
exports.onClick = onClick;
So that I am able to access the url variable outside of the widget.js scope. I could use GLOBAL Variables - by that store the variable in one instead for this task, however I want to avoid doing things this way.
UPDATE:
Unable to get it working, but I have added the callback into an event handler. Got the event handler to fire, but not sure how to pass the callback data to onClick function:
var onClickCallback;
exports.createGrid = function(args){
var params = args || {};
//Ti.API.info('Params es ---> '+ JSON.stringify(params));
var columns = params.columns || 4;
var space = params.space || 5;
var data = params.data || {};
var options = params.params || {};
var layout = params.layout || 'gallery';
var screenWidth = params.width || Ti.Platform.displayCaps.getPlatformWidth();
if (OS_ANDROID) {
screenWidth /= Ti.Platform.displayCaps.logicalDensityFactor;
}
var newWidth = screenWidth - space;
var columnWidth = (newWidth / columns) - space;
var frameBGcolor = options.backgroundColor || '#fff';
//ADJUST THE SCROLLVIEW
$.fgScrollView.left = space;
$.fgScrollView.top = space;
$.fgScrollView.right = -1;
$.fgMain.backgroundColor = frameBGcolor;
for (var x=0;x < data.length; x++){
var frame = Ti.UI.createView({
width:columnWidth,
height:columnWidth,
backgroundColor:options.gridColor || '#eee',
top:0,
left:0,
right:space,
bottom:space
});
var overlay = Ti.UI.createView({
width:Ti.UI.FILL,
height:Ti.UI.FILL,
backgroundColor:'transparent',
zIndex:1,
strImage:data[x].image
});
var gridElement;
//TYPE OF LAYOUT
switch(layout){
case('gallery'):
gridElement = Widget.createController('gallery',{
image:data[x].image,
title:data[x].title,
width:columnWidth,
padding:options.padding || 10,
showTitle:options.showTitle || false
}).getView();
overlay.addEventListener('click',function(e){
exports.openModal(e.source.strImage);
});
break;
case('customView'):
gridElement = data[x];
break;
}
frame.add(gridElement);
// This condition makes the overlay not be added if it's not gallery layout.
// It's used to make the custom view, caputre the click method. If not,
// The overlay is on top of it and captures the click.
if(layout == 'gallery')
frame.add(overlay);
$.fgScrollView.add(frame);
};
};
exports.openModal = function(url){
var overlay = Ti.UI.createView({
width:Ti.UI.FILL,
height: Ti.UI.FILL,
backgroundColor:'#000',
opacity:0,
zIndex:100
});
var topView = Ti.UI.createView({
width:Ti.UI.FILL,
height: Ti.UI.FILL,
zIndex:1200,
visible:false
});
//this gets image , adds it to top view
var imgView = Ti.UI.createImageView({
image: url,
width:Ti.UI.SIZE,
height: Ti.UI.SIZE
});
var button = Titanium.UI.createButton({
title : 'Use Picture',
top : 10,
width : 100,
height : 50
});
button.addEventListener('touchend',function(e)
{
//Titanium.API.info(url);
if(typeof(onClickCallback) === 'function') {
onClickCallback({ type:'clicked!' }); }
});
//pass callback, not working
onClick();
//add it
topView.add(imgView);
topView.add(button);
$.fgMain.add(overlay);
if (OS_IOS){
//ANIMATION OF OVERLAY
overlay.animate({opacity:0.7,duration:200});
//ANIMATION FOR POP EFFECT
var t = Titanium.UI.create2DMatrix();
t = t.scale(0);
var a = Titanium.UI.createAnimation();
a.transform = t;
a.duration = 200;
$.fgMain.add(topView);
topView.animate(a);
a.addEventListener('complete', function(){
topView.visible = true;
var t2 = Titanium.UI.create2DMatrix();
t2 = t2.scale(1.2);
topView.animate({transform:t2, duration:200},function(e){
var t4 = Titanium.UI.create2DMatrix();
t4 = t4.scale(1.0);
topView.animate({transform:t4, duration:200});
//alert('animation complete');
//hide cancel button
});
});
}
else{
//ANIMATION OF OVERLAY
overlay.animate({opacity:0.7,duration:200},function(e){
topView.visible = true;
$.fgMain.add(topView);
});
}
topView.addEventListener('click',function(e){
if (OS_IOS){
var t3 = Titanium.UI.create2DMatrix();
t3 = t3.scale(1.2);
var a2 = Titanium.UI.createAnimation();
a2.transform = t3;
a2.duration = 200;
topView.animate(a2);
a2.addEventListener('complete', function(){
var t5 = Titanium.UI.create2DMatrix();
t5 = t5.scale(0);
topView.animate({transform:t5, duration:200},function(e){
$.fgMain.remove(topView);
overlay.animate({opacity:0,duration:200},function(e){
$.fgMain.remove(overlay);
});
});
});
}
else{
$.fgMain.remove(topView);
overlay.animate({opacity:0,duration:200},function(e){
$.fgMain.remove(overlay);
});
}
});
};
exports.clearGrid = function(){
$.fgScrollView.removeAllChildren();
};
// Assign our callback
function onClick(callback) {
onClickCallback = callback;
alert(onClickCallback);
};
// Make the onClick function public
exports.onClick = onClick;

How can I place a button on each row in titanium studio?

I want to be able to put a different button inside every row (createTableViewRow). I have created five buttons (Titanium.UI.createButton), but I don't know how to place all five of my buttons for each created row.
Can somebody give me a hint on how to do it?
function sendAjax() {
var xhr = Titanium.Network.createHTTPClient();
xhr.onerror = function(e){
var error = e.error;
alert(error);
};
xhr.open('GET', 'http://xxxxxxxxxxxxxx');
xhr.send();
var tv = Titanium.UI.createTableView({
height: Titanium.UI.SIZE,
width: Titanium.UI.FILL
});
win2.add(tv);
xhr.onload = function() {
var data = [];
var schools = JSON.parse(this.responseText);
for (s in schools) {
data.push(Titanium.UI.createTableViewRow({
title: schools[s].Name
}));
}
tv.data = data;
};
}

You should add the listener event on the tableView, not on each buttons inside the row :
tableView.addEventListener("click", function (event) {
if (event.source.buttonid) {
//it's a button
}
});

Try this,
var win = Ti.UI.createWindow({
backgroundColor : '#fff'
});
var tableData = [];
for(var i = 0; i < 10; i++) {
var row = Ti.UI.createTableViewRow();
var button = Ti.UI.createButton({
title : 'Button ' + i,
width : 100,
height : 40,
buttonid : i //our custom button property
});
row.add(button);
tableData.push(row);
button.addEventListener('click', function(e) {
Ti.API.info('button ' + e.source.buttonid + ' clicked.');
alert('Button ' + e.source.buttonid);
});
}
var tableView = Ti.UI.createTableView({
data : tableData
});
win.add(tableView);
win.open();
This answer find from here
UPDATE :
function sendAjax() {
var xhr = Titanium.Network.createHTTPClient();
xhr.onerror = function(e){
var error = e.error;
alert(error);
};
xhr.open('GET', 'http://xxxxxxxxxxxxxx');
xhr.send();
var tv = Titanium.UI.createTableView({
height: Titanium.UI.SIZE,
width: Titanium.UI.FILL
});
win2.add(tv);
xhr.onload = function() {
var data = [];
var schools = JSON.parse(this.responseText);
for (s in schools) {
var row = Ti.UI.createTableViewRow();
var rowItem = Ti.UI.createView({
height : 40,
width : Ti.UI.FILL,
layout : 'horizontal'
});
row.add(rowItem);
var title = Ti.UI.createLabel({
height : 40,
text : schools[s].Name,
width : Ti.UI.SIZE
});
rowItem.add(title);
var button = Ti.UI.createButton({
title : 'click ',
width : 100,
height : 40,
buttonid : s //our custom button property
});
rowItem.add(button);
data.push(row);
button.addEventListener('click', function(e) {
Ti.API.info('button ' + JSON.stringify(e.source.buttonid) + ' clicked.');
});
};
tv.data = data;
};
};
Don't forget to mark this as correct answer If this useful.

Show markers from JSON array on map in Titanium

I'm working on a Titanium application where I need to show multiple markers on a map. I get the data for these markers trough a JSON array, which can be found here. I am getting no errors, I even get the 'Succes' alert, but still nothing is showing on the map.
var pin = [];
var mapview = Ti.Map.createView({
height : '90%',
mapType : Ti.Map.STANDARD_TYPE,
animate : true,
regionFit : true,
userLocation : true,
region : {
latitudeDelta : 0.05,
longitudeDelta : 0.05
}
});
var xhr = Ti.Network.createHTTPClient({
onload : function(e) {
var data = JSON.parse(this.responseText);
for (var i = 0; i < data.length; i++) {
pin[i] = Titanium.Map.createAnnotation({
latitude : data.rows[i][7],
longitude : data.rows[i][8],
title : data.rows[i][3],
subtitle : data.rows[i][9],
pincolor : Titanium.Map.ANNOTATION_PURPLE,
animate : true,
myid : i
});
mapview.addAnnotation(pin[i]);
}
Ti.API.debug(this.responseText);
alert('success');
},
onerror : function(e) {
Ti.API.debug(e.error);
alert('error');
},
timeout : 5000
});
xhr.open("GET", query);
xhr.send();
win.add(mapview);
win.open();
Any help is very much appreciated!

Finally got it to work. Adjusted the code in the question to this:
var mapview = Ti.Map.createView({
height : '90%',
mapType : Ti.Map.STANDARD_TYPE,
animate : true,
regionFit : true,
userLocation : true,
region : {
latitudeDelta : 1.7,
longitudeDelta : 1.7
}
});
win.add(mapview);
var annotations = [];
var query = '..JSON URL..';
var xhr = Ti.Network.createHTTPClient({
onload : function(e) {
var data = JSON.parse(this.responseText);
Ti.API.info('Datum=' + data.rows[1][0]);
for (var i = 0; i < data.rows.length; i++) {
var marker = Titanium.Map.createAnnotation({
latitude : data.rows[i][7],
longitude : data.rows[i][8],
title : data.rows[i][3],
subtitle : data.rows[i][9],
pincolor: Ti.Map.ANNOTATION_GREEN,
animate : true,
myid : i
});
mapview.addAnnotation(marker);
}
Ti.API.debug(this.responseText);
},
onerror : function(e) {
Ti.API.debug(e.error);
alert('error');
},
timeout : 5000
});
xhr.open("GET", query);
xhr.send();
This will populate the map with multiple annotations.