I am trying to figure out how to make the following $ngConfirm box update after a function is completed.
After submit is clicked, the following appears (the cog is spinning):
$scope.inProgress = function(){
$ngConfirm({
theme: 'modern',
icon: "fa fa-cog fa-spin fa-.5x fa-fw",
title: 'File is downloading Please wait.',
content: "",
buttons: {
}
});
};
After this box is displayed, the function doSomething() gets called. Once that function returns, I would like to update the display to the following (the cog stops):
$scope.Complete = function(){
$ngConfirm({
theme: 'modern',
icon: "fa fa-cog fa-.5x fa-fw",
title: 'Spreadsheet Generated!',
content: "File size is {$scope.fileSize}, Do you want to save it?",
buttons: {
'Yes, save my file': {
downloadStuff();
$ngConfirm('Spreadsheet saved to "Downloads" folder.');
},
'No, take me back': {
action: function(){
$ngConfirm('Download has been cancelled.');
}
}
}
});
};
And this is the way I currently have it set up in the submit() function inside my controller:
$scope.submit = function() {
$scope.inProgress();
$scope.doSomething();
$scope.Complete();
};
Using the above code, my application displays both elements layered over eachother. I am stuck trying to figure out how to make $scope.inProgress() update with the details inside $scope.Complete() once $scope.doSomething() returns.
Could someone offer me some advice on what changes I need to make? I've tried to tinker with $scope.inProgress at the end of the submit function, but I always end up displaying a new confirm box or not actually changing something.
My current idea is something along the lines of
$scope.ConfirmationControl = function() {
$scope.inProgress(){
storageService.doSomethingCool().then(
$scope.inProgress() = //updated elements
)
}
}
Does that make sense? Am I close or thinking about this totally wrong?
Thank you in advance for your help! :)
Angular Confirm
There is an example of how to change content on the site. https://craftpip.github.io/angular-confirm/#quickfeatures. Under the Features header you can click on the button labeled "Dialogs" to see an example. Basically you will need to put everything in the content: option with some scope variables. When doSomething() is done, set a $scope variable ($scope.somethingWasDone in this case) and in your dialog have the ng-if. Below is an untested example.
$scope.inProgress = function(){
$scope.title = 'File is downloading. Please wait.';
$ngConfirm({
scope: $scope,
icon: "fa fa-cog fa-spin fa-.5x fa-fw",
content: '<h2>{{title}}</h2>' +
'<div ng-if="somethingWasDone">' +
'<div>File size is 250kb, do you want to save it?</div>' +
'<button ng-click="downloadStuff()">Yes</button>' +
'<button ng-click="cancel()">No</button>' +
'</div>'
});
};
// when your doSomething function is done
$scope.doSomething().then(function(result) {
$scope.title = 'Spreadsheet Generated!';
$scope.somethingWasDone = true;
});
Related
I have an application that has two buttons , Add button and Schedule button ,
When i click on the add button the notification will be triggered then the notification tab will appeared .
Here is the code
Js code
app.controller('contNoti', function ($scope, $cordovaLocalNotification)
{
$scope.add = function () {
var alarmTime = new Date();
alarmTime.setMinutes(alarmTime.getMinutes() + 1);
$cordovaLocalNotification.add({
id: "1234",
date: alarmTime,
message: "This is a message",
title: "This is a title",
autoCancel: true,
sound: null
}).then(function () {
console.log("The notification has been set");
});
};
$scope.isScheduled = function () {
$cordovaLocalNotification.isScheduled("1234").then(function (isScheduled) {
alert("Notification 1234 Scheduled: " + isScheduled);
});
};
});
<ion-content ng-controller="contNoti">
<button class="button" ng-click="add()">Add notification</button>
<button class="button" ng-click="isScheduled()">Is Scheduled</button>
</ion-content>
Ok, what I need is to make the same application with the same functionality but without the buttons. I want it to be executed automatically without clicking on the buttons. Thanks
I'm not sure I understand your question, but you want to run $scope.add() no matter what, is that correct?
If so, just add $scope.add(); after the $scope.isScheduled = function () {...}; block.
I hope that's the answer you're looking for, otherwise, please provide more details.
You could trigger your methods with the events from $ionicView:
Inside your controller:
$scope.$on('$ionicView.enter', function(data) {
$scope.add();
$scope.isScheduled();
})
They will be executed once the User enter to the view.
Note: Those functions could be private(not attached to the $scope). Because they wont be used in the View.
Just adding the bootstrap-confirmation extension for Bootstrap popover to some buttons on a project. I'm having issues with the options not being respected. I'm trying to get the popups to work as singletons and dismiss when the user clicks outside of them singleton and data-popout options, respectively - both set to true. I'm also not seeing any of my defined callback behavior happening.
I defined the options both in the HTML tags and in a function and neither works. Still getting multiple boxes and they don't dismiss as expected.
My JS is loaded after all other libraries and is in my custom.js file in my footer.
JS is as follows:
$(function() {
$('body').confirmation({
selector: '[data-toggle="confirmation"]',
singleton: true,
popout: true
});
$('.confirmation-callback').confirmation({
onConfirm: function() { alert('confirm') },
onCancel: function() { alert('cancel') }
});
});
An example of the box implemented on a button in my HTML is the following:
<a class="btn btn-danger" data-toggle="confirmation" data-singleton="true" data-popout="true"><em class="fa fa-trash"></em></a>
Any pointers would be appreciated. I even changed the default options in the bootstrap-confirmation.js file itself to what I want and still no luck.
Turns out I needed to rearrange a couple things to get this to work. I've left in the last_clicked_id etc stuff as I needed to add that to get the id value of what I'd just clicked.
// Product removal popup logic
var last_clicked_id = null;
var last_clicked_product = null;
$('.btn.btn-danger.btn-confirm').click(function () {
last_clicked_id = $(this).data("id");
last_clicked_product = $(this).data("product");
});
$('.btn.btn-danger.btn-confirm').confirmation({
singleton: true,
popout: true,
onConfirm: function () {
alert("DEBUG: Delete confirmed for id : " + last_clicked_product);
// TODO: Add AJAX to wipe entry and refresh page
},
onCancel: function () {
alert("DEBUG: Delete canceled for id : " + last_clicked_product);
}
});
I was a step ahead of myself with the callback logic which was not getting executed. Fixed by simply adding it to onConfirm: and onCancel: key values in the .confirmation() function. A bit of a RTFM moment there but this was unfortunately not very clear in the documentation.
here is the code, I have a menu global variable inside the function. I want to use it outside it, but then I get an "undefined reference error...·
This is the only javascript code I have, so there's no interference with another variables or functions.
Thanks in advance.
$(function() {
menu = $('nav#menu').mmenu(
{
navbars: [
{
position: "top",
height : 1,
content : [
'',
'<img src="imagenes/wheel32.png" /><p class="navbartxt">bicimap.uy</p>',
]
},
{
position: "bottom",
content: [
'<a class="fa fa-envelope"></a>',
'<a class="fa fa-twitter"></a>',
'<a class="fa fa-facebook"></a>'
]
}
],
extensions: ["multiline"],
onClick: {
close: false
},
navbar:{
title: "Inicio"
},
offCanvas: {
zposition : "next"
}
});
});
I need to put this inside the function to get it working
var API = $("#menu").data( "mmenu" );
menu.on( 'click', 'a[class^="fa fa-twitter"]', function() {
$('#twitter').show();
var API = $("#menu").data( "mmenu" );
API.close();
return false;
});
I'm lacking some context here (I'm assuming there's more we don't see?)
But you may be executing the latter snippet, menu.on( 'click'… before the code inside $(…) has run (on dom ready); so menu would be undefined.
If you're just getting started, it's worth looking into your browser's developer tools and learning about break points and logging.
You'll need to make sure that you use menu only after it's been set, likely by delaying all your invocation to be on ready.
Execution Order
The $ is called and the function is provided as the first and only argument. The function itself is not called.
API is defined by the result of $("#menu") This may or may not be found yet depending upon where in the html file you've added this script.
The data method is invoked on the result of that
You try to call on on menu, which is still undefined
sometime later, the function you passed to $ is called, and menu ends up being defined, to late to be useful
If your closure/anonymous function is happening asynchonously, its possible that the work has not been done by the time the rest of your code is computed. I would need more context to determine that.
This is the solution I found, maybe it's not the best because it could bring problems. For some reason the ready function doesn't work as is shown above, maybe some assets are being expected.
menu = null;
$(function() {
menu = $('nav#menu').mmenu(
{
navbars : [{
position: "top",
height : 1,
content : [
'<img src="imagenes/wheel32.png" /><p class="navbartxt">bicimap.uy</p>',
]
},
{
position: "bottom",
content: [
'<a class="fa fa-envelope"></a>',
'<a class="fa fa-twitter"></a>',
'<a class="fa fa-facebook"></a>'
]
}
],
extensions: ["multiline"],
onClick: {
close: false
},
navbar:{
title: "Inicio"
},
offCanvas: {
zposition : "next"
}
});
});
$( window ).load(function() {
var API = $("#menu").data( "mmenu" );
menu.on( 'click', 'a[class^="fa fa-twitter"]', function() {
$('#twitter').show();
var API = $("#menu").data( "mmenu" );
API.close();
return false;
}
);
});
this has been bugging me for ages but I can't figure out how to programmatically change an ion-toggle value.
My toggle starts as on. When someone slides it off, I popup a confirmation. If they cancel the confirmation, I want to reset the toggle back to where it was before:
<ion-toggle ng-model="twitterConnection" ng-change="twitterConnectionChange()">Twitter</ion-toggle>
$ionicPopup.confirm({
title: 'Are you sure?',
template: 'Are you sure you want to disconnect this account?'
}).then(function(res) {
if(res) {
delete $window.localStorage.twitterToken;
delete $rootScope.user.twitterID;
}
else {
$scope.twitterConnection = true;
}
});
I've tried wrapping the $scope.twitterConnection = true; line in $apply, but that gives the "digest already in progress" error. I've tried wrapping it in $timeout, but nothing happens. I'm a relative beginner so all help appreciated, thanks!
EDIT: here's a codepen: http://codepen.io/Shiftlemac/pen/pjZRbP
What I recommend you to do, is the following:
Create the function, which will be responsible for changing the value of the toggle.
So, in your case it will be:
$ionicPopup.confirm({
title: 'Are you sure?',
template: 'Are you sure you want to disconnect this account?'
}).then(function(res) {
if(res) {
delete $window.localStorage.twitterToken;
delete $rootScope.user.twitterID;
$scope.twitterConnectionToggleOn();
}
else {
$scope.twitterConnectionToggleOff();
}
});
and
$scope.twitterConnectionToggleOff = function(){
$scope.twitterConnection = false;
}
$scope.twitterConnectionToggleOn = function(){
$scope.twitterConnection = true;
}
Answer courtesy of the ionic forum:
http://forum.ionicframework.com/t/programmatic-updating-of-ion-toggle-not-working/36155/2?u=shiftlemac
Essentially I needed to use the ng-checked attribute of the ion-toggle and set up the twitterConnection variable as an object as per this kind gentleman's codepen: http://codepen.io/DaDanny/pen/xwJdLr
<ion-toggle ng-model="twitterConnection.checked" ng-change="twitterConnectionChange()" ng-checked="twitterConnection.checked">Twitter</ion-toggle>
$scope.twitterConnection = {
checked: true,
text: 'Twitter' }
first update state on your components like $scope.twitterConnection = true; or $scope.twitterConnection = false ; final run $scope.$apply(); finish
sorry my bad english
I need to use the showModalDialog method to display a message to a user, which will also need to have two buttons, a "Yes" and "No" but unsure how to approach this method.
I am using IE8 and unsure how to declare this and how I need to assign this that will also cater for both "Yes" and "No" options.
If "No" is pressed, I basically want the showModalDialog closed, with no further action required by the user.
If "Yes" is pressed, I then want it to go off and call a JavaScript function.
I have looked online but I can't seem to find any examples relating to what I am after here.
I am seeking links to good examples that relates to my requirement above.
If you are using jQuery, then you would use it's powerfull widget library http://jqueryui.com
DEMO: http://so.devilmaycode.it/help-with-showmodaldialog-together-with-selections
IMPLEMENTATION:
$(function() {
var external_data = "i'm outside the func";
$('.show-modal-dialog').click(function(e) {
var internal_data = "i'm inside the call";
var a = this;
e.preventDefault();
$("#dialog-message").dialog({
title: 'this is a modal dialog',
modal: true,
open: function(event, ui) {
$(this).append(a.href); //append inside the Dialog it self
},
buttons: {
'Yes': function() {
alert(a.href + ' ' + external_data + ' ' + internal_data);
},
'No': function() {
$(this).dialog("close");
}
}
});
});
});
BODY:
<div id="dialog-message"><p>Lorem Ipsum Est</p></div>
<a class="show-modal-dialog" href="http://www.google.it">Show Modal Dialog</a>
If you are using jquery.ui you, checkout this sample. If you don't want to use jquery.ui, take a look at Block.UI plugin.