Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

What I have is two inputs for the user to enter in a first name and last name which gets saved to the database. Next using Handlebars.js I looped through the objects in the database to create a list of all "contacts" and added a button that when clicked should delete that contact.

Example of what i'm looking for

The problem is I cant delete the object. Below is the code i have used so far.

<script id="template" type="text/x-handlebars-template">
<table>
<tr>

<td>
<input value={{FirstName}}></input>
</td>
<td>
<input id="EditLname" value={{LastName}}></input>
</td>
<td>
<button id=del>delete</button>
</td>

</tr>
</table>
</script>

the rest of the important code below.

$(window).load(function () {
        var Contact = Parse.Object.extend("Contact");
        var query = new Parse.Query(Contact);
        query.equalTo("objectId");
        query.find({
            success: function (results) {

                for (i = 0; i < results.length; i++) {
                    var data = ({
                        FirstName: results[i].attributes.FirstName,
                        LastName: results[i].attributes.LastName
                    });
                    var template = Handlebars.compile($('#template').html());

                    var html = template(results);

                    $("#main").append(template(data));
                }
            },
            error: function (error) {
                alert("Error: " + error.code + " " + error.message);
            }
        });

        $(document).on("click", "#del", function () {
            myObject.destroy({
                success: function (myObject) {
                    // The object was deleted from the Parse Cloud.
                },
                error: function (myObject, error) {
                    // The delete failed.
                    // error is a Parse.Error with an error code and description.
                }
            });
        });
    });

the above gives "Uncaught ReferenceError: myObject is not defined" in the console log. But I have that code to show my thought pattern more than anything.

Just in case anyone is unsure, what I want is when the button beside john smith is clicked "john smith" will be dropped/ deleted from the database.

EDIT: Basically I want to get This working with Handlebars.

EDIT: This Question asked on Parse.com

share|improve this question
Forgive me if this is simply my ignorance of handlebars.js, but, as far as I can see you AREN'T setting myObject to anything, at least not on the example above. – Shane Gadsby May 31 at 3:32
No problem i'm new to handlebars myself. The reason i have myObject not set to anything is that I have no real idea of what to set it to or how to configure the #del button, I just put in the code from parse.com/docs/js_guide#objects-deleting so people could get an idea of what i was trying to do. I have been able to do this just using DOM but i'm a bit lost when it comes to Handlebars – Thomas Mannion May 31 at 9:01
Ahh, I see, that makes sense. Well, I'm not so great at handlebars, I can give you a jsFiddle (jsfiddle.net/x4rWF/2) that shows what I think your trying to do, but in AngularJS (angularjs.org) – Shane Gadsby Jun 1 at 10:17
sorry for the delay. I just want to use handlebars to display the data on window load so when the delete button is clicked the data is removed from the database thus when the page reloads that row will not show up. Its more of a getting Parse working with Handlebars problem than anything else. – Thomas Mannion Jun 4 at 9:22

1 Answer

up vote 0 down vote accepted

I got it by finding the objectId of the object that i set to the "value" of the button.

Handlebars template

<script id="template" type="text/x-handlebars-template">
<table>
<tr>
<td>
<input id="EditName" value={{FirstName}}></input>
</td>
<td>
<input id="EditLname" value={{LastName}}></input>
</td>
<td>
<button id="del" value="{{objId}}">Delete</button>
</td>
</tr>
</table>
</script>

Populates the template and sets the "value" of the button

$(window).load(function () {
        var Contact = Parse.Object.extend("Contact");
        var query = new Parse.Query(Contact);
        query.equalTo("objectId");
        query.find({
            success: function (results) {

                for (i = 0; i < results.length; i++) {
                    var data = ({
                        FirstName: results[i].attributes.FirstName,
                        LastName: results[i].attributes.LastName,
                        objId: results[i].id
                    });
                    var template = Handlebars.compile($('#template').html());

                    var html = template(results);

                    $("#main").append(template(data));
                }
            },
            error: function (error) {
                alert("Error: " + error.code + " " + error.message);
            }
        });

and finally the code for when the delete button is clicked.

$(document).on("click", "#del", function () {

            var delObject = $(this).attr("value");

            var query = new Parse.Query(Contact);
            query.get(delObject, {
                success: function (delObj) {
                    // The object was retrieved successfully.
                    delObj.destroy({});
                    window.location = "index.html";
                },
                error: function (object, error) {
                    // The object was not retrieved successfully.
                    // error is a Parse.Error with an error code and description.
                    alert("Error: " + error.code + " " + error.message);
                }
            });

        });
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.