I using Android application using Titanium Appcelerator.. I trying to click and retrieve a row view value from my table . i getting "undefined" ..help me to retrieve my row value..
Here is my code...
var row = Ti.UI.createTableViewRow();
row.title = 'row';
row.postid = '' + post.id;
row.addEventListener('longclick', function(e) {
Titanium.API.info(evt.postid);
});
You mistyped parameter name, instead of:
row.addEventListener('longclick', function(e) {
Titanium.API.info(evt.postid);
});
it should be:
row.addEventListener('longclick', function(e) {
Titanium.API.info(e.postid);
});
Also in case of TableView and rows it's better to create event listener on whole table like this:
var table = Ti.UI.createTableView();
var row = Ti.UI.createTableViewRow();
row.title = 'row';
row.postid = '' + post.id;
table.setData([row]);
table.addEventListener('longclick', function(e) {
Titanium.API.info(e.row.postid);
});
Related
I'm using a responsive datatables on which I'm trying to handle click on a row, so you get redirected to a new page if you click on the row. This works fine, but if the table is collapsed I cannot show the child row, since clicking on the expand icon activates the row click and I get redirected.
So I'm trying to see if I can check whether the icon is clicked or not, but I cannot figure out how to do it
I have tried to use
$("#jobListTable").hasClass('collapsed')
in order to see, if the table is collapsed or not, but I still miss how to check what cell i clicked
Simplyfied fiddle can be found here: http://jsfiddle.net/Anja_Reeft/agouq6ts/5/
But my actually code is
$('#jobListTable tbody').on('click', 'tr', function (e) {
var data = oTable.row( this ).data();
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}
else {
oTable.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
var selectedTaskID = data.taskID;
var selectedJobNumber = data.jobNumber;
var selectedReqno = data.reqno;
var selectedPriority = data.priority;
var selectedCreatedBy = data.createdBy;
var selectedEmployeeInitials = data.employeeInitials;
var selectedShortDescription = data.shortDescription;
var selectedLongDescription = data.longDescription;
var selectedSourceReference = data.sourceReference;
var selectedAktivitetstype = data.aktivitetstype;
var selectedDueDatetime = data.dueDatetime;
var selectedRecurrence = data.recurrence;
var selectedStatus = data.status;
var selectedStatusColor = encodeURIComponent(data.statusColor);
var teamID = "";
if (sessionStorage.getItem("teamID")) {
teamID = "&teamID="+sessionStorage.getItem("teamID");
}
document.location.href="jobinfo.php?taskID="+selectedTaskID+"&jobNumber="+selectedJobNumber+"&reqno="+selectedReqno+"&priority="+selectedPriority+"&createdBy="+selectedCreatedBy+"&employeeInitials="+selectedEmployeeInitials+"&shortDescription="+selectedShortDescription+"&longDescription="+selectedLongDescription+"&sourceReference="+selectedSourceReference+"&aktivitetstype="+selectedAktivitetstype+"&dueDatetime="+selectedDueDatetime+"&recurrence="+selectedRecurrence+"&status="+selectedStatus+"&statusColor="+selectedStatusColor+teamID;
} );
Please let me know if you need futher information.
In cases anyone has a simular problem:
I changed my code so I added a button to each row
"columns": [
{
data: null, // can be null or undefined
defaultContent: '<button type="button" id="jobInfoBtn" class="btn btn-sm"><i class="fa fa-info-circle" aria-hidden="true"></i></button>',
},
and then changed my on click function
$('#jobListTable tbody').on('click', 'tr', function (e) {
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}
else {
oTable.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
} );
$('#jobListTable tbody').on('click', 'button', function (e) {
var data = oTable.row( $(this).parents('tr') ).data();
var selectedTaskID = data.taskID;
var selectedJobNumber = data.jobNumber;
var selectedReqno = data.reqno;
var selectedPriority = data.priority;
var selectedCreatedBy = data.createdBy;
var selectedEmployeeInitials = data.employeeInitials;
var selectedShortDescription = data.shortDescription;
var selectedLongDescription = data.longDescription;
var selectedSourceReference = data.sourceReference;
var selectedAktivitetstype = data.aktivitetstype;
var selectedDueDatetime = data.dueDatetime;
var selectedRecurrence = data.recurrence;
var selectedStatus = data.status;
var selectedStatusColor = encodeURIComponent(data.statusColor);
var teamID = "";
if (sessionStorage.getItem("teamID")) {
teamID = "&teamID="+sessionStorage.getItem("teamID");
}
document.location.href="jobinfo.php?taskID="+selectedTaskID+"&jobNumber="+selectedJobNumber+"&reqno="+selectedReqno+"&priority="+selectedPriority+"&createdBy="+selectedCreatedBy+"&employeeInitials="+selectedEmployeeInitials+"&shortDescription="+selectedShortDescription+"&longDescription="+selectedLongDescription+"&sourceReference="+selectedSourceReference+"&aktivitetstype="+selectedAktivitetstype+"&dueDatetime="+selectedDueDatetime+"&recurrence="+selectedRecurrence+"&status="+selectedStatus+"&statusColor="+selectedStatusColor+teamID;
} );
When ever i try to save special character like ä,ö to my DojoGrid which loads and saves data via xe:restService the character get messedup,
When ever i end the grid directly it save ok, but when ever i work on it in the background and save it, it get messedup.below is the script on my button
var args = {
onComplete: function() {},
onError: function() { alert('Update error'); }
}
var grid = dijit.byId('#{id:grid}');
var selectedIDs =grid.selection.getSelected();
var store = dataGrid.store;
var Index = grid.selection.selectedIndex;
if(Index != null){
var curEntry = dataGrid.getItem(Index);
var nextEntry = dataGrid.getItem(Index-1);
currentViewIndex = store.getValue(curEntry,"ViewIndex");
nextViewIndex = store.getValue(nextEntry,"ViewIndex");
store.setValue(curEntry, 'ViewIndex',nextViewIndex);
store.setValue(nextEntry, 'ViewIndex',currentViewIndex);
grid.update();
restService1.save(args)
XSP.partialRefreshPost("#{id:gridDiv}",{});
}
I'm coding a basic video marquee and one of the key requirements is that the videos need to be able to advance while keeping the player in full screen.
Using Video.js (4.1.0) I have been able to get everything work correctly except that I cannot get the captions to change when switching to another video.
Either inserting a "track" tag when the player HTML is first created or adding a track to the 'options' object when the player is initialized are the only ways I can get the player to display the "CC" button and show captions. However, I cannot re-initialize the player while in full screen so changing the track that way will not work.
I have tried addTextTrack and addTextTracks and both show that the tracks have been added - using something like console.log(videoObject.textTracks()) - but the player never shows them or the "CC" button.
Here is my code, any help is greatly appreciated:
;(function(window,undefined) {
// VIDEOS OBJECT
var videos = [
{"volume":"70","title":"TEST 1","url":"test1.mp4","type":"mp4"},
{"volume":"80","title":"TEST 2","url":"test2.mp4","type":"mp4"},
{"volume":"90","title":"TEST 3","url":"test3.mp4","type":"mp4"}
];
// CONSTANTS
var VIDEO_BOX_ID = "jbunow_marquee_video_box", NAV_TEXT_ID = "jbunow_marquee_nav_text", NAV_ARROWS_ID = "jbunow_marquee_nav_arrows", VIDEO_OBJ_ID = "jbunow_marquee_video", NAV_PREV_ID = "jbunow_nav_prev", NAV_NEXT_ID = "jbunow_nav_next";
// GLOBAL VARIABLS
var videoObject;
var currentTrack = 0;
var videoObjectCreated = false;
var controlBarHideTimeout;
jQuery(document).ready(function(){
// CREATE NAV ARROWS AND LISTENERS, THEN START MARQUEE
var navArrowsHtml = "<div id='" + NAV_PREV_ID + "' title='Play Previous Video'></div>";
navArrowsHtml += "<div id='" + NAV_NEXT_ID + "' title='Play Next Video'></div>";
jQuery('#' + NAV_ARROWS_ID).html(navArrowsHtml);
jQuery('#' + NAV_PREV_ID).on('click',function() { ChangeVideo(GetPrevVideo()); });
jQuery('#' + NAV_NEXT_ID).on('click',function() { ChangeVideo(GetNextVideo()); });
ChangeVideo(currentTrack);
});
var ChangeVideo = function(newIndex) {
var videoBox = jQuery('#' + VIDEO_BOX_ID);
if (!videoObjectCreated) {
// LOAD PLAYER HTML
videoBox.html(GetPlayerHtml());
// INITIALIZE VIDEO-JS
videojs(VIDEO_OBJ_ID, {}, function(){
videoObject = this;
// LISTENERS
videoObject.on("ended", function() { ChangeVideo(GetNextVideo()); });
videoObject.on("loadeddata", function () { videoObject.play(); });
videoObjectCreated = true;
PlayVideo(newIndex);
});
} else { PlayVideo(newIndex); }
}
var PlayVideo = function(newIndex) {
// TRY ADDING MULTIPLE TRACKS
videoObject.addTextTracks([{ kind: 'captions', label: 'English2', language: 'en', srclang: 'en', src: 'track2.vtt' }]);
// TRY ADDING HTML
//jQuery('#' + VIDEO_OBJ_ID + ' video').eq(0).append("<track kind='captions' src='track2.vtt' srclang='en' label='English' default />");
// TRY ADDING SINGLE TRACK THEN SHOWING USING RETURNED ID
//var newTrack = videoObject.addTextTrack('captions', 'English2', 'en', { kind: 'captions', label: 'English2', language: 'en', srclang: 'en', src: 'track2.vtt' });
//videoObject.showTextTrack(newTrack.id_, newTrack.kind_);
videoObject.volume(parseFloat(videos[newIndex]["volume"]) / 100); // SET START VOLUME
videoObject.src({ type: "video/" + videos[newIndex]["type"], src: videos[newIndex]["url"] }); // SET NEW SRC
videoObject.load();
videoObject.ready(function () {
videoObject.play();
clearTimeout(controlBarHideTimeout);
controlBarHideTimeout = setTimeout(function() { videoObject.controlBar.fadeOut(); }, 2000);
jQuery('#' + NAV_TEXT_ID).fadeOut(150, function() {
currentTrack = newIndex;
var navHtml = "";
navHtml += "<h1>Now Playing</h1><h2>" + videos[newIndex]["title"] + "</h2>";
if (videos.length > 1) { navHtml += "<h1>Up Next</h1><h2>" + videos[GetNextVideo()]["title"] + "</h2>"; }
jQuery('#' + NAV_TEXT_ID).html(navHtml).fadeIn(250);
});
});
}
var GetPlayerHtml = function() {
var playerHtml = "";
playerHtml += "<video id='" + VIDEO_OBJ_ID + "' class='video-js vjs-default-skin' controls='controls' preload='auto' width='560' height='315'>";
playerHtml += "<source src='' type='video/mp4' />";
//playerHtml += "<track kind='captions' src='track.vtt' srclang='en' label='English' default='default' />";
playerHtml += "</video>";
return playerHtml;
}
var GetNextVideo = function() {
if (currentTrack >= videos.length - 1) { return 0; }
else { return (currentTrack + 1); }
}
var GetPrevVideo = function() {
if (currentTrack <= 0) { return videos.length - 1; }
else { return (currentTrack - 1); }
}
})(window);
The current VideoJS implementation (4.4.2) loads every kind of text tracks (subtitles, captions, chapters) on initialization time of the player itself, so it grabs correctly only those, which are defined between the <video> tags.
EDIT: I meant it does load them when calling addTextTrack, but the player UI will never update after initialization time, and will always show the initialization time text tracks.
One possible workaround is if you destroy the complete videojs player and re-create it on video source change after you have refreshed the content between the <video> tags. So this way you don't update the source via the videojs player, but via dynamically adding the required DOM elements and initializing a new player on them. Probably this solution will cause some UI flashes, and is quite non-optimal for the problem. Here is a link about destroying the videojs player
Second option is to add the dynamic text track handling to the existing code, which is not as hard as it sounds if one knows where to look (I did it for only chapters, but could be similar for other text tracks as well). The code below works with the latest official build 4.4.2. Note that I'm using jQuery for removing the text track elements, so if anyone applies these changes as is, jQuery needs to be loaded before videojs.
Edit the video.dev.js file as follows:
1: Add a clearTextTracks function to the Player
vjs.Player.prototype.clearTextTracks = function() {
var tracks = this.textTracks_ = this.textTracks_ || [];
for (var i = 0; i != tracks.length; ++i)
$(tracks[i].el()).remove();
tracks.splice(0, tracks.length);
this.trigger("textTracksChanged");
};
2: Add the new 'textTracksChanged' event trigger to the end of the existing addTextTrack method
vjs.Player.prototype.addTextTrack = function(kind, label, language, options) {
...
this.trigger("textTracksChanged");
}
3: Handle the new event in the TextTrackButton constructor function
vjs.TextTrackButton = vjs.MenuButton.extend({
/** #constructor */
init: function(player, options) {
vjs.MenuButton.call(this, player, options);
if (this.items.length <= 1) {
this.hide();
}
player.on('textTracksChanged', vjs.bind(this, this.refresh));
}
});
4: Implement the refresh method on the TextTrackButton
// removes and recreates the texttrack menu
vjs.TextTrackButton.prototype.refresh = function () {
this.removeChild(this.menu);
this.menu = this.createMenu();
this.addChild(this.menu);
if (this.items && this.items.length <= this.kind_ == "chapters" ? 0 : 1) {
this.hide();
} else
this.show();
};
Sorry, but for now I cannot link to a real working example, I hope the snippets above will be enough as a starting point to anyone intrested in this.
You can use this code when you update the source to a new video. Just call the clearTextTracks method, and add the new text tracks with the addTextTrack method, and the menus now should update themselves.
Doing the exact same thing (or rather NOT doing the exact same thing)... really need to figure out how to dynamically change / add a caption track.
This works to get it playing via the underlying HTML5, but it does not show the videojs CC button:
document.getElementById("HtmlFiveMediaPlayer_html5_api").innerHTML = '<track label="English Captions" srclang="en" kind="captions" src="http://localhost/media/captiontest/demo_Brian/demo_h264_1.vtt" type="text/vtt" default />';
Hi I just want to populate the select or comboBox.
I am able to populate both with the searchAttr to any string from JSON. But not so when there are null values.
JSON string :
[{"batch":"0000001000"},{"batch":"0000"},{"batch":""},{"batch":null}]
dojo code:
var selBatch = new ComboBox //located at the left side of the page and it is the second select box in a row
(
{ id:'ID_selBatch',
value:'',
searchAttr:'batch',
placeHolder:'Select...',
style:{width:'150px'},
}, 'node_selBatch'
);
on(selTest, 'change', function(valueCard)
{
var selectedTest = this.get('displayedValue');
var selBatch = registry.byId('ID_selBatch');
console.debug('Connecting to gatherbatches.php ...');
request.post('gatherbatches.php',
{ data:{nameDB:registry.byId('ID_selPCBA').value, nameCard : valueCard},
handleAs: "json"}).then
(
function(response)
{
var memoStore2 = new Memory({data:response});
selBatch.set('store', memoStore2);
selBatch.set('value','');
console.debug('List of batches per Test is completed! Good OK! ');
},
function(error)
{
alert("Batch's Error:"+error);
console.debug('Problem: Listing batches per Test in select Test is BAD!');
}
);
selBatch.startup();
});
Error :
TypeError: _32[this.searchAttr] is null
defer() -> _WidgetBase.js (line 331)
_3() -> dojo.js (line 15)
_f.hitch(this,fcn)(); -> _WidgetBase.js (line 331)
Please advise though it might strange to have null values populate in the select box but these null values are related to data in other columns in database, so the null values included so that I can apply mysql scripts later. Or do you have other better suggestion?
Clement
You can create a QueryFilter as in this jsfiddle to achieve what you want, but it might be simpler to have two data items. Your original model with possibly null batch properties, and the model you pass to the store which is used by the ComboBox.
But anyway, this can work:
function createQueryFilter(originalQuery, filter) {
return function () {
var originalResults = originalQuery.apply(this, arguments);
var results = originalResults.filter(filter);
return QueryResults(results);
};
}
and
var memoStore = new Memory({
data: data
});
memoStore.query = createQueryFilter(memoStore.query, function (item) {
console.log(item);
return !!item.batch;
});
and the dummy data:
function createData1() {
var data = [];
for (var i = 0; i < 10; i++) {
data.push({
name: "" + i,
batch: (0 === i % 2) ? "batch" + i : null
});
}
return data;
}
Screenshot. The odd numbered batch items are null in my example.
i have two panel. when i'm click on the left panel items its calling web service and populating the right panel and same time its updating the number of items in the right panel to the left panel item which is clicked.
for first time its updating the left panel items but when i click on the other left panel item its not updating left panel items again.
its updating only first time.
my code is:
onInboxListTap:function (dataview, index, item, record) {
console.log('Inside onInboxListTap function');
var queuestore = dataview.getStore();
var rec = queuestore.getAt(index);
console.log(rec.data.workSetName);
var store = Ext.getStore('InboxWorkitemStore');
store.clearData(); //Function To clear WorkitemStore
//creating object of InboxQueueServices class
var inboxQueueServiceObject =
Ext.create('InfoImage.common.services.InboxQueueServices', {
config:{
scope:this
}
}, this.onQueueContentRetrievalSuccess, this.onQueueContentRetrievalFailure());
// calling loadQueueContent function to load queue contents
inboxQueueServiceObject.loadQueueContent(rec.data.workSetName);
},
//To call Function onQueueContentRetrievalSuccess after loadQueueContent successful
onQueueContentRetrievalSuccess:function () {
console.log('Inside onQueueContent Retrieval Success function');
var store = Ext.getStore('InboxWorkitemStore');
//Getting componenet queueDetails list
var inboxWorkitemList = Ext.getCmp('inboxWorkitemList');
var queueDetails = Ext.getCmp('queueDetails');
var queueList = Ext.getCmp('queuelist'); //Getting component list
var queueViewPanel = Ext.getCmp('queueViewPanel'); //Getting queueViewPanel
queueDetails.setStore(store);
store.sync();
var queueCount = store.getCount();
if (queueCount > 0) {
var queueItem = store.getAt(0);
var queueStore = queueList.getStore();
queueStore.each(function (record) {
if (record.get('workSetName') == queueItem.get('sourceWorkstep')) {
record.data.queueName = queueItem.get('sourceWorkstep') + '(' +
queueCount + ')';
}
});
queueList.setStore(queueStore);
queueStore.sync();
queueList.getStore().each(function (record) {
console.log('queueList:' + record.data.queueName);
});
console.log('store UPDATED');
}
queueList.refresh();
console.log('store count: ' + store.getCount());
console.log(queueDetails);
// navigates the panel
queueViewPanel.animateActiveItem(
inboxWorkitemList, {
type:'slide',
direction:'up',
duration:250
});
},
Please help me on this isssue.
i have to set record for that i resolve it.
queueStore.each(function (record) {
if (record.get('workSetName') == workitem.get('sourceWorkset')) {
record.data.queueName = workitem.get('sourceWorkset')
+ '(' + queueCount + ')';
// queueStore.updateRecord(record.data.queueName);
record.set(record.data.queueName);
}
});