parse.com Javascript CORS error updating username (works parse side)

Question

I'm building a demo site using Parse, that enables the user to signup (user, pass, email), login & then alter these credentials using Parse.com as my backend.

I've sorted out the signup & login, but am now having complications with editing the user.

Here's what I've done so far:

(Assume that the signup & login has worked correctly, with everything written to the default (user, password, email) columns in the users class)

HTML

<h1>User Edit</h1>
<form id="user-edit-form"></form>

JS FUNCTION 1 - INPUTTING EXISTING CONTENT FROM PARSE.COM INTO user-edit-form DIV

function areYouLoggedIn1() {
    if (Parse.User.current()) {


    function userdets() {

        var username = Parse.User.current().get("username");
        var password = Parse.User.current().get("password");
        var email = Parse.User.current().get("email");
        var output = "";

        if (Parse.User.current().get("email")) {
            email = email;
            } else {
                email = "placeholder='Add your email address'";
        }

        output += "<h3>S1</h3>";
        output += "<p>Username: ";
        output += "<input id='user-edit-form-username' type='text' value='"+username+"'>";              
        output += "</p>";
        output += "<p>Password coming soon...</p> ";
        output += "<p>Email: ";
        output += "<input id='user-edit-form-email' type='email' value='"+email+"'>";
        output += "</p>";
        output += "<p><input id='login-submit' type='submit'></p>";

        $("#user-edit-form").html(output);
    };

    userdets();

    } else {
    var output = "";
    output += "<p>You're not logged in!</p>";

    output += "<p>Do so by <a href='login.html'>clicking here to login!</a>  Alternatively you can sign up for an account by <a href='signup.html'>clicking here to sign up</a>.<p/>"

    console.log(output);

    }
$("#user-edit-form").html(output);  
};

areYouLoggedIn1();

This works fine & loads in the existing username, password & email address (if present)...

Assuming that I now go & alter say the email (which is pre-filled thanks to the above), I now run the following:

JS FUNCTION 2 - USER UPDATE

    $("#user-edit-form").submit(function(event){
    var user = Parse.User.current();
    var username = $("#user-edit-form-username").val();
    user.setUsername(username);
    user.save(null, {
    success: function(user) {
    alert("Just updated "+user);
    }
    });
});

In the console log, I get a return:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.parse.com/1/classes/_User/UsernameRemovedByMrT. (Reason: CORS request failed).

I've been looking into CORS & I can't quite get my head around how to set it up from within my JS query.

From what I understand, it isn't always the case that the message is necessarily directly related to CORS: Firefox CORS request giving 'Cross-Origin Request Blocked' despite headers

I'm a learner driver in these neck of the woods...

I've tried out writing a form directly in the html & also have tried to update just the username, but nothing seems to want to work & the message is hard to debug.

It does seem to update the username field in the database, but not in the app (even after a manual refresh). I'm presuming that I have to refresh the Parse.user.current somehow, but not sure how best to go about it (or whether there is a better fix)?

Digging a bit further, I'm questioning whether or not I will need to force the user to log off & log back in? Another observation is that the alert message does not work (presumably because the query does not come back as a success)? — Mr T, Nov 06 '15 at 19:38

score 1 · Accepted Answer · answered Nov 07 '15 at 04:55

1

Updating user details works, but since current user's session expires on update, you need to make sure that user logs in again.

Also, to set username value you need to user.set("username", newUserName).

I'm going to answer this question just for updating username. You can change as per your requirement. Here's the code how I'd update username for logged in user.

$("#user-edit-form").submit(function(event){
    var newUserName = $("#user-edit-form-username").val();
    var password = $("#user-edit-form-password").val();
    if (Parse.User.current()) {
        var currentUser = Parse.User.current();
        // update value when not same username
        if (newUserName !== currentUser.get("username")) {
            currentUser.set("username", newUserName);
            currentUser.save();
            // timeout for completing network request
            setTimeout(function(){
                Parse.User.logOut();
                Parse.User.logIn(NewUserName, password, {
                    success: function(user){
                        alert("username updated successfully.");
                        console.log(user);
                    },
                    error: function(error){
                        console.log(error);
                    }
                });
            }, 250);
        }
    } else {
        console.log("User not logged in.");
    }
}

answered Nov 07 '15 at 04:55

Prime_Coder

161
2
14

Thanks for this. It still doesn't work with Parse, however I now understand from a friend that this is a problem with the Parse library than with js – Mr T Nov 07 '15 at 13:13
how come it still doesn't work? i mean have you tried and got any error? – Prime_Coder Nov 08 '15 at 04:49
If I change `var newUserName = $("#user-edit-form-username").val();` to `var newUserName = testname;` It renames the user to testname in Parse.com, but it doesn't refresh the page with the new login info, instead reverting back to the original username being displayed in the `output += ""; `. If I use the code as per your suggestion, It does not alter the username either in the browser nor in the DB. – Mr T Nov 09 '15 at 16:59
Is variable testname accessible there? And how are you refreshing the page? – Prime_Coder Nov 10 '15 at 06:23
Sorry, theres a slight typo, I was declaring "testname" directly which altered the database to test name. I don't get a console readout either way (I guess I should get one of the three console logs. Here is the full excerpt of the function: – Mr T Nov 11 '15 at 11:59
`if (Parse.User.current()) { var currentUser = Parse.User.current(); if (newUserName !== currentUser.get("username")) { currentUser.set("username", newUserName); currentUser.save(); setTimeout(function(){ Parse.User.logOut(); Parse.User.logIn(NewUserName, password, { success: function(user){ alert("username updated successfully."); console.log(user); location.reload(); }, error: function(error){ console.log(error); } }); }, 250); } } else { console.log("User not logged in."); } })` – Mr T Nov 11 '15 at 12:00

parse.com Javascript CORS error updating username (works parse side)

1 Answers1