I'm developping a mobile app using titanium appcelerator. I want to delete a row on a tableview when i click on an alertDialog. here is my code :
dataArray = [];
//Insert the JSON data to the table view
for( var i=0; i<json.length; i++){
var row = Ti.UI.createTableViewRow({
title: json[i].nom,
hasChild : true,
obj: json[i].titrePro,
obj1: json[i].adresse
});
row.addEventListener('click',function(e){
//$.tableView.deleteRow(e.row);
var alertDialog = Titanium.UI.createAlertDialog({
title: 'A propos '+e.row.title,
message: '\nTitre Pro : '+e.row.obj+'\n\nAdresse : '+e.row.obj1+'\n', buttonNames: ['Rejeter','Accepter'], cancel: 1 });
alertDialog.addEventListener('click', function(ev){
if(ev.cancel===true) {
Titanium.API.info( "Accept button was clicked !");
$.tableView.deleteRow(e.row);
}
});
alertDialog.show();
});
dataArray.push(row);
};
$.tableView.setData(dataArray);
The error was on the:
$.tableView.deleteRow(e.row);
When running my app, the Titanium.API.info( "Accept button was clicked !"); was displayed correctly, but the deleteRow does not work!
Try this,Just replace if(ev.cancel===true) with if(ev.index== 1)
alertDialog.addEventListener('click', function(ev){
if(ev.index== 1) {
Titanium.API.info( "Accept button was clicked !");
$.tableView.deleteRow(e.row);
}
});
Related
I am using element ui el-image. And I want to preview my image when clicked with (:preview-src-list). But When I click first time it doesnt preview anything. just add's my downloaded image. So I need to click 2 times. But I want to click 1 time.
Here is my template code:
<el-image :src="src"
:preview-src-list="srcList"
#click="imgClick"></el-image>
ts code:
src = null;
srcList = [];
product = 'shoe1';
imgClick() {
prevImg(product).then(resp => {
const url = window.URL.createObjectURL(new Blob([resp.data]));
this.srclist = [url];
});
}
#Watch("product")
changed(value) {
getProductImage(value).then(resp => {
const url = window.URL.createObjectURL(new Blob([resp.data]));
this.src = url;
}).catc(e => {
alert(e);
});
}
mounted() {
this.changed(product);
}
I think these things happen because when you click on that image it will trigger clickHandler:
...
clickHandler() {
// don't show viewer when preview is false
if (!this.preview) {
return;
}
...
}
...
From source
And the preview is the computed property:
...
preview() {
const { previewSrcList } = this;
return Array.isArray(previewSrcList) && previewSrcList.length > 0;
}
...
From source
So nothing happened in the first click but after that you set preview-src-list and click it again then it works.
If you code is synchronous you can use event like mousedown which will trigger before click event.
<el-image
:src="url"
:preview-src-list="srcList"
#mousedown="loadImages">
</el-image>
Example
But if you code is asynchronous you can use refs and call clickHandler after that.
...
// fetch something
this.$nextTick(() => {
this.$refs.elImage.clickHandler()
})
...
Example
I want to remove selected file of kendo upload control on click event of another button and I followed the below link
Triggering OnCancel event of kendo upload on click of button the remove event fired but not clear the file below is my code. please can any one help me what i am doing wrong.
$(document).ready(function () {
$("#files").kendoUpload({
"multiple": false,
select: function (event) {
console.log(event);
var notAllowed = false;
$.each(event.files, function (index, value) {
if ((value.extension).toLowerCase() !== '.jpg') {
alert("not allowed! only jpg files!");
notAllowed = true;
}
else if (value.size > 3000000) {
alert("file size must less than 3MB ");
notAllowed = true;
}
if (event.files.length > 1) {
alert("Please select single file.");
e.preventDefault();
}
});
var breakPoint = 0;
if (notAllowed == true) event.preventDefault();
var fileReader = new FileReader();
fileReader.onload = function (event) {
var mapImage = event.target.result;
$("#sigimage").attr('src', mapImage);
document.getElementById("sigimage").style.display = 'block';
}
fileReader.readAsDataURL(event.files[0].rawFile);
},
remove: function (e) {
alert("remove");
e.preventDefault();
},
});
$("#closewindow").click(function (e) {
$("#files").data("kendoUpload").trigger("remove");
});
});
You can use the following code for removing the file inside your click function.
$(".k-delete").parent().click();
Please visit the fiddle here for a working example
You can create your custom function like this:
function remove(){
$(".k-upload-files").remove();
$(".k-upload-status").remove();
$(".k-upload.k-header").addClass("k-upload-empty");
$(".k-upload-button").removeClass("k-state-focused");
};
It will delete trigger delete of uploaded files.
Recently I started working on a multi-platform application using Titanium Alloy.
One of the things I'd like to achieve is having a menu button in the actionbar (infront of the appicon).
When pressed, it toggles the drawermenu.
After a little investigation I failed to find a widget / module that could offer me both. So I decided to use a combination of com.alcoapps.actionbarextras and com.mcongrove.slideMenu.
Both a custom actionbar and a drawer option seem to functionate as they appear they should.
The problem is however, that it does show the 'menu' image, it is clickable, but I have no idea how to attach an event to it.
I've tried several ways, like binding the event to the entire actionbar of what so ever.. But I can't seem to find the appropriate binding to accomplish this.
index.js
var abextras = require('com.alcoapps.actionbarextras');
$.MainWindow.on('open', function(evt) {
// set extras once the Activity is available
abextras.title = "Test Window";
abextras.homeAsUpIcon = "/images/menu.png";
//abextras.titleColor = "#840505";
//abextras.subtitle = "for some extra action";
//abextras.subtitleFont = "Chunkfive.otf";
//abextras.subtitleColor = "#562A2A";
//abextras.backgroundColor = "#F49127";
var activity = evt.source.activity;
if (activity) {
activity.onCreateOptionsMenu = function(e) {
e.menu.clear();
activity.actionBar.displayHomeAsUp = true;
//abextras.setHomeAsUpIcon("/images/menu.png");
//activity.actionBar.addEventListener("click", function(ev) {
// console.log("HI");
//});
};
}
/*
// now set the menus
evt.source.activity.onCreateOptionsMenu = function(e) {
// aboutBtn and creditsBtn will be displayed in the menu overflow
aboutBtn = e.menu.add({
title : "About",
showAsAction : Ti.Android.SHOW_AS_ACTION_NEVER
});
aboutBtn.addEventListener("click", function(e) {
console.log('Clicked on About');
});
creditsBtn = e.menu.add({
title : "Credits",
showAsAction : Ti.Android.SHOW_AS_ACTION_NEVER
});
creditsBtn.addEventListener("click", function(e) {
console.log('Clicked on Credits');
});
// create the Share intent and add it to the ActionBar
var intent = Ti.Android.createIntent({
action : Ti.Android.ACTION_SEND,
type : 'text/plain'
});
intent.putExtra(Ti.Android.EXTRA_TEXT, 'Hello world!');
abextras.addShareAction({
menu : e.menu,
//intent : intent
});
};
*/
});
function doClick(e) {
alert($.label.text);
}
// Create our node items
var nodes = [{
menuHeader : "My Tabs",
id : 0,
title : "Home",
image : "/images/home.png"
}, {
id : 1,
title : "Contact",
image : "/images/phone.png"
}, {
id : 2,
title : "Settings",
image : "/images/gear.png"
}];
// Initialize the slide menu
$.SlideMenu.init({
nodes : nodes,
color : {
headingBackground : "#000",
headingText : "#FFF"
}
});
// Set the first node as active
$.SlideMenu.setIndex(0);
// Add an event listener on the nodes
$.SlideMenu.Nodes.addEventListener("click", handleMenuClick);
// Handle the click event on a node
function handleMenuClick(_event) {
if ( typeof _event.row.id !== "undefined") {
// Open the corresponding controller
openScreen(_event.row.id);
}
}
function openMenu() {
$.AppWrapper.animate({
left : "300dp",
duration : 250,
curve : Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
});
$.SlideMenu.Wrapper.animate({
left : "0dp",
duration : 250,
curve : Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
});
toggleMenu();
}
function closeMenu() {
$.AppWrapper.animate({
left : "0dp",
duration : 250,
curve : Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
});
$.SlideMenu.Wrapper.animate({
left : "-300dp",
duration : 250,
curve : Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
});
toggleMenu();
}
function toggleMenu() {
//
console.log($.AppWrapper.left);
}
$.AppWrapper.addEventListener("swipe", function(_event) {
if (_event.direction == "right") {
openMenu();
} else if (_event.direction == "left") {
closeMenu();
}
});
$.MainWindow.open();
//$.index.open();
index.xml
<Alloy>
<Window class="container" id="MainWindow">
<Require type="widget" src="com.mcongrove.slideMenu" id="SlideMenu" />
<View id="AppWrapper">
<Label text="Profile View" />
</View>
</Window>
</Alloy>
I hope people with more knowledge about Titanium and/or these modules could guide me.
Kind Regards, larssy1
After contacting the creator of the widget, the outcome is as the following:
var activity = evt.source.activity;
if (activity){
activity.actionBar.onHomeIconItemSelected = function() {
// your callback here
alert('I was clicked');
}
}
I am migrating a current project to 3.1.3 . I need a close button on the modal window so i had to use a NavigationWindow as suggested in the IOS7 migration guide. Here is what i have
btnSubscription.addEventListener('click', function(e) {
Ti.API.info('Subscription Button Clicked.');
openWindow("paymentsubscription.js", "Subscription");
});
function openWindow(url, title) {
var win = Ti.UI.createWindow({
url : url,
backgroundColor : 'white',
modal : true,
title : title
});
if (Titanium.Platform.osname !== "android") {
var winNav = Ti.UI.iOS.createNavigationWindow({
modal: true,
window: win
});
}
if (Titanium.Platform.osname !== "android") {
winNav.open();
}
else {
win.open();
}
}
Now on paymenttransaction.js i was previously doing this when i was using titanium 2.x
var mainWindow = Ti.UI.currentWindow;
var mainWinClose = Ti.UI.createButton({
style : Ti.UI.iPhone.SystemButtonStyle.DONE,
title : 'close'
});
if (Titanium.Platform.osname !== "android") {
mainWinClose.addEventListener('click', function() {"use strict";
mainWindow.close();
});
responseWindow.setRightNavButton(responseWinRightNavButton);
mainWindow.setRightNavButton(mainWinClose);
}
The problem i am facing is that i need to close winNav in the case of IOS and not win anymore. In paymenttransaction.js i was previously using
var mainWindow = Ti.UI.currentWindow;
But now i need to close the navigation window(winNav) and this does not hold good anymore. Is there anyway to do this? . Is there a Ti.UI.currentWindow equivalent for NavigationWindow ?
You aren't using the navigationWindow properly. You shouldn't be calling open() on a window when you use one.
You are looking for:
`winNav.openWindow(yourWindow)
Also when you are creating a new window, pass a pointer to your navigationWindow in the constructor, then you can close the window properly. Don't create a window like that use CommonJS's require() to return your window:
paymenttransaction.js:
function paymentTransactionWindow(navGroup, otherArgs) {
var mainWinClose = Ti.UI.createButton({
style : Ti.UI.iPhone.SystemButtonStyle.DONE,
title : 'close'
});
var win = Ti.UI.createWindow({
url : url,
backgroundColor : 'white',
modal : true,
title : title,
rightNavButton: mainWinClose
});
if (Titanium.Platform.osname !== "android") {
mainWinClose.addEventListener('click', function() {
navGroup.closeWindow(win);
});
return win;
}
module.exports = paymentTransactionWindow;
Then in your previousWindow:
PaymentTransactionWindow = require('/paymentTransactionWindow); //the filename minus .js
var paymentTransactionWindow = new PaymentTransactionWindow(winNav, null);
mainNav.openWindow(paymentTransactionWindow);
watch some of the videos on commonJS: http://www.appcelerator.com/blog/2011/08/forging-titanium-episode-1-commonjs-modules/
I trying to create button in extJs 4 .But due to adding property href and hrefTarget its changing its shape.What should I have to do give link to my Button without making my button as anchor tag ? Actualy I want to open new tab on button click..
var startButton = Ext.create('Ext.Button', {
text:'Start',
id: 'startButton',
href : 'http://www.google.com',
hrefTarget: '_blank',
baseCls:'deviceAuthenticationButtonCls button-link',
handler : function() {
console.log(Ext.getCmp('startButton'));
console.log("Form ",form.getForm().getValues());
form.getForm().setValues([
{id:'First', value: "0006660767C7"},
{id:'Second', value: "00066607644D"}
]);
var data = form.getForm().getValues();
console.log("Data To Send :- ",data);
form.getForm().submit({
url: './mmaGlove/',
method:'POST',
params : {
deviceAuthenticationData: JSON.stringify(data)
},
success: function(){
window.location = "http://www.google.com";
},
failure : function(){
alert('Got Error..');
}
});
}
});
Maybe you can redirect in the function handler:
function() { window.location = "http://www.sencha.com" }
... for instance. In this case you don't set the href propety so the button doesn't become an <a></a> label.