I am trying to use $ionicActionSheet to execute a function. Moreover, in the example below, I want to call doSomethingElse() when the user clicks on first option to "do something else". I can execute commands within the function buttonClicked() succesfully, but it does not want to call the functions outside.
// within controller
$scope.doSomethingElse = function(textStr) {
window.alert(textStr)
}
$scope.showActions = function(friendName) {
$ionicActionSheet.show({
buttons: [
{ text: 'do something else },
{ text: 'do something' },
],
destructiveText: 'View all',
titleText: '<h4>' + friendName + ' </h4>',
cancelText: 'Cancel',
buttonClicked: function(index, $scope) {
if(index==0) {
// window.alert("Hello"); works fine
$scope.doSomethingElse("Index 0")
}
if(index==1) {
// window.alert("Hello"); works fine too
$scope.doSomethingElse("Index 1")
}
return true;
},
destructiveButtonClicked: function() {
window.alert("Hey All");
return true;
}
});
}
Replace the following:
buttonClicked: function(index, $scope) {
With:
buttonClicked: function(index) {
Or rename the second argument to for example:
buttonClicked: function(index, button) {
Otherwise it will overwrite the $scope variable. The second argument that gets passed to the buttonClicked function is not the $scope, it's the button object.
Related
I have a problem that I have to trigger the User confirm box when the user makes the change on the radio button.
I successfully trigger the Confirm Box but challenging for me to set the old value in the radio group.
Anyone has any idea to do that.
I tried solution mention on google but no luck.
Ext.define('CustomRadioField', {
override: 'RadioField',
setListeners: function(config) {
var me = this;
config.listeners = {
change: {
fn: function(control, newValue, oldValue, eOpts) {
var me = this;
me.fieldChanged();
Ext.Msg.confirm(MyFunction.T('Confirm'), "Are you sure want to delete?", function(btn) {
if (btn == 'no') {
//Added my logic to reset back
control.suspendEvent('change');
control.setValue(oldValue);
control.resumeEvent('change');
//End
//Added to refresh page not to reload but this location.reload post to my server insted to refresh.
location.reload();
}
if (btn == 'yes') {
}
});
}
},
scope: me
},
focus: {
fn: me.storeFocusField,
scope: me
},
afterrender: {
fn: function(f, e) {
me.setFieldFocus;
},
scope: me
},
boxready: {
fn: me.setUpChangeEvent,
scope: me
},
specialkey: {
fn: function(f, e) {
var me = this;
switch (e.getKey()) {
case e.TAB:
break;
}
},
scope: me
}
};
},
});
Thanks in advance
can you attach the code?
You can use field.reset() function to reset field value, where field is radio button field or you can use form.reset() method to reset all fields in form to state before user change.
I have the below code :
variable declaration :
$scope.updateUploadView =
{
ready:{
inview:false,
text: "starting"
},
uploading:{
inview:false,
text: "uploading"
},
done:{
inview:false,
text: "done !"
}
};
$watch :
angular.forEach($scope.updateUploadView, function(element, key) {
$scope.$watch(function () {
return element;
}, function() {
// do stuff
});
},true);
});
The problem here is that i want to ignore $watch to trigger on the undefined property because it cause the view to change 3 times on the start of the application. Is there any possibility to wait the variable declaration ?
http://jsfiddle.net/A8Vgk/2200/
Just check for undefined in your watch function.
$scope.$watch(function () {
return element;
}, function(newValue, oldValue) {
if(!angular.isDefined(newValue) && angular.isDefined(oldValue)) {
// do stuff
}
});
I want to display the records, but when I test it to display the data on console use record.get(''), it not work . even I tap the static code console.log('some thing'). It also cant display on my console.
The code in my controller:
it near the //-------here it is
Ext.define('ylp2p.controller.addtab',{
extend: 'Ext.app.Controller',
config: {
refs: {
myTabPanel: '.makemoney #tabfirst',
},
control: {
myTabPanel: {
activate: 'onActivateTabPanel',
activeitemchange: 'onActiveItemChangeTabPanel'
}
}
},
launch: function(){
var products = Ext.getStore('productstore');
products.filterBy(function(record, id){
return record.get('loanname') === 'xixi22';
});
},
onActivateTabPanel: function(newActiveItem, viewport, oldActiveItem, eOpts) {
//test
console.log('hello the activatetabpanel is fire!');
//end test success
var tabs = Ext.getStore('loanliststore');
tabs.each(function(record) {
console.log('hello come on');//---------------------here it is
newActiveItem.add({
title: record.get('loanname')
});
console.log('');
});
},
onActiveItemChangeTabPanel: function(cmp, value, oldValue, eOpts) {
console.log('hello this is the activechangepanel is fire!');
var products = value.getStore();
products.clearFilter(true);
products.filterBy(function(record, id) {
return record.get('loanname') === value.getTitle();
});
}
});
Check by tabs.getCount() if it is greater then 0 then it should work. If not means there is no data populated in your store.
When i tap delete the action sheet sheet doesnt hide after a successful delete. Is there a way I could call the cancel from the deletePicture function?
$scope.deletePicture = function(post_id, pic_id, index){
PostService.DeletePic(post_id, pic_id, $localStorage.CurrentUser.auth_token)
.success(function (data) {
$scope.pics.splice(index);
hideSheet(); //doesn't Hide the action sheet
}).
error(function(error,status) {
})
}
$scope.update_or_delete = function(post_id,pic_id,index){
$ionicActionSheet.show({
titleText: 'Edit Photo',
buttons: [
{ text: 'Change' },
],
destructiveText: 'Delete',
cancelText: 'Cancel',
cancel: function() {
console.log('CANCELLED');
},
destructiveButtonClicked: function() {
$scope.deletePicture(post_id,pic_id,index);
},
buttonClicked: function(index) {
if(index === 0){ // Camera BUtton
$scope.changePicture();
}
return true;
}
});
};
You must return true from the destructiveButtonClicked callback in order to automatically close the action sheet.
From the Docs :
destructiveButtonClicked : Called when the destructive
button is clicked. Return true to close the action sheet, or false to
keep it opened.
So in your case, it will be :
$ionicActionSheet.show({
titleText: 'Edit Photo',
buttons: [{
text: 'Change'
}, ],
destructiveText: 'Delete',
cancelText: 'Cancel',
cancel: function() {
console.log('CANCELLED');
},
destructiveButtonClicked: function() {
$scope.deletePicture(post_id, pic_id, index);
return true;
},
buttonClicked: function(index) {
if (index === 0) { // Camera BUtton
$scope.changePicture();
}
return true;
}
});
You can check out a demo here
JSFiddle Link:
The bootbox.alert should show up before the bootbox.dialog. I've preloaded all the libraries into the JSFiddle. I want the bootbox.dialog to show up once the bootbox.alert has been clicked on.
Check it out here
Bootbox defined their functions here, and as you can see they include a callback. For example:
bootbox.alert(message, callback)
The callback gives you the option to only run certain code once this line is completed. This solves your problem.
JS
$(document).ready(function () {
$('.begin-game').click(function () {
bootbox.alert("This should show up first", function () {
bootbox.dialog({
message: "Did you pass Go?",
title: "This should go second / last",
buttons: {
// Passed go
success: {
label: "Yes I Passed GO!",
className: "btn-success",
callback: function () {
}
},
// Did not pass go
danger: {
label: "I did not :(",
className: "btn-danger",
callback: function () {
}
},
}
});
});
});
});
The 2nd parameter to bootbox.alert is a function that will be called after the alert is dismissed. Launch the dialog in that function.
$(document).ready(function() {
$('.begin-game').click(function () {
bootbox.alert("This should show up first", showDialog);
function showDialog() {
bootbox.dialog({
message: "Did you pass Go?",
title: "This should go second / last",
buttons: {
// Passed go
success: {
label: "Yes I Passed GO!",
className: "btn-success",
callback: function() {
}
},
// Did not pass go
danger: {
label: "I did not :(",
className: "btn-danger",
callback: function() {
}
}
}
});
}
});
});