CODEWITHSUNDEEP
jquerycouchdbcouchappcouchbase
Johnbabu Koppolu
Johnbabu Koppolu

Reputation: 3252

Couchapp - Removing a document from couchdb

I am new to JQuery and just trying to get a feel of Couchapp by following this

I came up with this so far -

I have two documents created in db 'addressbook' 

curl -X PUT http://127.0.0.1:5984/addressbook    
curl -X PUT http://127.0.0.1:5984/addressbook/Fred -d '{"type":"address","name":"Fred","mobile":"555-0001"}'    
curl -X PUT http://127.0.0.1:5984/addressbook/Barney -d '{"type": "address", "name": "Barney", "mobile": "555-0002"}'

\addressbook\_attachments\index.html 

<!DOCTYPE html>  
<html>  
  <head>  
    <title>Simple address book</title>  
    <link rel="stylesheet" href="style/main.css" type="text/css">  
<span style="white-space: pre;"> </span><script src="/_utils/script/json2.js"></script>  
<span style="white-space: pre;"> </span><script src="/_utils/script/jquery.js"></script>  
<span style="white-space: pre;"> </span><script src="/_utils/script/jquery.couch.js"></script> 
  </head>  
  <body>  
    <h1>Simple address book</h1>  
<span style="white-space: pre;"> </span><div id="add"><button type="button" id="add">Add</button></div>  
    <div id="addressbook">  
    </div>
  </body> 
<script src="vendor/couchapp/loader.js"></script>
</script>     
</html>

\addressbook\vendor\couchapp\_attachments\loader.js

function couchapp_load(scripts) {
  for (var i=0; i < scripts.length; i++) {
    document.write('<script src="'+scripts[i]+'"><\/script>')
  };
};

couchapp_load([
  "/_utils/script/sha1.js",
  "/_utils/script/json2.js",
  "/_utils/script/jquery.js",
  "/_utils/script/jquery.couch.js",
  "vendor/couchapp/jquery.couch.app.js",
  "vendor/couchapp/jquery.couch.app.util.js",
  "vendor/couchapp/jquery.mustache.js",
  "vendor/couchapp/jquery.evently.js"  
]);

$db = $.couch.db("addressbook");
function refreshAddressbook() {
    $("div#addressbook").empty();
    $db.view("addressbook/phonenumbers", {
        success : function (data) {
            for (i in data.rows) {
                id = data.rows[i].id;
                name = data.rows[i].key;
                phonenumber = data.rows[i].value;
                html = '<div class="address">' +
                    '<span class="name">' + name + '</span> ' +
                    '<span class="phonenumber">' + phonenumber + '</span> ' +
                    '<a href="#" id="'+ id +'" class="edit">edit</a> ' +
                    '<a href="#" id="'+ id +'" class="delete">delete</a> ' +
                    '</div>';
                $("div#addressbook").append(html);
            }
        }
    });
}

$(document).ready(function () {
    refreshAddressbook();   
});

$(document).ready(function () {
$("div#addressbook").click(function (event) {
    var $tgt = $(event.target);
    if ($tgt.is('a')) {
        id = $tgt.attr("id");               
        if ($tgt.hasClass("edit")) {
            // TODO: implement edit functionality
        }
        if ($tgt.hasClass("delete")) {
            html = '<span class="deleteconfirm">Sure? <a href="#" class="dodelete">Yes</a> <a href="#" class="canceldelete">No</a></span>';
            $tgt.parent().append(html);
        }
        if ($tgt.hasClass("dodelete")) {
            $db.openDoc(id, {
                success : function (doc) {
                    $db.removeDoc(doc, {
                        success : function () {
                            $tgt.parents("div.address").remove();
                        }
                    })
                }
            });
        }
        if ($tgt.hasClass("canceldelete")) {
            $tgt.parents("span.deleteconfirm").remove();
        }
    }
});
});

However, I could not get the document delete work - I tried to debug and clearly when I say - id = $tgt.attr("id"); - the id is empty here.

I must be missing something trivial here. Any pointers would be great.

Upvotes: 0

Views: 799

Answers (1)

Aaron Vegh
Aaron Vegh

Reputation: 5217

I'm working on the same thing right now. The problem is that you have to assign an ID to the individual links. For the original links:

html = '<div class="address">' +
   '<span class="name">' + name + '</span> ' +
   '<span class="phonenumber">' + phonenumber + '</span> ' +
   '<a href="#" class="edit" id = "' + id + '">edit</a> '+
   '<a href="#" class="delete" id = "' + id + '">delete</a> '+
   '</div>';

and for the "dodelete" line in the delete function:

html = '<span class="deleteconfirm">Sure? <a href="#" class="dodelete" id = "' + id + '">Yes</a> <a href="#" class="canceldelete">No</a></span>';

Now the removeDoc call has something to hang its hat on.

Upvotes: 1

Related Questions