Search code examples
javascriptbackbone.jsparse-platformparse.js

Save success not working with parse.com object


I have been messing around trying to save data from a web form and cannot get the standard validation to return. Thinking this is some sort of async problem that I am just not getting. Saving objects with the parse.com api is built off of backbone.js, so it is pretty similar to that. For some reason I can save my data to my database no problems, but when I try to introduce some sort of validation it gets messed up. Looking for some info on how to properly get a success validation back from the server. Right now it hits error every time, and seems to kill the server from saving data.

Below is the code that executes on submit. I have shown the three ways I have tried saving data.

$("#f1").submit(function(event) {
        var NewRes = Parse.Object.extend("Customer");
        var newRes = new NewRes();

        newRes.set("FirstName", "Ricky");
        newRes.set("LastName", "Bobby");

        //works every time, but I have no return validating it
        newRes.save();

        //saving with callback options, doesn't save anything to the database and hits error message
        newRes.save(null, {
            wait: true,
            success: function(newRes, response) {
                alert("success" + response.message);
            },
            error: function(newRes, response) {
                alert("errorcode: " + response.code + "  Message: " + response.message);
            }
        });

        //saving with promises, doesn't save anything and hits error message
        newRes.save().then(function(response) {
            alert("success");
        }, function(error) {
            alert("error");
        });
    });

Here are the results of the error message given below:

errorcode: 100  Message: XMLHttpRequest failed: {"statusText":"","status":0,"response":"","responseType":"","responseXML":null,"responseText":"","upload":{"ontimeout":null,"onprogress":null,"onloadstart":null,"onloadend":null,"onload":null,"onerror":null,"onabort":null},"withCredentials":false,"readyState":4,"timeout":0,"ontimeout":null,"onprogress":null,"onloadstart":null,"onloadend":null,"onload":null,"onerror":null,"onabort":null}

Solution

  • The reason none of this was working is because the form.submit() function was finishing before any of the parse.com asynchronous functions were complete. In order to prevent this I used the preventdefault method to stop the form from submitting. Then I used location.reload() to refresh the page after my parse.com requests have either finished successful or failed.

    $("#f1").submit(function(event) {
        event.preventDefault();
        var NewRes = Parse.Object.extend("Customer");
        var newRes = new NewRes();
    
        newRes.set("FirstName", "Ricky");
        newRes.set("LastName", "Bobby");
    
        //saving with promises
        newRes.save().then(function(response) {
            alert("success");
            location.reload(); //refreshes the form
        }).catch(function(error) {
            alert("error");
            location.reload();
        });
    });