Question

I have a fetch() in the callback function of $.post(). The fetch() grabs the data from the backend and updates the collection just fine, however when its time to run either its success or error callbacks, nothing happens! I placed console.log()s in both its callbacks and they never appear in the Javascript console.

Any idea what happened?

A method in a View

create_set: function() {
    var self = this;

    // Post data to server
    $.post('api/create_set', {
        user_id: $('#user_id').val(),
        post_id: this.post_id,
        set_name: $('#new_set_name').val()
    }, function() {

        // Update list of Sets
        self.setList.fetch({
            data: {
                user_id: $('#user_id').val(),
                post_id: this.post_id
            },
            processData: true
        }, {
            success: function() {
                // Highlight the first class in list
                $(self.setListView.el).children('div:first').addClass('active');
                console.log('success'); // DOESNT RUN!
            }
        }, {
            error: function() {
                console.log('error');  // DOESNT RUN!
            }
        });

        console.log('hello');  // RUNS!

    });
}

Answer 1

success and error should be the properties of options object that you pass to fetch, you don’t have to create separate objects for them:

self.setList.fetch({
  data: {...},
  processData: true,
  success: function(){...},
  error: function(){...}
})