Updating elements in a table view using Titanium

Hey there! I'm currently working on an Android application using Titanium. I've encountered a problem with changing images upon click using the code below. The issue is that the image only changes once, upon the first click. Subsequent clicks do not reflect the changed image visually, although the alert does indicate that the image source has been modified. Additionally, when clicking on the image (triggering the change), navigating to a child window, and then returning, the changes are not retained.


var feed_table = Ti.UI.createTableView({minRowHeight:5,hasChild:true});
var data = [];
for (var i=0;i<5;i++)
{
var row = Ti.UI.createTableViewRow({height:'auto',className:"row"});
var username = Ti.UI.createLabel(
{
    text:'nilkash',
    height:'auto',
    font:{fontSize:12, fontFamily:'Helvetica Neue'},
    width:'auto',
    color:'#000',
    textAlign:'left',
    top:0,
    left:35,
});row.add(username);
var doneCheckbox = Titanium.UI.createImageView(
{
    id:'image_'+i,
    clickName:'ClickName',
    image:'../images/finished-work.png',
    width:15,
    height:15,
    top:32,
    left:0,
});row.add(doneCheckbox)
data.push(row);
}
feed_table.setData(data);
feedWin.add(feed_table);
feed_table.addEventListener('click',function(e)
{   
    if (e.source.clickName == 'ClickName' )
    {
        if(feed_table.data[0].rows[e.index].children[1].image == '../images/work.png')
        {
            feed_table.data[0].rows[e.index].children[1].image = '../images/finished-work.png';
        }
        else if (e.source.clickName == 'ClickName' )
        { 
            feed_table.data[0].rows[e.index].children[1].image = '../images/work.png';
        }
    }
});

I also tried a simpler solution by toggling between two images, but even with this method, the changes are not retained. Do I need to reapply these changes to the table view each time? Thank you in advance for any assistance provided.

Answer №1

I encountered a similar issue and resolved it by replacing the old image with a new one whenever a click event occurred. While this method was somewhat tedious, I couldn't find an alternative solution. The Android component of Titanium can be buggy at times.

[update] I made some adjustments to the existing code:

/* Function to create imageView with specific URL */
createImage = function(url)
{
  var imageView = Ti.UI.createImageView(
  {
    image:url,
    left:0,
    top:0,
    height:25,
    width:25
  });

  return imageView;
};

/* Function to add row to tableView with imageView */
addRow = function(_args)
{
  var row = Ti.UI.createTableViewRow(
  {
    height:'auto',
    className:"row"
  });

  var username = Ti.UI.createLabel(
  {
    text: _args.text || 'user name',
    height:'auto',
    font:{fontSize:12, fontFamily:'Helvetica Neue', color:'#000'},
    width:'auto',
    color:'#000',
    textAlign:'left',
    top:0,
    left:35,
  });
  row.add(username);

  /* Create initial imageView */
  var imageView = createImage(_args.image);
  row.add(imageView);    

  /* Custom function to set image */
  row.setImage = function(image_url)
  {
    /* Remove the old image */
    row.remove(imageView);    
    imageView = null; 

    /* Add new image */
    imageView = createImage(image_url);
    row.add(imageView);   
  };

  row.addEventListener('click',function(e)
  {
    /* Replace the image on click */
    row.setImage('new/image/path');
  };

  return row;
}

var user_table = Ti.UI.createTableView({minRowHeight:5.length,hasChild:true});
var data = [];
for (var i=0;i<5.length;i++)
{
  var newRow = addRow({
    text: 'my text',
    image: 'my image url'
  });
  data.push(newRow);
}

feed_table.setData(data);
feedWin.add(feed_table); 

Answer №2

My go-to choice is to utilize a createView paired with a background image, and it functions perfectly. I specifically apply this technique to mimic checkboxes, and so far, I haven't encountered any issues.

Answer №3

If you want your TableView and TableViewRow to properly function, make sure to eliminate the Ti.UI.SIZE for both height and width.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steer clear of using multiple returns in a loop in JavaScript by utilizing async/await to eliminate the callback pyramid or callback hell

My code consists of multiple return blocks, such as the SignUp() function. connectors.js const connectors = { Auth: { signUp(args) { return new Promise((resolve, reject) => { // Validate the data if (! ...

Where should we place the JavaScript reference in our CSHTML file in an MVC framework?

At the beginning of our .cshtml page in our current web application, we have included the following: @using Carwale.UI.PresentationLogic; @model Carwale.Entity.ViewModels.HomeModel @{ ViewBag.CustomJS = "~/Views/StaticPartials/HomeScripts.cshtml"; ...

Error encountered while using Jest, React, Typescript, and React-Testing-Library

I have set up a project using React/NextJS with Typescript and now I am incorporating unit testing with Jest and React Testing Library. One of the unit tests for my component is as follows: import React from 'react'; import '@testing-libra ...

The issue with setting width using % in React Native is causing trouble

While working on my project using expo react native, I encountered an issue with a horizontal scrollview for images. When I style the images using pixels like this: <Image code... style={{width: 350}}/>, everything works fine. However, if I try to ch ...

Is there a way to adjust a 5-minute countdown interval timer by 1 minute in a react JS application?

I am in need of creating a 5-minute interval timer using react JS, with a 1-minute offset. The current timer I have functions like this: 1:00 => 1:05 => 1:10 => 1:15 => 1:20. However, I require it to be adjusted to display: 1:01 => 1:0 ...

Avoiding unnecessary DOM updates in VueJS

Implementing an animated carousel has been my latest project, and I've been using code similar to the following: <template> <div v-for="(slides, id)" v-if="id > middle_id - 2 || id < middle_id + 2"> <div :class ...

JavaScript: the battle between anonymous and direct function invocation

Here is an interesting observation: when I assign an anonymous function to the onreadystatechange variable, everything works fine. However, if I try to assign a named function to this variable, it does not work as expected. <script language="Javascrip ...

Immersive pop-up interface displaying a variety of embedded videos simultaneously

I am a beginner in JavaScript and I came across a CodePen that does exactly what I need, but it currently only works for one embedded video. What I aim to achieve is similar functionality, but with 6 videos. (function ($) { 'use strict'; ...

Access the Google Picker API using pre-saved login credentials

Recently, I successfully integrated the Google Picker API into my project. This feature prompts a window for Google authentication and then displays all the files stored in Google Drive. However, I now have a specific requirement where I want to access th ...

Auto-fill input field with URL parameter values using JavaScript or jQuery

I am in possession of a URL http://www.example.com/state=survey&action=display&survey=39&zone=surveys&currency=Denmark Upon accessing the above link, a user will be directed to a new page containing a form. Within this form, there is an i ...

removing the http:// or https:// from a JavaScript string

I am dealing with the following collection of strings http://example.com https://example.com http://www.example.com Is there a way to remove the http:// or https:// prefixes from these URLs? ...

Step-by-step guide on integrating a JSON array fetched via Ajax from a Django/Python view with DataTable

Being a new developer, I am embarking on my first professional project using Django. My main challenge lies in loading data that I have extracted from the models.py into a DataTable within my view.py file. Below is the snippet of my code. Brief Overview ...

Combining the power of Angular with a Vanilla JS web application

Seeking your expertise. Situation We are transitioning from a legacy Vanilla JS webapp to Angular. Our plan is to gradually replace isolated components while adding new functionality as separate Angular apps, all within a timeframe of 6-12 months. Challe ...

Obtaining the global coordinates of an object in Three.js

I need to adjust the position of an object that is already placed in a new location, but currently it is moving from the local position instead of global. this._scene.updateMatrixWorld(); this._scene.add(mesh); var v1 = new THREE.Vector3(); v1.setFr ...

Difficulty arises when applying hover effects to animations using callbacks

Currently facing an issue with the hover event in jQuery. There are two side-by-side containers with hover events on both. When hovering, a div containing additional information slides up into view and slides back down when the hover ends. The concept is ...

Issue encountered when attempting to remove items from Redux store with onClick event

My goal is to delete a specific object from an array in my store. I have a delete item function that successfully removes objects, but I am struggling to make it work with a button that is rendered with each object using map. Here is my component: import ...

Encountering a [$injector:modulerr] error while attempting to include modules in ZURB Foundation for Apps

I am currently working on a project that involves specific authentication which is functioning well in Ionic. My task now is to incorporate the same authentication system into the admin panel exclusively for web devices. I have already completed the instal ...

Customize chrome's default shortcuts with JavaScript

I'm working on an application that requires me to override some shortcut keys in the Chrome browser. While I'm able to create custom shortcuts to trigger alerts like in this Stackblitz example, I'm having trouble overriding a few default sho ...

Implementing Promises in AngularJS Controller: A Comprehensive Guide

I'm currently working on implementing a basic function using promises in one of my controllers to make sure it works correctly before adding more complex functionality. I keep running into a "TypeError: undefined is not a function" error when trying t ...

Transforming dynamic table text into an image: Step-by-step guide

I have a live scoreboard on my website that pulls information from another site, making the content dynamic. I want to enhance the display by replacing certain elements in the table with images, such as displaying logos instead of club names. However, my k ...