Home » vue » Working with Ladda-buttons

Working with Ladda-buttons

Posted by: admin November 26, 2021 Leave a comment

Questions:

I have a ladda button as follows.

<button class="btn btn-primary btn-xs ladda-button" 
data-style="slide-left" data-size="xs" v-on:click="refreshPage()">Refresh</button>

VueJs is in charge of the triggering the onClick event. When the button is clicked the following function is evoked

    refreshPage: function() {
        that = this;
        Ladda.bind( '.ladda-button', {
            callback: function( instance ) {
                instance.start();
                console.log(this);
                that.getProjectEvents();
                that.getIgnoredEvents();
                toastr.info('Refresh was done.');
                instance.stop();
            }
        } );

    }

getProjectEvents code follows

    getProjectEvents: function() {
        this.$http.get('/project/exceptions/'+url(-1)).success(function(response) {
           this.$set('events', response);
        });
    },

getIgnoredEvents is as follows

    getIgnoredEvents : function() {
       this.$http.get('/exceptions/ignoredExceptions/'+ url(-1)).success(function(response) {
          this.$set('ignoredExceptions', response);
       }); 
    }, 

getProjectEvents and getIgnoredEvents are both defined in the same JS file.

Problem

When I click the button , the spinner is not getting displayed. However when I yank the code from the two methods(getProjectEvents and getIgnoredEvents) and put in the callback , everything starts to work. I am wondering why it does not get called when I am calling the functions!

I also tried using the setTimeOut function (wondering if the refresh was happening too quickly) but it does not work (apparently because its asynchronous).

Can you please let me know what I am doing wrong here?

Thanks

Answers:

I think your problem is that you’re calling the instance.stop() outside of the success method of the http call, because these are promises the code is continuing to run even though you’re still waiting for the results, to resolve this you’ll need to move the instance.stop() inside your get requests.

I prepared this little JSfiddle that shows ladda working within a vue.js click event.

https://jsfiddle.net/peternmcarthur/mnhverer/

new Vue({
    el: '#buttonExample',
    data: {
    },
    methods: {
        showSpinner: function() {
            var l = Ladda.create(document.querySelector('.ladda-button'));
            l.start();
            setTimeout(function() {
                l.stop();
            }, 1000);
        }
    }
});

<section class="button-demo">
    <h3>expand-left</h3>
    <button v-on:click="showSpinner" id="buttonExample" class="ladda-button" data-color="green" data-style="expand-left">
        <span class="ladda-label">Submit</span>
        <span class="ladda-spinner"></span>
    </button>
</section>

And here is another that shows ladda working with a get request: https://jsfiddle.net/peternmcarthur/pLrjw98a/3/

new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue.js!',
      someData: []
  },
  methods: {
      getGithubDetails: function() {
         var l = Ladda.create(document.querySelector('.ladda-button'));
         l.start();
         this.$http.get('https://api.github.com/users/peternmcarthur', function (data, status, request) {

         }).success(function (data, status, request) {
            this.$set('profileInfo', data)
            l.stop();
        }).error(function (data, status, request) {
            l.stop();
        })
    }
}
});
Vue.http.options.root = '/root';

<section class="button-demo" id="app">
    {{ profileInfo.name }}
    <h3>expand-left</h3>
    <button v-on:click="getGithubDetails" id="buttonExample" class="ladda-button" data-color="green" data-style="expand-left">
        <span class="ladda-label">Get github username</span>
        <span class="ladda-spinner"></span>
    </button>
</section>

If you have any questions let me know.