I am attempting to use $mdToast.updateTextContent() to update a toast and am unsuccessful. The docs don't go into detail on how to call it with a new message. My desire result would have the first toast display 'Adding account' then change to 'account successfully added'. Any help would be greatly appreciated.
I think the correct way to approach this using material design standards would be to only use the toast once the account has been added. The loading could be a spinner or maybe a loading bar (maybe like this http://materializecss.com/preloader.html)
Once the $mdToast is open, you're able to call updateTextContent (as you stated)
$scope.onAccountAdded = function() {
$mdToast.updateTextContent('Account successfully added')
};
We're watching the variable for changes and update the view automatically, once the value has changed.
https://github.com/angular/material/blob/master/src/components/toast/toast.js#L299
Here is a demo, which shows how it works.
http://codepen.io/DevVersion/pen/qNWewJ
Related
I have a situation where I need to disable the button(added as widget for widget column) when I receive one web socket event. When receiving the web socket I might be in any page. So how to get the reference of that button widget and disable it.
I have created a fiddle WidgetTestFiddle
Can anyone please help.
Thanks in advance
You could use the Ext.ComponentQuery.
Using the query method you can search for the buttons inside your grid.
You probably want to give your buttons an itemId (e.g. itemId: 'widgetcolumn-button-switch') to ensure that you only find the buttons you want.
Using the itemId your search query would look like this: 'button[itemId="widgetcolumn-button-switch"]'
I forked your fiddle and created my own version to illustrate my point: Sencha fiddle example
I think there are several ways to achieve your wanted result.
KaMuns answer will work, but can be tricky in case you use a buffered store / grid. Because the pages in this case are handled internally by the store. Using a static itemId wont work in this case out of the box.
I would suggest you rely on the record data.
Everytime you recieve a websocket message, update the store and refresh the grid view can be an option.
I have modified your fiddle here:
https://fiddle.sencha.com/#view/editor&fiddle/3a87
Here are is the most relevant part:
var grid = btn.up('grid');
var models = grid.getStore().getData().getRange(); // of cause you can use find or another way here
var model = models.filter(mod => mod.get('actualRole') === 'Follower');
model[0].set('showBtn', false);
grid.getView().refresh(); // get ref to view and refresh because data changed
On top you can have a look on the defaultBindProperties and may change this to the hidden key of the button.
I am using Angular ngToast. I am trying to show only one toast at a time. The previously displayed toast should be hidden before displaying a new toast.There should be only one toast at a time. I tried be specifying maxNumber but doesn't work.
ngToast.create({
className: 'info',
content: ' New Toast',
maxNumber: 1
//autoDismiss: true,
//maxOpened: 1
//timeout: 500,
//preventDuplicates: true,
//preventOpenDuplicates: true
//dismissOnClick:true
//clickToClose: true
});
Here is a fiddle that might help you: https://jsfiddle.net/774a9dq4/5/
The only difference here is that before calling the new instance of toast object, just call the dismiss() which will be dismissing ALL the toast instances in DOM.
ngToast.dismiss();
ngToast.create({
content:'I am unique <3'
});
Hope this may help:
Use the ngToast.dismiss() to clear all toasts.
Or
ngToast.dismiss(yourToastMsg) to clear a particular toast.
For more details refer to this link.
The above answers are the easy quick one,but if you wan to take total control of your toastr config you need to take the below approach.
Why maxNumber:1 did not work is because this is available at only configuration level, So if you want to override those values you need to inject the config file while bootstrapping your application and override the maxNumber property.As described in the reference the * marked properties are at configuration level,rest others you can override on individual toast. ngToast
Something like this would work for you inject config to ngToast
app.config(['ngToastProvider', function(ngToastProvider) {
ngToastProvider.configure({
additionalClasses: 'my-animation'
});
}]);
scope.$watch('[apps, date]', function() {
...
...
...
}
Now I know that the above works, but what I need is it to display nothing unless an app is selected first and THEN after that when an app or a date is changed, the code must re-run.
Perhaps this isn't possible.
Any help would be greatly appreciated. :)
**Context:
What happens is I get a UI grid returned with no data(as no app has been selected) until I eventually select an app.
If your intent is to watch a group or a collection you just have to scroll down this page:
https://docs.angularjs.org/api/ng/type/$rootScope.Scope
Search for example: $watchGroup inside the page
I dont want ng-message to keep showing until user enters valid input. So I want to hide the ng-message say after 5 seconds on showing.
I saw the class toggle from ng-active to ng-inactive.
Now how can i manually set ng-message to inactive or hide it after some seconds?
The #muller answer is solved your problem. but it's a temporary solution only. Because if you used more ng-message you need to manage all of them.
But my options is you may go to AngularJS-Toaster. AngularJS Toaster is a customized version of "toastr" non-blocking notification javascript library.
I hope You can see the demo for more clarifications .
And son't worry about the integrations. We don't need long time to integrate this. you just need to download the files from the link which I bring above (js,css) and drag the files to your main screen . That's all.
$timeout(function() {
$scope.showMessage = false;
}, 5000)
edit: to know if the message is shown you can watch the value of the condition (error) I assume (e.g. if the condition is required, watch the error object of your [input field].$error.required..)
I have a form and when the user hits submit, I want to be able to display a message "Are you sure you want to do this"? and if they hit yes, I want it to be submitted?
Thanks
You can use this code in your view
echo $this->Form->create('FormName',array(
'type'=>'file','onsubmit'=>'return confirm("are you sure?");')
);
automatically in cake there is not direct solution for a button as it is for a link :S though you may do it with javascript.
Here is a code for it using jquery for the events asuming your button id is "submit"
$(document).ready(function() {
$('#submit').click(function() {
return confirm('You sure you want to continue?');
});
});
With this you are done, just load this js into your page and change it to please your needs :D hope this helps you