I am new to angularjs and UI dev too and I have tried to implement a functionality of disabling the button on-click of it and showing a message on page e.g "In progress" and after 3 secs button should get enabled with a different message e.g "Completed".
Button is getting disabled on click but and not showing notification "In Progress"on-click instead showing notification "Complete"after 3 secs.
I have seen this similar kind of problem solved before in this forum but not able to figure out missing logic in my code ............kindly please help
MY HTML:
Analysis
In Progress
Complete
Controller:
$scope.isDisabled=false;
$scope.showNotification=false;
$scope.isEnabled=true;
$scope.completeNotification=false;
$scope.showNext=function(){
$scope.isDisabled=true;
$scope.showNotification=true;
$scope.buttonWait();
$scope.buttonWait = function() {
$timeout($scope.isEnabled = true, $scope.showNotification = false, $scope.completeNotification = true, 3000);
}
$timeout(function() {
$scope.isEnabled = true;
// ...
}, 3000);
as mentioned by Mikko, your syntax seems to be wrong. it should be like
$scope.buttonWait = function() {
$timeout(function() {
$scope.isEnabled = true,
$scope.showNotification = false,
$scope.completeNotification = true
}), 3000);
};
sample plnkr link here
Related
I have a formpanel with a beforesubmit listener, which should prevent the submission if the form is invalid.
Sencha Fiddle availble here:
https://fiddle.sencha.com/#fiddle/3j5l (just comment the beforesubmit: 'onFormBeforeSubmit' line within the controler/panel and inspect the console to see the difference)
The listener is attached via a controller trough the init function like this:
//controller init function
init: function () {
var me = this;
me.listen({
component: {
'formpanel': {
beforesubmit: 'onFormBeforeSubmit'
}
}
});
},
onFormBeforeSubmit: function () {
console.log(arguments);
var me = this, form = me.getView();
console.log('beforesublit event fired');
if (!form.validate()) {
console.log('form is invalid!');
return false;
}
}
And all seems fine - the submit procedure is started, the onFormBeforeSubmit() method is executed, the form is considered invalid, but althought there is a return false statement - the form is submitted to the server.
Then, i tried to attach the listener simply via the listeners config of the panel like this:
//panel definitions...
listeners: {
beforesubmit: 'onFormBeforeSubmit'
}
And then it worked as expected.
As you can see the executed function is the same.
One thing i mentioned is that it receives different arguments - if triggered via the listeners config - it has a 5 arguments. Via controller - they are 4. The 5th one is an obect like this:
beforesubmit: "onFormBeforeSubmit"
scope: "self"
Can someone explain me why is this? Is it a bug or an expected behavior?
And after all - where is the right place to attach the listeners - in the controller or within the view??
Thanks.
First of all, you don't have to do this in init function.
Simply use control block of your viewcontroller like this:
control: {
formpanel: {
beforesubmit: 'onFormBeforeSubmit'
}
},
Please refer the documentation of control, it is much more straightforward to use that.
But it still not enough, and I think you are right, this is a bug. FormPanel's submit actually still using already deprecated function to fire events.
Please try the following override, it should fix this and allows you to use event listeners defined in controllers:
Ext.define('FixPanelEventFiring',{
override: 'Ext.form.Panel',
submit: function(options, e) {
var me = this,
formValues, form;
options = options || {};
formValues = me.getSubmitValues({
enabled: me.getStandardSubmit() || !options.submitDisabled
});
form = me.element.dom || {};
if (this.getEnableSubmissionForm()) {
form = this.createSubmissionForm(form, formValues);
}
options = Ext.apply({
url: me.getUrl() || form.action,
submit: false,
form: form,
method: me.getMethod() || form.method || 'post',
autoAbort: false,
params: null,
waitMsg: null,
headers: null,
success: null,
failure: null
}, options || {});
return me.fireEventedAction('submit',
[me, formValues, options, e],
'doBeforeSubmit',
this,
null,
'after'
);
},
});
Please be sure you include this in your overrides. You can also test this in fiddle, just add it before everything else. I'm not 100% sure it is perfect, I can imagine there are other issues with this, so please test this well.
I am a naive React Developer and facing some difficulty with getting gooogle chart work with react. I am using Google Charts in a ReactJs component with ControlWrapper as shown below.
componentDidMount: function(){
google.charts.load('current', {'packages':['corechart', 'controls']});
this.drawCharts();
},
componentDidUpdate: function(){
google.charts.load('current', {'packages':['corechart', 'controls']});
this.drawCharts();
},
drawCharts: function(){
var cmpt = this;
//Removed detailed code from here due to copyright issues
//adding controls----------------
let dashboard = new google.visualization.Dashboard( document.getElementById(cmpt.props.widgetId) );
let controlId = '${this.props.widgetId}_control';
var controlWrapper = new google.visualization.ControlWrapper({
'controlType' : 'NumberRangeFilter',
'containerId' : controlId,
'options' : {
'filterColumnLabel' : xDataSysName
}
});
var barChart = new google.visualization.ChartWrapper({
'chartType': 'BarChart',
'containerId': this.props.widgetId,
'options': options
});
dashboard.bind(controlWrapper, barChart);
dashboard.draw(data);
if(linkColumn){
let selectionEventHandler = function() {
window.location = data.getValue(barChart.getSelection()[0]['row'], 1 );
};
google.visualization.events.addListener(barChart, 'select', selectionEventHandler);
}
}
},
This is not the whole piece of code but should be enough for the issue I'm facing.
First time I load the page, I get the error in the console saying
google.visualization.Dashboard is not a constructor
I reload the page hitting SHIFT+F5, the error goes away and components load just fine except ones that are dependent on controlWrapper throwing the error as follows
google.visualization.controlWrapper is not a constructor
which never goes away even after reloading the page. I referred to this discussion and tried their solution but I am still getting these error in the manner mentioned above. Please help me figure out how to fix it. Also, I am not able to comprehend why dashboard error goes away on a reload.
need to wait until google charts has fully loaded before trying to use any constructors,
this is done by providing a callback function.
try changing the load statement as follows...
componentDidMount: function(){
google.charts.load('current', {packages:['corechart', 'controls'], callback: this.drawCharts});
},
componentDidUpdate: function(){
google.charts.load('current', {packages:['corechart', 'controls'], callback: this.drawCharts});
},
I am creating an ionic project and I am trying to integrate with Algolia autocomplete.js. I managed to make the search system work, however I added a ng-click on my search results and this function is not working as presented in this codepen that I did as example below:
http://codepen.io/marcos_arata/pen/VKVOky
Inside my algolia's result template:
<a ng-click="add_name({{{ name }}})">
Function that should be run when clicked:
$scope.add_name = function(name) {
alert('User added!');
console.log(name);
}
I tried to inject the results inside the scope but didn't work as well:
autocomplete('#search_name', { hint: false, debug: true, openOnFocus: true },[{
source: index.ttAdapter({ hitsPerPage: 15 }),
templates: {
header: '',
suggestion: function(hit) {
$scope.hit = hit;
return template.render(hit);
}
}
}]);
http://codepen.io/marcos_arata/pen/VKVOky
---- SOLVED ----
Instead of creating a ng-click function inside your templates, you can handle the event click of your search inside your "autocomplete:selected" function and use the dataset and suggestion results.
.on('autocomplete:selected', function(event, suggestion, dataset) {
$scope.name = suggestion.name;
console.log($scope.name);
## create any functions with the suggestion and dataset results inside
});
EDITING THE ANSWER:
Here is the codepen:
Apparently the suggestion keep the name clicked, so you dont need an extra function:
.on('autocomplete:selected', function(event, suggestion, dataset) {
$scope.name = suggestion.name;
console.log($scope.name);
});
I have created a plunkr with my code that does work. After the drop down is collapsed by clicking the Toggle collapse button, I need the dropdown to close on it's own after 3 seconds. I have played with the following in the HeaderCtrl in example.js with no luck:
function callAtTimeout(){
$scope.isFooCollapsed = true;
}
$timeout(function(){
!$scope.callAtTimeout();
}, 3000);
http://plnkr.co/edit/wMxA4Tkiqr9BsSfxia02?p=preview
Any help/input would be appreciated. Thanks in advance!
You can just use angular $timeout to achieve the wanted like this:
var timer;
$scope.isFooCollapsed = true;
$rootScope.$on("bagNotification", function() {
$timeout.cancel(timer);
$scope.isFooCollapsed = !$scope.isFooCollapsed;
timer = $timeout(function() {
$scope.isFooCollapsed = true;
}, 3000);
});
We cancel the timeout each time with $timeout.cancel to prevent multiple hide/shows when button is clicked multiple times.
Plunkr: http://plnkr.co/edit/YbsCuicDiHVDGULwpap3?p=preview
I'm using the angular leaflet directive. Everything is working properly on my laptop. But on iPad, the double click is working but the click event is not working at all. I have one event handler for click but it doesn't get triggered.
$scope.events = {
map: {
enable: ['mousedown', 'dblclick', 'click'],
logic: 'broadcast'
}
};
$scope.$on('leafletDirectiveMap.mousedown', function(event) {
alert('click');
});
$scope.$on('leafletDirectiveMap.click', function(event) {
alert('click');
});
$scope.$on('leafletDirectiveMap.dblclick', function(event) {
alert('dbclick');
});
Double click event gets triggered but the other ones not. Anything I can try to debug this?
checkout this https://github.com/angular/material/issues/1300.
Having this below code fixed that issue for us,
$mdGestureProvider.skipClickHijack();