Titanium Troubles: Exploring Content Problems in Loops and Views


Hello, I am completely new to working with Titanium and currently, in my project, I am iterating through JSON data that defines the titles and content of my app pages. Take a look at this function:

xhr.onload = function() {
    try {
    var myPages = JSON.parse(this.responseText);

    for (var c=0;c<myPages.length;c++){ 
      var title = myPages[c].title; // page title
      var content = myPages[c].content; // page content


I have managed to add my page titles as labels within TableViewRow:

      var row = Ti.UI.createTableViewRow({hasChild:true,height:Ti.UI.SIZE,backgroundColor:bgcolor});

      // Creating a vertical layout view to accommodate all the titles
      var post_view = Ti.UI.createView({
          height: Ti.UI.SIZE,
          layout:'vertical',
          left:5,
          etc..
      });          

      // Label creation for article titles
      var label_title = Ti.UI.createLabel({
          text:title,
          left:5,
          etc...
      });

    // Adding the article titles to the view
    post_view.add(label_title);

    // Adding the vertical layout view to the row
    row.add(post_view);
    row.className = 'item'+c;
    data[c] = row;


Everything seems to be functioning properly as I can see my page titles in each row of the table. However, when a user clicks on a title, I intend for the app to open a new window displaying the content of the corresponding page. This is where I am facing challenges!

To address this issue, I tried implementing the following function:

    // Setting up event listeners for the rows
    row.addEventListener('click', function(){
        Titanium.API.info('row has been clicked');

        // View creation for article content
        var articleView = Titanium.UI.createView({
            height: Ti.UI.SIZE,
            layout:'vertical',
            left:5,
            etc..
        });

        var t = Ti.UI.iPhone.AnimationStyle.FLIP_FROM_LEFT;
        win.animate({view:articleView,transition:t});

        var articleViewContent = Ti.UI.createLabel({
            text:content,
            left:5,
            etc..
        });

        // Adding the content to the view
        articleView.add(articleViewContent);

     });
     }

    // Creating the tableView and incorporating it into the window.
    var tableview = Titanium.UI.createTableView({data:data,minRowHeight:58});
    win.add(tableview);

    }
    catch(E){
        alert(E);
    }
};


Although I am able to receive a response upon clicking the title, I am struggling to display the corresponding content in the new view. I believe the counter should retain this information (from the time the titles were generated) but I am unsure how to access it.

I am feeling quite lost at the moment and worry that I might be misunderstanding some essential concepts here. Considering that I am relatively new to JavaScript, I would appreciate any guidance or suggestions to help me enhance my skills!

(I have included 'etc..' in the code to keep things concise)

Answer №1

Start by including a unique data attribute within the row itself for future reference when a row is clicked. Revise your row definition like so:

var newRow = Ti.UI.createTableViewRow({
    data: data,  // holds the specific data related to the row
    hasChild:true,
    height:Ti.UI.SIZE,
    backgroundColor:bgColor
});

Next, make sure to pass the event object to the callback function in the event listener for the row:

newRow.addEventListener('click', function(event){

    Titanium.API.info('The row was clicked:'+JSON.stringify(event)); // this helps you to view the properties of the event

    ...

    // To access the data attribute of the row, utilize event.row.data
    var rowDataView = Ti.UI.createLabel({
        text:event.row.data,
        left:5,
        // add other properties here
    });
}

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

Error message in Mocha testing: "Function not defined - TypeError: undefined at Test.serverAddress"

Here is a snippet of code from my testing suite: describe('Testing the GET methods', function() { it('Should be able to get the list of articles', function(done) { // SuperTest request request(app).get('/api/articl ...

Using Swift to retrieve a nil value from Firebase

I've been attempting this for the past five days, but unfortunately, I haven't had any success. Take a look at my Firebase snapshot below: Snap (Shows) { Show1 = { image = "show1_logo.png"; title = "Show 1"; }; S ...

I attempt to use the OBJECT3D array

As a beginner with Three.js, I am trying to add my 'model' object to an array. I believe my code is correct. I have declared my variable as nextobj = [ ];. function Loadobj() { var mx = [-1500,1500] , my = [350,350] , mz = [-1000,-1000]; ...

"The use of objects as a React child is not permitted" and code linters

I'm encountering an issue with a simple component and I can't figure out why. The error message and code snippet are as follows: Error: Objects are not valid as a React child (found: object with keys {Cfor, children}). If you meant to render a ...

"Encountered an issue when attempting to generate a Java Json array object using a combination of List

I am working on creating a Json array object with a List and Hashmap, but I encountered a strange issue during program execution. Here is the code snippet: List<HashMap> list = new ArrayList<>(); HashMap<String, String> hmap = new HashM ...

Switching between classes using jQuery

I'm working on implementing a play and pause button for a video, and I'm facing an issue with switching the class when the button is pressed. What I want is that when the pause button is clicked, the class changes to something else, and vice vers ...

AngularJS directive $destroy is a useful tool for managing the

My angular application has been configured with the use of ng-view. Within one specific view, there is a dynamically loaded component alongside the view itself. This component acts as a directive that compiles its contents to allow for further interaction ...

Tips on sending image information from node.js to an HTML5 canvas?

Currently in the process of developing a demo featuring a node.js C++ plugin, I encounter an issue with the conversion of an ARGB bitmap to RGBA format for HTML5 canvas integration. The performance of this conversion process is exceedingly slow, prompting ...

Notify the parent component about the connectivity status of the children

I'm currently developing an application using React and Electron. One of the components I'm working on involves opening three TCP sockets and rendering children once all connections are established. Here's a simplified version of what it loo ...

Exploring the globe using Three.js and WebGL: Visualizing countries and their colors on a sphere

I was able to create a globe similar to this example. However, I am facing an issue when trying to retrieve the countries visible in the scene in Three.js when the globe is stationary. I can successfully retrieve the color code of a specific country when h ...

The reason why React.js does not automatically bind its functions to the "this" object

I cannot understand the purpose of a function not being bound by this object. In my opinion, all functions should be bound by 'this'. So why doesn't Reactjs automatically set bind(this) by default? For instance, in the code below, if I didn& ...

Acquire the hrefs of all child components by implementing a React higher-order component

I am aiming to implement a click handler for all anchor elements that have an href leading to an external domain. This is the structure of my component: import React from 'react'; import LinkWrapper from './LinkWrapper' function Comp ...

Guide on accessing POST data in jQuery

Similar Question: how to retrieve GET and POST variables using JQuery? This is the HTML snippet I am working with: <form action='.' method='post'>{% csrf_token %} <div class="parameters"> Show & ...

Achieving dynamic height adjustments by setting a fixed width for the rectangular box in D3.js

I am currently working with d3.js to create a collapsing tree structure. My goal is to set a fixed width for the rectangle within the tree nodes. If the text content within the rectangle exceeds this fixed width, I would like the height of the rectangle to ...

Encountered a surprising error while writing JSX code in the IDE: "unexpected token <" - what could be

I seem to be encountering an error in my IDE where it's displaying 'Unexpected token <'. The React code snippet below is triggering this error message which states that adjacent JSX elements must be wrapped in an enclosing parent tag. How ...

Using jQuery to retrieve information and calculate total sum

I am currently attempting to calculate the total sum of checked input prices. Here is the code I am using: function totalSum(e) { e.preventDefault(); var unit = $("input:checked").parent("dt").siblings("dd").find("span"); total = 0; $ ...

JavaScript Accordion malfunctioning

I'm attempting to implement an accordion feature for each row of an HTML table using the script provided below HTML <table class="list" id="table" data-bind="visible: !loading()"> @*<table class="productTable" data-bind="sortTable:true" ...

Comparing Phone Applications: Cloud Storage versus Local Storage

My current project involves developing applications using JavaScript along with Adobe PhoneGap for cross-platform integration. I have encountered an architectural dilemma when it comes to storing application data and could use some advice. One of my apps ...

Is the renderer.setSize in Three.js calculated as a percentage of the screen size?

Is it possible to calculate the renderer.setSize based on a percentage of the screen? For instance, could I set my frame to be 80% of the device width and 80% of the device height? ...

Loading spinner in AngularJS for displaying during DOM rendering

I have a page with 8 tabs, each containing a lot of HTML controllers (data bindings), resulting in slow data rendering. To address this issue, I implemented an ng-if condition based on the active tab determined by ng-click. The active tab is visually indi ...