Created
March 17, 2011 01:26
-
-
Save jlwestsr/873688 to your computer and use it in GitHub Desktop.
This is the completed html file for the blog post that Ed Parcell posted at http://blog.edparcell.com/using-jquery-and-couchdb-to-build-a-simple-we
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Simple Address Book</title> | |
| <link rel="stylesheet" href="style/main.css" type="text/css"> | |
| <script src="/_utils/script/json2.js"></script> | |
| <script src="/_utils/script/jquery.js?1.3.1"></script> | |
| <script src="/_utils/script/jquery.couch.js?0.9.0"></script> | |
| <script type="text/javascript"> | |
| $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 bitly="BITLY_PROCESSED" href="#" id="' + id + '" class="edit">edit</a> | ' + | |
| '<a bitly="BITLY_PROCESSED" href="#" id="' + id + '" class="delete">delete</a>' + | |
| '</div>'; | |
| $("div#addressbook").append(html); | |
| } | |
| } | |
| }); | |
| } | |
| function addUpdateForm(target, existingDoc) { | |
| html = '<form name="update" id="update" action=""><table>' + | |
| '<tr><td>Name</td><td>Number</td></tr>' + | |
| '<tr>' + | |
| '<td><input type="text" name="name" id="name" value="' + | |
| (existingDoc ? existingDoc.name : "" ) + '"></td>' + | |
| '<td><input type="text" name="mobile" id="mobile" value="' + | |
| (existingDoc ? existingDoc.mobile : "") + '"></td>' + | |
| '</tr><tr>' + | |
| '<td><input type="submit" name="submit" class="update" value="' + | |
| (existingDoc ? "Update" : "Add") + '"></td>' + | |
| '<td><input type="submit" name="cancel" class="cancel" value="Cancel"/></td>' + | |
| '</tr>' + | |
| '</table></form>'; | |
| target.append(html); | |
| target.children("form#update").data("existingDoc", existingDoc); | |
| } | |
| $(document).ready(function() { | |
| refreshAddressbook(); | |
| $("div#addressbook").click(function(event) { | |
| var $tgt = $(event.target); | |
| if ($tgt.is('a')) { | |
| id = $tgt.attr("id"); | |
| if ($tgt.hasClass("edit")){ | |
| if ($tgt.hasClass("edit")) { | |
| $("button#add").show(); | |
| $("form#update").remove(); | |
| $db.openDoc(id, { success: function(doc) { | |
| addUpdateForm($tgt.parent(), doc); | |
| }}); | |
| } | |
| } | |
| if ($tgt.hasClass("delete")){ | |
| html = ' <span class="deleteconfirm">Sure? <a bitly="BITLY_PROCESSED" href="#" id="' + id + '" class="dodelete">Yes</a> <a bitly="BITLY_PROCESSED" 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(); | |
| } | |
| } | |
| }); | |
| $("button#add").click(function(event) { | |
| $("form#update").remove(); | |
| $("button#add").hide(); | |
| addUpdateForm($("div#add")); | |
| }); | |
| $("input.cancel").live('click', function(event) { | |
| $("button#add").show(); | |
| $("form#update").remove(); | |
| return false; | |
| }); | |
| $("input.update").live('click', function(event) { | |
| var $tgt = $(event.target); | |
| var $form = $tgt.parents("form#update"); | |
| var $doc = $form.data('existingDoc') || {}; | |
| $doc.type = "address"; | |
| $doc.name = $form.find("input#name").val(); | |
| $doc.mobile = $form.find("input#mobile").val(); | |
| $db.saveDoc( | |
| $doc, { success: function(){ | |
| $("button#add").show(); | |
| $("form#update").remove(); | |
| refreshAddressbook(); | |
| } | |
| }); | |
| return false; | |
| }) | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <h1 id="simple_address_book">Simple Address Book</h1> | |
| <div id="add"><button type="button" id="add">Add</button></div> | |
| <div id="addressbook"></div> | |
| </body> | |
| </html> |
besides this error, it's a great post. Thanks.
Found the issue on line 79 with a missing {. I must of found the error after I posted this, fixed it it and forgot to update. Thanks for the catch.
HI
as a couchdb and couchapp newbie could you please post the complete corrected (working) line 79 as a comment
Thanks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uncaught SyntaxError: Unexpected token } on line 85. (could you update?) @mingderwang