added form2js, and mongodb

This commit is contained in:
2012-06-01 18:25:05 -04:00
parent 325b3460d6
commit 801627194f
15 changed files with 1630 additions and 106 deletions

View File

@@ -5,74 +5,63 @@ html
link(rel='stylesheet', href='/stylesheets/style.css')
script(src='http://code.jquery.com/jquery-1.6.1.min.js')
script(src='/socket.io/socket.io.js')
script(src='/form2js/form2js.js')
script(src='/form2js/jquery.toObject.js')
script(src='/form2js/json2.js')
script
//$(document).ready(function() {
var socket = io.connect('http://localhost:3000');
socket.on('populate', function(data) {
socket.on('populate', function(json) {
var out = "";
$.each(data, function(i, obj) {
out += "<li>"+obj.name+" is making "+obj.salary+"</li>";
});
for (var n in json) { // Each top-level entry
out += '<li>' + n + '<ul>';
for (var i = 0; i < json[n].length; i++) { // Each sub-entry
out += '<li>' + json[n][i] + '</li>';
};
out += '</ul></li>';
};
console.log('out ' + out);
$('#employees').html(out);
});
$(function() {
//Add more fields dynamically.
$('.AddNeut').click(function() {
var field = $(this).attr('data-field')
var area = $(this).attr('data-area')
var limit = $(this).attr('data-limit')
console.log('vars' + field + ',' + area + ',' + limit);
//var field_area = $('#' + area);
//var all_inputs = field_area.getElementsByTagName("input"); //Get all the input fields in the given area.
//Find the count of the last element of the list. It will be in the format '<field><number>'. If the
// field given in the argument is 'friend_' the last id will be 'friend_4'.
var last_item = $('#' + field + ' li').length;
console.log('last_item' + last_item);
console.log('new_item' + (last_item + 1));
//If the maximum number of elements have been reached, exit the function.
// If the given limit is lower than 0, infinite number of fields can be created.
// if(count > limit && limit > 0) return;
// if(document.createElement) { //W3C Dom method.
// var li = document.createElement("li");
// var input = document.createElement("input");
// input.id = field+count;
// input.name = field+count;
// input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
// li.appendChild(input);
// field_area.appendChild(li);
// } else { //Older Method
// field_area.innerHTML += "<li><input name='"+(field+count)+"' id='"+(field+count)+"' type='text' /></li>";
// }
var field = $(this).attr('data-field');
var area = $(this).attr('data-area');
var limit = $(this).attr('data-limit');
var jsontag = $(this).attr('data-jsontag');
var last_item = $('.' + area ).length;
console.log('.' + area + ' li')
console.log('LastItem - ',last_item, 'next_Item - ', (last_item + 1) );
// create the new element via clone(), and manipulate it's ID using newNum value
var newElem = $('.' + area + '_template').clone().attr('class',area);
// var newElem = $('#' + area + last_item ).clone().attr('id', area + (last_item + 1));
// newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
////manipulate the name/id values of the input inside the new element
// newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
////insert the new element after the last "duplicatable" input field
$('#' + area + 'target').after(newElem);
// $("."+classname+"#input" + newNum).css('display', 'block');
//return false;
var newElem = $('ol#' + field + ' li:first').clone().attr('style', 'display: block');
$(newElem).attr('class', area);
$(newElem).children('input').attr('disabled',false);
$(newElem).children('input').each(function(){
var newName = $(this).attr('name').replace('[]','[' +(last_item + 1) + ']')
$(this).attr('name', newName);
console.log('name ' + newName);
});
$(newElem).appendTo('ol#' +field);
});
$('#save').click(function() {
socket.emit('data', $('#myForm').serializeArray());
console.log($('#myForm').serializeArray());
var selector= "#myForm"
//var formDataFirst = $(selector).toObject({mode: 'first'});
var formDataAll = $(selector).toObject({mode: 'all'});
socket.emit('data', formDataAll);
console.log('All ', JSON.stringify(formDataAll, null, '\t'));
// to prevent the page from changing
return false;
});
});
body!= body
body!= body