I have a two tab layout. When the first tab button is clicked the rows are filled using data retrieved remotely. This is the same for the second tab but the layout of the data is different.
My problem is when you switch between tabs I need to fire a click event on the first row of each tab.
I am building this app for android only.
Any help is greatly appreciated...
EDIT: This is dummy code of the top of head, hope it makes a bit more sense.
leftTableView = Ti.UI.createTableView({
data: populateTableView(0),
allowsSelection:true
});
function populateTableView(byType)
{
for(length of array loop){
var tableViewRow=Ti.UI.createTableViewRow({
my_obj:myObj[i]
});
tabledata=[]
tableViewRow.addEventListener('click',function(e){
e.row.setBackgroundImage('/images/selected-row-background.png');
}
if byType 0
loop array display row for each object element
tableData.push(tableViewRow);
return tabledata
if byType 1
loop array display row for each object element, display differently
tableData.push(tableViewRow);
return tabledata
}
}
tab 1 click event listener
populateTableView(0);
leftTableView.data[0].rows[0].fireEvent('click');//this fires but says e.row.setBackgroundImage is undefined
tab 2 click event listener
populateTableView(1)
leftTableView.data[0].rows[0].fireEvent('click');//this fires but says e.row.setBackgroundImage is undefined
Listen for the blur event on the tabGroup and take action as each one of the tabs become the active tab
http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.TabGroup-event-blur
tabGroup.addEventListener('blur', function(_event) {
var activeTab = _event.tab;
// now that you have the activeTab, get the window, then the
// table and call a method to simulate a click on the first
// row
});
passing data when firing event
var row = leftTableView.data[0].rows[0];
row.fireEvent('click', { row : row } )
Related
In my dashboard, I'm using the datatables plugin to display records from a database.
At the end of every row, there is an edit button that when you click on, a modal pops up where you can update the data of that table row.
So I used document.querySelectorAll('#editBtn') to select all edit buttons so I can loop through them and add a click event listener to each one.
The problem I'm facing is when I go to the second page, new records are displayed and I don't know how I can select the new buttons.
This is my code:
var editBtn = document.querySelectorAll('#editBtn');
editBtn.forEach(btn => {
btn.addEventListener('click', () => {
alert('It works!');
})
})
I'm creating a simple phonebook, that adds person name, last name and phone into a div and into the DOM, with option to delete this div with click event.
I have a class called Phonebook which contain these 2 functions:
//add an event button to all divs inside the DOM
this.deleteBtnEvent = function(){
var _this = this;
//get all the divs that currently on the DOM
var deleteBtn = document.getElementsByClassName('delete');
for (var i = 0; i < deleteBtn.length; i++) {
deleteBtn[i].addEventListener('click', function(e){
_this.removeContact(e.target.parentElement.attributes.index.value);
});
}
};
//remove the div from the array and from the DOM
this.removeContact = function(index){
var contactsHolder = document.getElementById('contacts');
var contact = document.getElementsByClassName('contact');
this._contacts.splice(index, 1);
contactsHolder.removeChild(contact[index]);
//update localstorage
var stringArr = JSON.stringify(this._contacts);
localStorage.setItem('data', stringArr);
console.log('current: ');
console.log(this._contacts);
};
for some reason the addEventListener is firing twice.
first time that the addEventListener is called, the function delete the div from the DOM and the array, the second time the listener is fired, i'm getting an error because the div with the same ID doesn't exist, because its already deleted.
I'm wondering if there's a way to solve this issue.
In addContact(), you call this.deleteBtnEvent(), presumably to bind deletion to the delete button that was just added. In deleteBtnEvent(), however, you're binding an event listener to all delete buttons on the page. This means the following will happen:
Add a contact. A new contact will show up with a delete button that has a listener.
Add a second contact. A new contact will show up with a delete button that has a listener, and a second listener will be added to the first button.
Add a third contact. A new contact will show up with a delete button that has a listener, and a third listener will be added to the first button, and a second listener will be added to the second button.
etc....
So, in deleteBtnEvent(), don't add (duplicate) listeners to all delete buttons. Instead, only add a listener to the delete button that was just created via addContact().
I'm trying to force the open method and select item with select2 like this.
$(".select").select2('open')
$(".select").on('select2-loaded', function (e) {
items = e.items.results;
if (items.length == 1) {
$(this).val(items[0].text);
}
});
$(".select").select2('close');
But I cannot get inside the select2-loaded evaluation and the close is happening also to quick. I want to select the first element by default if there is only one element on the list.
When the 'open' occurs, it automatically performs the mechanism to get and load all the elements in my list. If I comment the close method it will take some milliseconds to display the elements on the list.
But what I want is to refresh my list (this is done by the open) then I want to select only if there one element and the close my list ('select')
How can I achieve this? This behaviour will be trigger by a onchange event of another list. (nested selects)
You should move the close call INSIDE the select2-loaded event, so it'll only close the select element after it selected the item. Otherwise you're opening, setting event for future event, then closing immediately.
$(".select").select2('open')
$(".select").on('select2-loaded', function (e) {
items = e.items.results;
if (items.length == 1) {
$(this).val(items[0].text);
$(".select").select2('close');
}
});
I have a grid view that has rows, and within each rows have an action column that you can click. I want to programmatically click the action column and run whatever event it does. The action column's got a itemID as well. Here's what i got so far,
var yourgrid = Ext.ComponentQuery.query('grid[itemId=yourgridname]')[0];
var record = yourgrid .getSelectionModel().select(0, true);
How do you get click the action column ?
From the docs
Firing your own events is done by calling fireEvent with an event
name.
var actionColumn = Ext.getCmp('#actionColumnId');
actionColumn.fireEvent('click', actionColumn);
I have this datatable an YUI datatable inside a dialog. The datatable has only 2 columns where only one is editable with formatter: "checkbox". I'm wondering is there any way to collect only the changed data or how should I get all the data to submit it with AJAX request.
Here an sample how to listen to the checkbox click event and select the row of the datatable. You should change the code of selecting the row by a ajax query to post your data changed.
myDataTable.subscribe("checkboxClickEvent", function (oArgs) {
var elCheckbox = oArgs.target;
var oRecord = this.getRecord(elCheckbox);
if (elCheckbox.checked) {
myDataTable.selectRow(oRecord);
} else {
myDataTable.unselectRow(oRecord);
};
});
Hope this helps.
In a change event listener for the check box (the click event listener), you could add the obtained records into a (global) array by using something similar to
changedArray.push(oRecord);
And when you want to send it, send changedArray. You could also prevent multiple adds.
if (!changedArray[oRecord.keyElement]) {
changedArray.push(oRecord);
changedArray[oRecord.keyElement] = true;
}