CODEWITHSUNDEEP
javascriptbackbone.js
Himanshu Yadav
Himanshu Yadav

Reputation: 13585

Backbone: Using loading image while waiting for server response

Flow in application has two backend calls simultaneously on two different models.
First user login to the site if it goes fine another fetch() gets the details. In this way there are two models

  1. Login model
  2. dashboard Collection

This how login view makes the save() request to login model then if successful it routes to getCampaigns
LoginView

login: function(e) {
    e.preventDefault();
  this.model.set({
    "email": $('#email').val(),
    "password": $('#password').val()
  });
  this.model.save({},{
    success: function(model, response, options){
        Backbone.history.navigate('getCampaigns', {trigger: true});
    }
  });
}

Router

getCampaigns: function() {
        $('.container').html('<img src="../public/assets/images/spinner.gif"/>');
        dashboardList.fetch();
        dashboardListView.render();
        $('.container').html(dashboardListView.el);
    }

Not sure how should I apply this loading image $this.html("<img src='/assets/img/spinner.gif'>");

Upvotes: 0

Views: 804

Answers (1)

Rida BENHAMMANE
Rida BENHAMMANE

Reputation: 4129

First you have to wait until your collection is is fetched before you render your view :

dashboardList.fetch({
    success: function() {
        dashboardListView.render();
    }
});

or in your view :

var DashboardListView = Backbone.View.extend({
    initialize: function() {
        this.listenTo(this.collection, 'reset', this.render);
    }
});

than you can put somewhere in your code :

$(document).ajaxStart(function(){
    $('.container').html('<img src="../public/assets/images/spinner.gif"/>');
});
$(document).ajaxStop(function(){
    $('.container').empty();
});

Upvotes: 1

Related Questions