Updating data from Parse.com without re-login

Question

I have a web app, that manages a budget for a user. In the settings page, I can edit the budget, after clicking "save" I return to the main page, and there I have line that states the budget amount. The problem is, that when I log in, I see the correct budget, after editing the budget and returning to the main page, I still see the old amount. Only after logging out and re-login again, that line in the main page updates to new amount. Any solutions?

The code that saves the new budget:

    $("#saveNewBudgetAmount").click(function(){
    var User = Parse.User.extend("User");
    var query = new Parse.Query(User);
    var newBudget = $("#newBudgetSum").val();
    query.equalTo("objectId", Parse.User.current().id);
    query.first({
        success: function (User) {
            User.save(null, {
                success: function (user) {
                    User.set("budget", newBudget);
                    User.save();
                    location ="Mainpage.html";
                }
            });

        }
    });

});

and the code that displays it on the main page:

    var MBudget = (function () {
    if (Parse.User.current()) {
        return("Your monthly budget is:" +" "+Parse.User.current().get("budget")+" "+"<a href=Settings.html>(Edit)</a>");

    }

Answer 1

A few things are happening.

First you should simplify your code, and use both alerts AND error handling so that you know if your code works, and when callbacks are made. You are also calling .save() once before any new values are set, so you have a useless save.

You also need to have a success and error callback for EVERY save function you use - .save() by itself is an asynchronous method, and since you are not calling a success function within your save method, so your app will navigate back to "Mainpage.html" before it is known whether or not the save function worked. Here is a much better implementation:

var newBudget = $("#newBudgetSum").val();

var currentUser = Parse.User.current();
currentUser.save(
    {
    // Set as many properties as you like in this field, 
    // think of it as a JSON object except you don't 
    // have to enclose the values in strings.
    budget : newBudget,
    }, {
    success: function(user) {
        alert("Budget successfully saved, new budget is: " + user.get("budget"));
    },
    error: function(error) {
        // error functions will always have an error argument handed back to the client, 
        // with properties error.code and error.message. Error messages are incredibly useful.
        alert("Budget save failed, error: " + error.code + " " + error.message);
    }
});

Another tip is that I recommend all users of Parse.com to use alert() messages for their success and error callbacks while in development, for many reasons - but the key reasons are 1) it will alert you to whether or not the code worked, and 2) it will prevent accidental bugs from causing infinite requests to the Parse.com server, which does happen sometimes, and will cause them to charge your account.