Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<head>
    <meta charset="utf-8">
    <title>My Parse App</title>
    <meta name="description" content="My Parse App">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/styles.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.7.min.js"></script>
</head>
<body>
    <div id="main">
        <h1>
            You're ready to use Parse!</h1>
        <p>
            Read the documentation and start building your JavaScript app:</p>
        <ul>
            <li><a href="https://www.parse.com/docs/js_guide">Parse JavaScript Guide</a></li>
            <li><a href="https://www.parse.com/docs/js">Parse JavaScript API Documentation</a></li>
        </ul>
        <div style="display: none" class="success">
            <form>
            <div class="info">
                <input id="Fname" placeholder="Enter First Name" type="text" /><br />
            </div>
            <!-- <button id="save">
                Save</button>-->
            <input type="button" id="save" value="save" />
            </form>
        </div>
        <div id="content">
            <br />
        </div>
    </div>
    <script type="text/javascript">
        Parse.initialize("xx", "xx");
  
​
        $(".success").show();
​
        $(document).ready(function () {
            $("#save").click(function () {
                var Fname = $("#Fname").val();
​
                var Contact = Parse.Object.extend("Contact");
                var contact = new Contact();
​
                contact.set("FirstName", Fname.toString());
​
                contact.save(null, {
                    success: function (results) {
                        // The object was saved successfully.
                        alert("save success");
                        createDiv();
                    },
                    error: function (contact, error) {
                        // The save failed.
                        // error is a Parse.Error with an error code and description.
                    }
​
                });
            });
        });
​
        function createDiv() {
​
            var Contact = Parse.Object.extend("Contact");
            var query = new Parse.Query(Contact);
​
            query.equalTo("objectId");
            query.first({
                success: function (results) {
                    //alert("Successfully retrieved " + results + " ");
                    divTag.innerHTML = results.attributes.FirstName.toString();
                },
                error: function (error) {
                    alert("Error: " + error.code + " " + error.message);
                }
            });
​
            var divTag = document.createElement("div");
​
            divTag.id = "div1";
​
            divTag.setAttribute("align", "left");
​
            divTag.style.margin = "0px auto";
​
            divTag.className = "dynamicDiv";
​
            document.getElementById("content").appendChild(divTag);
​
​
            //NEED TO ADD A ONLOAD TO POPULATE THE DIV WITH ALL CONTACTS.
            //THE ABOVE JUST NEEDS TO ADS THE NEWIST RECORD TO THE BOTTOM OF THE LIST.
​
        }
​
        $(window).load(function () {
            var Contact = Parse.Object.extend("Contact");
            var query = new Parse.Query(Contact);
​
            query.equalTo("objectId");
            query.first({
                success: function (results) {
​
                    var firstname = document.createElement("label");
​
                    firstname.id = "lblfn";
​
                    firstname.setAttribute("align", "center");
​
                    firstname.style.margin = "0px auto";
​
                    firstname.className = "dynamiclbl";
​
                    firstname.innerHTML = results.attributes.FirstName.toString();
​
                    document.getElementById("content").appendChild(firstname);
​
​
                },
                error: function (error) {
                    ("Error: " + error.code + " " + error.message);
                }
            });
        });
​
​
    </script>
</body>
</html>
 
body {
    background: #eee;
    text-align: center;
    padding: 0 25px;
}
​
#main {
    width: 500px;
    margin: auto;
    text-align: left;
    background: white;
    padding: 50px 60px;
    border: solid #ddd;
    border-width: 0 1px 1px 1px;
}
​
#main h1 {
    margin-top: 0;
    font-size: 35px;
}
​
#main ul {
    padding-left: 20px;
}
​
#main .error {
    border: 1px solid red;
    background: #FDEFF0;
    padding: 20px;
}
​
#main .success {
    margin-top: 25px;
}
​
#main .success code {
    font-size: 12px;
    color: green;
    line-height: 13px;
}
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
pandasoonpro
0viewers