How to add data to an element in Backbone.js based template

Question

I have a project in my hand, and it used backbone.js (which I have never used). Though I have studied the code, and read many things on the net for Backbone. Now, I have a question, how should I edit the content of an element, after the AJAX request is successful? This ajax request is triggered by a button-click, the button is bound to a click-event. All nested in Backbone.

There is a button in the template, which is bound to an event, when the button is clicked, then an ajax request is sent to the server. On the response, I want to add a message to the template, here are the codes:

Tempplate:

<div id='main-view'>
<button id='delete-users'>Delete All Users</button>
</div>
<div class='message-container'></div>

Backbone:

Event:

'click #users-list' : 'usersList',
'click #delete-users' : 'deleteUsers',

View:

usersFetch.then(function(){
    var Users = new App.Views.Users({ collection : usersCollection})
    creatDataTable();
});

Deleting User

(event for button)

deleteUsers: function(){


               $.ajax({
                   url : "<?php echo url("users/delete/all"); ?>",
                   type : "GET",
                   success : function(data){
                        if(data.result == true)
                        {
                             // Here I want to add a message to the
                             // .message-container
                             console.log("Successfully Done.");
                        }
                        else if(data.result == false)
                        {
                            console.log("An error occurred.");
                        }
                   },
                   error :  function(data){
                        console.log("An error Occurred.");
                   }
               });
            }

Now I want to add a message to the .message-container instead of console login. How should I do that then?

Answer 1

In your success callback simply find the message container scoped to that Backbone View . The way you would do this is by using the Backbone jQuery selector this.$ , as follows:

success : function(data){
   if(data.result == true)
   {
       that.$('div.message-container').text("Successfully Done.");
   }
   else if(data.result == false)
   {
       that.$('div.message-container').text("An error Occurred.");
   }
},

Were I defined var that = this; before the $.ajax() call.

Your other option would be to rerender your view and pass the days to your template. That's more costly and more complex. It also depends on how you're rendering your templates.

---

the jQuery delegate for element lookup is defined in the Backbone source as:

$: function(selector) {
  return this.$el.find(selector);
}