jssor multiple instances - change the slide of second jssor instance on $EVT_POSITION_CHANGE event of the first jssor instance - jssor

Can anyone/jssor support help me how to change the images of second and third jssor sliders when slide show position change event trigger from the first jssor slider? I would be so much appreciated.
thanks,
c
this jssor_slider2.$GoTo(1); is not working.
++++++++++++++++++++++++++++++
function OnSlidePositionChange(slideIndex, fromIndex) {
var jssor_slider2 = new $JssorSlider$('slider2_container', { $AutoPlay: false });
if (slideIndex == 3)
jssor_slider2.$GoTo(1);
else
jssor_slider2.$GoTo(slideIndex + 1);
}
jssor_slider1.$On($JssorSlider$.$EVT_POSITION_CHANGE, OnSlidePositionChange);
++++++++++++++++++++++++++++++
<script>
jssor_slider1_starter("slider1_container");
jssor_slider2_starter("slider2_container");
jssor_slider3_starter("slider3_container");
</script>
script.js file
jssor_slider1_starter = function (containerId) {
var jssor_slider1 = new $JssorSlider$(containerId, {
...
}
function OnSlidePositionChange(slideIndex, fromIndex) {
//HELP ME PLEASE HERE.....
//var jssor_slider2 = new $JssorSlider$('slider2_container', {});
//if (slideIndex == 3)
// nestedSliders[1].$GoTo(1);
//else
// nestedSliders[1].$GoTo(slideIndex + 1);
}
jssor_slider1.$On($JssorSlider$.$EVT_POSITION_CHANGE, OnSlidePositionChange);
}
jssor_slider2_starter = function (containerId) {
var jssor_slider2 = new $JssorSlider$(containerId, {
......
}
}
jssor_slider3_starter = function (containerId) {
var jssor_slider3 = new $JssorSlider$(containerId, {
......
}
}

$JssorSlider$.$EVT_POSITION_CHANGE fires continuously while sliding.
$JssorSlider$.$EVT_PARK fires while slide change.
Please do this job this way,
function jssor_slider3_starter(containerId_1, containerId_2, containerId_3)
{
var options1 = {};
var options2 = {};
var options3 = {};
...
var jssor_slider1 = new $JssorSlider$(containerId_1, options1);
var jssor_slider2 = new $JssorSlider$(containerId_2, options2);
var jssor_slider3 = new $JssorSlider$(containerId_3, options3);
...
function OnSlidePark(slideIndex, fromIndex) {
if (slideIndex == 3)
jssor_slider2.$GoTo(1);
else
jssor_slider2.$GoTo(slideIndex + 1);
}
jssor_slider1.$On($JssorSlider$.$EVT_PARK, OnSlidePark);
...
}

Related

How to generate leaflet control from database

I wish to generate a custom dropdown filter, based on categories from a database.
How is this achieved?
In my example, this is (poorly) implemented with some hard coding and duplication.
var serviceOverlays = [
{name:"Cardiology", value:"cardiology"},
{name:"Opthamology", value:"opthamology"}
];
var oSelect = L.control({position : 'topright'});
oSelect.onAdd = function (map) {
var overlayParent = document.getElementById('new-parent'); // overlays div
var node = L.DomUtil.create('select', 'leaflet-control');
node.innerHTML = '<option value="cardiologist">Cardioligist</option><option value="opthamology">Opthamology</option>';
overlayParent.appendChild(node);
L.DomEvent.disableClickPropagation(node);
L.DomEvent.on(node,'change',function(e){
var select = e.target;
for(var name in serviceOverlays){
serviceOverlays[name].removeFrom(map);
}
serviceOverlays[select.value].addTo(map);
});
Fiddle
I created a Control for you:
L.Control.Select = L.Control.extend({
options: {
position : 'topright'
},
initialize(layers,options) {
L.setOptions(this,options);
this.layers = layers;
},
onAdd(map) {
this.overlayParent = L.DomUtil.create('div', 'leaflet-control select-control');
this.node = L.DomUtil.create('select', 'leaflet-control',this.overlayParent);
L.DomEvent.disableClickPropagation(this.node);
this.updateSelectOptions();
L.DomEvent.on(this.node,'change',(e)=>{
var select = e.target;
for(var value in this.layers){
this.layers[value].layer.removeFrom(map);
}
this.layers[select.value].layer.addTo(map);
});
return this.overlayParent;
},
updateSelectOptions(){
var options = "";
if(this.layers){
for(var value in this.layers){
var layer = this.layers[value];
options += '<option value="'+value+'">'+layer.name+'</option>';
}
}
this.node.innerHTML = options;
},
changeLayerData(layers){
this.layers = layers;
this.updateSelectOptions();
}
});
var oSelect = new L.Control.Select(serviceOverlays,{position : 'topright'}).addTo(map);
The data structure have to be:
var serviceOverlays = {
"cardiology": {name:"Cardiology", layer: cities},
"opthamology": {name:"Opthamology", layer: badCities}
};
Demo: https://jsfiddle.net/falkedesign/1rLntbo5/
You can also change the data dynamicl< with oSelect.changeLayerData(serviceOverlays2)

One pushpin click opens them all

Need help troubleshooting. All of the pushpins open upon clicking a single one opens up every pushpin infobox. I want there to be one pushpin infobox that changes each time a pushpin is clicked, only allowing one infobox to be open at a time.
// BING MAP Java Script
var map = null;
var pinid = 0;
var arrPinInfobox = [];
//Bing V8 start
function GetMap() { //LocInfo, Lat, Long
var _MapElement = document.getElementById("myMap");
if (_MapElement === null || typeof _MapElement === "undefined")
return;
if(jQuery("#pagesitemap_4_noMap").length < 0)
return;
var arrLocInfoRec = [];
var arrLLAdder = [];
var MapCenterLat;
var MapCenterLong;
var ZoomFactor;
var ZipLLSource = jQuery("#hdnZipLL").val();
var LocInfo = jQuery("#hdnCompleteLocInfo").val();
var ZipLL = [];
var Lat = "";
var Long ="";
console.log("Long");
if(typeof LocInfo === "undefined")
{
console.log("locInfo Undefined");
return;
}
if (ZipLLSource.length > 0) {
ZipLL = (ZipLLSource).split("`");
}
if (LocInfo.length > 0) {
arrLocInfoRec = LocInfo.split("|")
}
if (Lat.length > 0 && Long.length > 0) {
MapCenterLat = parseFloat(Lat);
MapCenterLong = parseFloat(Long);
ZoomFactor = 11; //16
}
else if (ZipLL.length >= 2) {
MapCenterLat = parseFloat(ZipLL[0]);
MapCenterLong = parseFloat(ZipLL[1]);
ZoomFactor = 11;
}
var mapOptions = {
credentials: ' ',
center: new Microsoft.Maps.Location(MapCenterLat, MapCenterLong),
mapTypeId: Microsoft.Maps.MapTypeId.Automatic,
zoom: ZoomFactor,
showScalebar: true
}
map = new Microsoft.Maps.Map('#myMap', mapOptions);
var arrPins = [];
var arrPinCenter = [];
//Generating Pins for multiple locations with Lat,Long
for (var locNum = 0; locNum <= arrLocInfoRec.length - 1; locNum++) {
try {
arrLLAdder = arrLocInfoRec[locNum].split("`");
if (arrLLAdder.length >= 13) {
//var latlong = arrLLAdder[11].split(',');
arrPinCenter[locNum] = new Microsoft.Maps.Location(parseFloat(arrLLAdder[11]), parseFloat(arrLLAdder[12]));
arrPinCenter[locNum] = new Microsoft.Maps.Location(parseFloat(arrLLAdder[11]), parseFloat(arrLLAdder[12]));
arrPins[locNum] = new Microsoft.Maps.Pushpin(
arrPinCenter[locNum], {
text: arrLLAdder[8] ,
icon: 'https://www.bingmapsportal.com/Content/images/poi_custom.png',
anchor: new Microsoft.Maps.Point(12, 39)
}
);
var adder = arrLLAdder[2] + '\r\n' + arrLLAdder[4] + '\r\n' + arrLLAdder[6] + arrLLAdder[9] + "\r\n" + arrLLAdder[1]
// Create the infobox for the pushpin
arrPinInfobox[locNum] = new Microsoft.Maps.Infobox(arrPins[locNum].getLocation(),
{ width: 350,
height: 100,
title: arrLLAdder[5],
description: adder,
offset: new Microsoft.Maps.Point(-3,13),
visible: false
});
// Add handler for the pushpin click event.
Microsoft.Maps.Events.addHandler(arrPins[locNum], 'click', displayInfobox);
// Add the Push Pins and InfoBox to the map all at once
if(arrPins.length > 0) {
map.entities.push(arrPins); //[locNum]
}
}
else {
console.log("Invalid Data: arrLocInfoRec[" + locNum + "] = \"" + arrLocInfoRec[locNum] + "\"");
}
} catch (e) {
console.log(e.message + "\r\n" + arrLocInfoRec[locNum]);
}
}
}
function displayInfobox(e) {
//map.entities.push(arrPinInfobox);
console.log("DisplayBox");
for(var i in arrPinInfobox){
arrPinInfobox[i].setOptions({ visible: true });
arrPinInfobox[parseInt(e.target.getText()) - 1].setOptions({ visible: true });
var infobox = arrPinInfobox[i];
infobox.setMap(map);
}
}
Your code in the displayInfobox function loops through all your infoboxes and sets visible to true and adding them to the map. Your code is functioning how it was written.
What you want to do is filter out your infoboxes. Personally I hate the whole array of infobox idea, it is messy. I believe I've recommended before the idea of creating a single infobox and reusing it when a pushpin is clicked. That is the best approach if you only need one infobox to appear at a time. If you want to be able to show multiple infoboxes at a time, store the reference to the infobox in the pushpin some how. All shapes in Bing Maps has a metadata property reserved for your custom data. Also just noticed you add the array of pushpins to the map several times, this will cause issues. Here is a proposed change to your code, I've added a comment with // Ricky: to indicate the changes I made:
// BING MAP Java Script
var map = null;
var pinid = 0;
var arrPinInfobox = [];
//Bing V8 start
function GetMap() { //LocInfo, Lat, Long
var _MapElement = document.getElementById("myMap");
if (_MapElement === null || typeof _MapElement === "undefined")
return;
if(jQuery("#pagesitemap_4_noMap").length < 0)
return;
var arrLocInfoRec = [];
var arrLLAdder = [];
var MapCenterLat;
var MapCenterLong;
var ZoomFactor;
var ZipLLSource = jQuery("#hdnZipLL").val();
var LocInfo = jQuery("#hdnCompleteLocInfo").val();
var ZipLL = [];
var Lat = "";
var Long ="";
console.log("Long");
if(typeof LocInfo === "undefined")
{
console.log("locInfo Undefined");
return;
}
if (ZipLLSource.length > 0) {
ZipLL = (ZipLLSource).split("`");
}
if (LocInfo.length > 0) {
arrLocInfoRec = LocInfo.split("|")
}
if (Lat.length > 0 && Long.length > 0) {
MapCenterLat = parseFloat(Lat);
MapCenterLong = parseFloat(Long);
ZoomFactor = 11; //16
}
else if (ZipLL.length >= 2) {
MapCenterLat = parseFloat(ZipLL[0]);
MapCenterLong = parseFloat(ZipLL[1]);
ZoomFactor = 11;
}
var mapOptions = {
credentials: ' ',
center: new Microsoft.Maps.Location(MapCenterLat, MapCenterLong),
mapTypeId: Microsoft.Maps.MapTypeId.Automatic,
zoom: ZoomFactor,
showScalebar: true
}
map = new Microsoft.Maps.Map('#myMap', mapOptions);
var arrPins = [];
var arrPinCenter = [];
//Generating Pins for multiple locations with Lat,Long
for (var locNum = 0; locNum <= arrLocInfoRec.length - 1; locNum++) {
try {
arrLLAdder = arrLocInfoRec[locNum].split("`");
if (arrLLAdder.length >= 13) {
//var latlong = arrLLAdder[11].split(',');
arrPinCenter[locNum] = new Microsoft.Maps.Location(parseFloat(arrLLAdder[11]), parseFloat(arrLLAdder[12]));
arrPins[locNum] = new Microsoft.Maps.Pushpin(arrPinCenter[locNum], {
text: arrLLAdder[8] ,
icon: 'https://www.bingmapsportal.com/Content/images/poi_custom.png',
anchor: new Microsoft.Maps.Point(12, 39)
});
var adder = arrLLAdder[2] + '\r\n' + arrLLAdder[4] + '\r\n' + arrLLAdder[6] + arrLLAdder[9] + "\r\n" + arrLLAdder[1]
// Create the infobox for the pushpin
//Ricky: Add your infobox as a reference in your pushpin
arrPins[locNum]. metadata = new Microsoft.Maps.Infobox(arrPins[locNum].getLocation(),
{ width: 350,
height: 100,
title: arrLLAdder[5],
description: adder,
offset: new Microsoft.Maps.Point(-3,13),
visible: false
});
// Add handler for the pushpin click event.
Microsoft.Maps.Events.addHandler(arrPins[locNum], 'click', displayInfobox);
}
else {
console.log("Invalid Data: arrLocInfoRec[" + locNum + "] = \"" + arrLocInfoRec[locNum] + "\"");
}
} catch (e) {
console.log(e.message + "\r\n" + arrLocInfoRec[locNum]);
}
}
// Add the Push Pins and InfoBox to the map all at once
//Ricky: Moved this out of the array as you only need to add array of pushpins to the map once.
if(arrPins.length > 0) {
map.entities.push(arrPins); //[locNum]
}
}
function displayInfobox(e) {
//map.entities.push(arrPinInfobox);
console.log("DisplayBox");
//Get infobox from the pushpin, rather than looping through array.
var infobox = e.target.metadata;
infobox.setOptions({ visible: true });
//for(var i in arrPinInfobox){
//arrPinInfobox[i].setOptions({ visible: true });
//arrPinInfobox[parseInt(e.target.getText()) - 1].setOptions({ visible: true });
//var infobox = arrPinInfobox[i];
//infobox.setMap(map);
//}
}
If you want to clean up your code some more I recommend:
get rid of all the array's, there is no need for them.
Use a layer for your pushpins. Add a single click event on the layer rather than on each individual pushpin.

Accordion Native Bootstrap

I have a problem with the accordion in Bootstrap Native. Everything works fine except for one thing. After expanding other .collapsed accordion, the class is not added to the former that was developed. I've tried several ways and still nothing. Adding the collapsed class is addClass (element, collapsed); just the other way removeClass ...
Below JS file:
// event targets and constants
var accordion = null, collapse = null, self = this,
isAnimating = false, // when true it will prevent click handlers
accordionData = element[getAttribute]('data-parent'),
// component strings
component = 'collapse',
collapsed = 'collapsed',
test = 'test'
// private methods
openAction = function(collapseElement) {
bootstrapCustomEvent.call(collapseElement, showEvent, component);
isAnimating = true;
addClass(collapseElement,collapsing);
addClass(collapseElement,showClass);
addClass(element,collapsed);
setTimeout(function() {
collapseElement[style][height] = getMaxHeight(collapseElement) + 'px';
(function(){
emulateTransitionEnd(collapseElement, function(){
isAnimating = false;
collapseElement[setAttribute](ariaExpanded,'true');
removeClass(collapseElement,collapsing);
collapseElement[style][height] = '';
bootstrapCustomEvent.call(collapseElement, shownEvent, component);
});
}());
}, 20);
},
closeAction = function(collapseElement) {
bootstrapCustomEvent.call(collapseElement, hideEvent, component);
isAnimating = true;
collapseElement[style][height] = getMaxHeight(collapseElement) + 'px';
setTimeout(function() {
addClass(collapseElement,collapsing);
collapseElement[style][height] = '0px';
(function() {
emulateTransitionEnd(collapseElement, function(){
isAnimating = false;
collapseElement[setAttribute](ariaExpanded,'false');
removeClass(collapseElement,collapsing);
removeClass(collapseElement,showClass);
collapseElement[style][height] = '';
bootstrapCustomEvent.call(collapseElement, hiddenEvent, component);
});
}());
},20);
},
getTarget = function() {
var href = element.href && element[getAttribute]('href'),
parent = element[getAttribute](dataTarget),
id = href || ( parent && targetsReg.test(parent) ) && parent;
return id && queryElement(id);
};
// public methods
this.toggle = function(e) {
e.preventDefault();
if (isAnimating) return;
if (!hasClass(collapse,showClass)) {
self.show();
} else {
self.hide();
}
};
this.hide = function() {
closeAction(collapse);
addClass(element,collapsed);
//jak się zwija dodaje klase
};
this.show = function() {
openAction(collapse);
removeClass(element,collapsed);
//jak się rozwija usuwa klase
if ( accordion !== null ) {
var activeCollapses = getElementsByClassName(accordion,component+' '+showClass);
for (var i=0, al=activeCollapses[length]; i<al; i++) {
if ( activeCollapses[i] !== collapse) closeAction(activeCollapses[i]);
}
}
};
// init
if ( !(stringCollapse in element ) ) { // prevent adding event handlers twice
on(element, clickEvent, this.toggle);
}
collapse = getTarget();
accordion = queryElement(options.parent) || accordionData && getClosest(element, accordionData);
element[stringCollapse] = this;
};
As you can see the code is not added to the previously developed(<a href...) .collapsed accordion.

Famo.us not loading Constructor of Strip View in Timbre Example

I am working no Timbre View Example of Famo.us, and what I am trying to achieve is simply open the page by clicking on strip view options in the app and closing the Menu Drawer as soon as I click on the Strip View option
for achieving this functionality I've read the Broad Cast and Listing from the Famo.us documentation. and wrote the following code in my example.
1) created a function to Broadcasting from an event handler with emit method and called it in Constructor of the Strip View.
Strip View:
define(function(require, exports, module) {
var View = require('famous/core/View');
var Surface = require('famous/core/Surface');
var Transform = require('famous/core/Transform');
var StateModifier = require('famous/modifiers/StateModifier');
var ImageSurface = require('famous/surfaces/ImageSurface');
var HeaderFooter = require('famous/views/HeaderFooterLayout');
var FastClick = require('famous/inputs/FastClick');
var check = true;
Boolean(check);
function StripView() {
View.apply(this, arguments);
_createBackground.call(this);
_createIcon.call(this);
_createTitle.call(this);
_setListenersForStripView.call(this);
}
StripView.prototype = Object.create(View.prototype);
StripView.prototype.constructor = StripView;
StripView.DEFAULT_OPTIONS = {
width: 320,
height: 55,
angle: -0.2,
iconSize: 32,
iconUrl: 'img/strip-icons/famous.png',
title: 'Famo.us',
fontSize: 26,
onload: 'StripView()'
};
function allFunctions()
{
_createBackground();
_createIcon();
_createTitle();
}
function _createBackground() {
this.backgroundSurface = new Surface({
size: [this.options.width, this.options.height],
properties: {
backgroundColor: 'black',
boxShadow: '0 0 1px black'
}
});
var rotateModifier = new StateModifier({
transform: Transform.rotateZ(this.options.angle)
});
var skewModifier = new StateModifier({
transform: Transform.skew(0, 0, this.options.angle)
});
this.add(rotateModifier).add(skewModifier).add(this.backgroundSurface);
// this.backgroundSurface.on("touchend", function(){alert("Click caught")})
}
function _createIcon() {
var iconSurface = new ImageSurface({
size: [this.options.iconSize, this.options.iconSize],
content: this.options.iconUrl,
pointerEvents: 'none'
});
var iconModifier = new StateModifier({
transform: Transform.translate(24, 2, 0)
});
this.add(iconModifier).add(iconSurface);
// iconSurface.on("click", function(){alert("Click caught")})
}
function _createTitle() {
this.titleSurface = new Surface({
size: [true, true],
pointerEvents: 'none',
content: this.options.title,
properties: {
color: 'white',
fontFamily: 'AvenirNextCondensed-DemiBold',
fontSize: this.options.fontSize + 'px',
textTransform: 'uppercase',
// pointerEvents : 'none'
}
});
var titleModifier = new StateModifier({
transform: Transform.thenMove(Transform.rotateZ(this.options.angle), [75, -5, 0])
});
this.add(titleModifier).add(this.titleSurface);
}
function _setListenersForStripView() {
this.backgroundSurface.on('touchend', function() {
this._eventOutput.emit('menuToggleforStripView');
alert('clicked on title');
}.bind(this));
}
module.exports = StripView;
});
2) Then created a Trigger Method in App View
App View:
define(function(require, exports, module) {
var View = require('famous/core/View');
var Surface = require('famous/core/Surface');
var Modifier = require('famous/core/Modifier');
var Transform = require('famous/core/Transform');
var StateModifier = require('famous/modifiers/StateModifier');
var Easing = require('famous/transitions/Easing');
var Transitionable = require('famous/transitions/Transitionable');
var GenericSync = require('famous/inputs/GenericSync');
var MouseSync = require('famous/inputs/MouseSync');
var TouchSync = require('famous/inputs/TouchSync');
GenericSync.register({'mouse': MouseSync, 'touch': TouchSync});
var PageView = require('views/PageView');
var StripView = require('views/StripView');
var MenuView = require('views/MenuView');
var StripData = require('data/StripData');
function AppView() {
View.apply(this, arguments);
this.menuToggle = false;
this.pageViewPos = new Transitionable(0);
this.stripViewPos = new Transitionable(0);
_createPageView.call(this);
_StripView.call(this);
_createMenuView.call(this);
_setListeners.call(this);
_handleSwipe.call(this);
_setListenersForStripView.call(this);
}
AppView.prototype = Object.create(View.prototype);
AppView.prototype.constructor = AppView;
AppView.DEFAULT_OPTIONS = {
openPosition: 276,
transition: {
duration: 300,
curve: 'easeOut'
},
posThreshold: 138,
velThreshold: 0.75
};
function _createPageView() {
this.pageView = new PageView();
this.pageModifier = new Modifier({
transform: function() {
return Transform.translate(this.pageViewPos.get(), 0, 0);
}.bind(this)
});
this._add(this.pageModifier).add(this.pageView);
}
function _StripView() {
this.stripView = new StripView();
this.stripModifier = new Modifier({
transform: function() {
return Transform.translate(this.stripViewPos.get(), 0, 0);
}.bind(this)
});
this._add(this.stripModifier).add(this.stripView);
}
function _createMenuView() {
this.menuView = new MenuView({stripData: StripData});
var menuModifier = new StateModifier({
transform: Transform.behind
});
this.add(menuModifier).add(this.menuView);
}
function _setListeners() {
this.pageView.on('menuToggle', this.toggleMenu.bind(this));
}
function _setListenersForStripView() {
this.stripView.on('menuToggleforStripView', this.toggleMenu.bind(this));
}
function _handleSwipe() {
var sync = new GenericSync(
['mouse', 'touch'],
{direction: GenericSync.DIRECTION_X}
);
this.pageView.pipe(sync);
sync.on('update', function(data) {
var currentPosition = this.pageViewPos.get();
if (currentPosition === 0 && data.velocity > 0) {
this.menuView.animateStrips();
}
this.pageViewPos.set(Math.max(0, currentPosition + data.delta));
}.bind(this));
sync.on('end', (function(data) {
var velocity = data.velocity;
var position = this.pageViewPos.get();
if (this.pageViewPos.get() > this.options.posThreshold) {
if (velocity < -this.options.velThreshold) {
this.slideLeft();
} else {
this.slideRight();
}
} else {
if (velocity > this.options.velThreshold) {
this.slideRight();
} else {
this.slideLeft();
}
}
}).bind(this));
}
AppView.prototype.toggleMenu = function() {
if (this.menuToggle) {
this.slideLeft();
} else {
this.slideRight();
this.menuView.animateStrips();
}
};
AppView.prototype.slideLeft = function() {
this.pageViewPos.set(0, this.options.transition, function() {
this.menuToggle = false;
}.bind(this));
};
AppView.prototype.slideRight = function() {
this.pageViewPos.set(this.options.openPosition, this.options.transition, function() {
this.menuToggle = true;
}.bind(this));
};
module.exports = AppView;
});
now what this code does, is create another strip overlapping the previous strips and it only works on the newly created strip view but not on the other strips which means when it comes back to srip view it loads only the DEFAULT_OPTIONS of strip view because the strip which is being generated newly and overlaping is titled famo.us
Please let me know where I am going wrong and how can I open a new view in my application by closing menu drawer.
Do you have a folder named 'data' with the 'StripData.js' file on your famo.us project?
I'm asking because I downloaded the the Starter Kit and I didn't find that file inside.

window opens twice or more on single click in dynamic tableview - appcelerator

So i have a dynamic tableview.
when i click on one of the rows i got a new screen. It works, but on the top left the back button shows the title of the current window, so i have to click min 2 times on, to get back to the tableviews tab. Any idea why?
var win = Titanium.UI.currentWindow;
Titanium.include('strip_tags.js');
var tab = Titanium.UI.currentTab;
var tableView = Titanium.UI.createTableView({top:43,
separatorStyle: 'none',
backgroundColor:'transparent'});
win.add(tableView);
Ti.UI.currentWindow.addEventListener('focus', function() {
loadTweets();
});
function loadTweets()
{
var rowData = [];
var loader = Titanium.Network.createHTTPClient();
loader.open("GET","url", true);
loader.onload = function()
{
var tweets =JSON.parse(this.responseText);
for (var i = 0; i < tweets.length; i++)
{
var id = tweets[i].id;
var title = tweets[i].name; // The tweet message
var special=tweets[i].special;
if(special>0) {
var price=tweets[i].special;
var color2='#4C6B22';
} else {
var color2='#fff';
var price=tweets[i].price;
}
var thumb = tweets[i].thumb; // The profile image
title=title.replace('®', '');
title=title.replace('™', '');
var row = Titanium.UI.createTableViewRow({height:'auto',top:20 , backgroundImage:Ti.Filesystem.resourcesDirectory + '/images/row_bg.png', borderWidth:0, separatorStyle: 'none'});
var post_view = Titanium.UI.createView({
height:'auto',
layout:'vertical',
top:0,
right:5,
bottom:0,
left:5,
borderWidth:0,
height:49
});
var av_thumb = Titanium.UI.createImageView({
url:thumb, // the image for the image view
top:0,
left:0,
height:48,
width:48
});
post_view.add(av_thumb);
var av_title = Titanium.UI.createLabel({
text:title,
left:54,
width:210,
top:-30,
bottom:2,
height:16,
textAlign:'left',
color:'#fff',
font:{fontFamily:'Trebuchet MS',fontSize:14,fontWeight:'bold'}
});
post_view.add(av_title);
var av_desc = Titanium.UI.createLabel({
text:special,
left:270,
top:-20,
color:'#fff',
bottom:2,
height:'auto',
width:236,
textAlign:'left',
font:{fontSize:14}
});
post_view.add(av_desc);
row.add(post_view);
row.className = "item"+i;
row.thisTitle = title;
row.thisId = id;
rowData[i] = row;
}
var winCount = Titanium.UI.createLabel({
text:tweets.length+' blalba',
height:43,
top:0,
left:0,
width:320,
height:50,
textAlign:'center',
color:'#fff',
backgroundImage:Ti.Filesystem.resourcesDirectory + '/images/row_bg.png',
font:{fontFamily:'Trebuchet MS',fontSize:14,fontWeight:'bold'}
});
win.add(winCount);
tableView.setData(rowData);
tableView.addEventListener('click', function(e){
var w2 = Titanium.UI.createWindow({
title:e.rowData.thisTitle,
url:'cikk.js',
barColor:'#000',
backgroundImage:Ti.Filesystem.resourcesDirectory + '/images/winbg.png'
});
w2.stringProp1 = strip_tags(e.rowData.thisId);
tab.open(w2, {
animated:true
});
}
)};
loader.send();
}
my hunch is the that the eventListener focus is getting called twice and that is causing the tweets to get loaded twice which then cause the tableView eventListener to get loaded twice.
if you are going to use focus to add the eventListener, then I would suggest using blur to remove the eventListener.