I have two buttons in the application template that fire different actions in my controller. I want to set up ladda.js to add a spinner to the buttons while the ajax function in the corresponding action is waiting to resolve. But to start ladda I have to do something like this...
$('#form-submit').click(function(e){
e.preventDefault();
var l = Ladda.create(this);
l.start();
});
So in my controller I have the typical action setup starting an ajax function. But what would be the best way to get the button that fired the action so I can start ladda like it shows above?
For reference here are the buttons in the template
// templates/application.hbs
<li class="navbar-right"><button {{action 'startBot'}} class="btn btn-success ladda-button" data-style="slide-down"><span class="ladda-label">Start Bot</span></button><button {{action 'stopBot'}} class="btn btn-danger ladda-button" data-style="slide-down"><span class="ladda-label">Stop Bot</span></button></li>
And these are the actions in the controller
// controllers/application.js
isConnected: false,
actions: {
startBot: function(){
var self = this;
console.log('starting bot');
Ember.$.ajax({
method: 'post',
dataType: 'json',
url: 'http://localhost:3000/api/v1/bot',
success: function(data) {
console.log(data);
self.toggleProperty('isConnected');
self.get('notify').success('Bot started');
},
error: function(err) {
console.log(err);
self.get('notify').error('There was a problem');
}
});
},
stopBot: function(){
var self = this;
console.log('stoping bot');
Ember.$.ajax({
method: 'delete',
dataType: 'json',
url: 'http://localhost:3000/api/v1/bot',
success: function(data) {
console.log(data);
self.toggleProperty('isConnected');
self.get('notify').success('Bot stopped');
},
error: function(err) {
console.log(err);
self.get('notify').error('There was a problem');
}
});
},
}
Aucun commentaire:
Enregistrer un commentaire