Question

So I have been working with basic Backbone.js to create a simple demo page that is a basic User Manager. I run the same function whether I am creating (POST) or updating (PUT) a user’s information. Both the POST and PUT requests are successful (I.E. calling my “success” function) however only the PUT command will trigger the router, the POST request does not trigger the same line of code while it DOES trigger the success function.

Below is my events code. The saveUser function takes care of both the PUT and POST requests but the router in success is only fired from a successful PUT request, not from a successful POST request (even though both are successful in updating the database).

events: {
            'submit .edit-user-form': 'saveUser',
            'click .delete': 'deleteUser'
        },
        saveUser: function (ev) {
            var userDetails = $(ev.currentTarget).serializeObject();
            var user = new User();
            reply = user.save(userDetails, {
                success: function (){
                    router.navigate('', {trigger: true});
                },
                error: function(){
                    $("#editError").toggle();
                    $("#editError").html("Error:<br/>"+reply.status+" : "+reply.statusText+"<hr/>");
                }
            });
            return false;
        },
        deleteUser: function (ev){
            $.ajaxSetup({
                headers: {
                    'method':"DeleteUser"
                }
            });
            reply = this.user.destroy({
                success: function (){
                    router.navigate('', {trigger: true});
                },
                error: function(){
                    $("#editError").toggle();
                    $("#editError").html("Error:<br/>"+reply.status+" : "+reply.statusText+"<hr/>");
                }
            })
            return false;
        }

Here is the router code:

    var Router = Backbone.Router.extend({
        routes:{
            'new': 'editUser',
            'edit/:id': 'editUser',
            '': 'home'
        }
    });
    var router = new Router();
    //ROUTES
    router.on('route:home', function(){
        alert("1");
        userList.render(),
        editUser.render({});
    });
    router.on('route:editUser', function(id){
        userList.render();
        editUser.render({id: id});
    });
    //NECESSARY
    Backbone.history.start();`

Any help would be appreciated!

Thanks!

Answer 1

The problem is that when you’re creating a new user, you’re already at the url "", and router.navigate(newUrl) only triggers if newUrl is different than the current page url.

See https://github.com/documentcloud/backbone/issues/652.

To fix, change

router.navigate('', {trigger: true});

To

Backbone.history.fragment = null; // Forces the current URL to be dirty
router.navigate('', {trigger: true}); // Now, Backbone thinks the new URL is different