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

372
November 23, 2016, at 9:15 PM

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)?

Answer 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.");
    }
}
Rent Charter Buses Company
READ ALSO
How to retrieve a MySQL value with AJAX on PHP?

How to retrieve a MySQL value with AJAX on PHP?

Ok, this one is taking me some time now, I've read other topics and cannot seem to solve it. .

322
Jquery: How do I count all the rows in a section and display the count

Jquery: How do I count all the rows in a section and display the count

I am using a search that allows users to search a table row for a string. If the row doesn't contain that string then it is hidden.

249
How to load comments with ajax (in Jquery)

How to load comments with ajax (in Jquery)

this codes will submit the comments in the database but they won't show in page and I have to refresh the page to show them, does anyone know what is wrong with this codes?.

335