smathy · November 13, 2013 22:48
diff --git a/pouchdb.html b/pouchdb.html
 <!DOCTYPE html>
 <html>
 <head>
  <title></title>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="pouchdb.js"></script>
  <script type="text/javascript">
    var db;
    $(function() {
      db = new PouchDB('foo');
      var server_url = 'http://192.168.2.222:5984/foo';

      function sync() {
        var opts = {continuous: true};
        db.replicate.to(server_url, opts);
        db.replicate.from(server_url, opts);
      }

      sync();

      db.info(function(err, info) {
        db.changes({
          since: info.update_seq,
          continuous: true,
          onChange: show_stuff
        });
      });
      
      db.allDocs( {include_docs:true}, function( err, res ) {
        if(err) {
          console.log(err);
        }
        else {
          res.rows.forEach( function(row) {
            update_out( row.doc );
          });
        }
      });

      window.addEventListener( 'pageshow', function(ev) {
        sync();
      });

    });

    function wrapper( doc ) {
      var a = doc._id.split('/');
      return("<div id='" + elem_id(doc._id) + "' class='elem'><h2>" + doc.name + "</h2><p>Email: " + a[1] + "</p></div>");
    }

    function elem_id( id ) {
      return( "id_" + id.replace(/\W/g, '_'));
    }

    function show_stuff( change ) {
      var id = change.id;
      db.get( id, function( err, doc ) {
        var elem = $('#' + elem_id(id));
        if( elem && change.deleted ) {
          elem.remove();
        }
        else if( elem ) {
          elem.replaceWith( wrapper(doc));
        }
        else {
          update_out(doc);
        }
      });
    }

    function update_out( doc ) {
      $('#out').append(wrapper(doc));
    }

    function process_it() {
      var name = $('#name').val();
      var email = $('#email').val();
      var id = "user/" + email;
      var params = { _id: id, name: name }
      db.put( params, function( err, res ) {
        if(err) {
          if( err.status == 409 ) {
            var orig = db.get( id, function( err, doc ) {
              if( err ) {
                console.log(err);
              }
              else {
                params._rev = doc._rev;
                db.put( params, function( err, res ) {
                  if(err) console.log(err);
                });
              }
            });
          }
          else {
            console.log(err);
          }
        }
        else {
          update_out(params);
        }
      });
      return(false);
    }

  </script>
 </head>
 <body>

 <form action="#" onsubmit="process_it();">
  <input type="text" id="name" placeholder="Name"></input>
  <input type="email" id="email" placeholder="Email"></input>
  <input type="submit" value="New or Update"></input>
 </form>

 <div id="out"></div>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="pouchdb.js"></script>
	<script type="text/javascript">
	var db;
	$(function() {
	db = new PouchDB('foo');
	var server_url = 'http://192.168.2.222:5984/foo';

	function sync() {
	var opts = {continuous: true};
	db.replicate.to(server_url, opts);
	db.replicate.from(server_url, opts);
	}

	sync();

	db.info(function(err, info) {
	db.changes({
	since: info.update_seq,
	continuous: true,
	onChange: show_stuff
	});
	});

	db.allDocs( {include_docs:true}, function( err, res ) {
	if(err) {
	console.log(err);
	}
	else {
	res.rows.forEach( function(row) {
	update_out( row.doc );
	});
	}
	});

	window.addEventListener( 'pageshow', function(ev) {
	sync();
	});

	});

	function wrapper( doc ) {
	var a = doc._id.split('/');
	return("<div id='" + elem_id(doc._id) + "' class='elem'><h2>" + doc.name + "</h2><p>Email: " + a[1] + "</p></div>");
	}

	function elem_id( id ) {
	return( "id_" + id.replace(/\W/g, '_'));
	}

	function show_stuff( change ) {
	var id = change.id;
	db.get( id, function( err, doc ) {
	var elem = $('#' + elem_id(id));
	if( elem && change.deleted ) {
	elem.remove();
	}
	else if( elem ) {
	elem.replaceWith( wrapper(doc));
	}
	else {
	update_out(doc);
	}
	});
	}

	function update_out( doc ) {
	$('#out').append(wrapper(doc));
	}

	function process_it() {
	var name = $('#name').val();
	var email = $('#email').val();
	var id = "user/" + email;
	var params = { _id: id, name: name }
	db.put( params, function( err, res ) {
	if(err) {
	if( err.status == 409 ) {
	var orig = db.get( id, function( err, doc ) {
	if( err ) {
	console.log(err);
	}
	else {
	params._rev = doc._rev;
	db.put( params, function( err, res ) {
	if(err) console.log(err);
	});
	}
	});
	}
	else {
	console.log(err);
	}
	}
	else {
	update_out(params);
	}
	});
	return(false);
	}

	</script>
	</head>
	<body>

	<form action="#" onsubmit="process_it();">
	<input type="text" id="name" placeholder="Name"></input>
	<input type="email" id="email" placeholder="Email"></input>
	<input type="submit" value="New or Update"></input>
	</form>

	<div id="out"></div>

	</body>
	</html>