sstent/node
1
0
Fork 0
mirror of https://github.com/sstent/node.git synced 2026-01-25 14:42:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

updated form code

Browse Source
This commit is contained in:
Stuiart Stent
2012-06-01 08:20:29 -04:00
parent 723a1e66d8
commit 325b3460d6
3 changed files with 73 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ninja-store/app.js
View File

@@ -114,6 +114,10 @@ io.sockets.on('connection', function(client) {
console.log("addemployee ")
addemployee(data);
});
client.on('data', function(data) {
console.log("data" + JSON.stringify(data))
});
});

30
ninja-store/views/items.jade
View File

@@ -19,16 +19,20 @@
ul#employees
form#myForm
div.Template_Name(style='display: none')
input(type='text', id='employee_name', value='name')
input(type='text', id='employee_salary', value='salary')
div.Template_Exercise(style='display: none')
input(type='text', id='employee_name', value='Exercise')
input(type='text', id='employee_salary', value='Sets')
div
input(type='button', name='Exercise', value='add another exercise', class="btnAdd" )
input(type='button', name='Exercise', value='remove exercise', class="btnDel" )
input(type='button', name='Name', value='add another name', class="btnAdd" )
input(type='button', name='Name', value='remove name', class="btnDel" )
input(type='button', id='save', value='Save')
ol(id='note_area')
li(class='note')
input(type='text', name='note_1', value='note')
a(style='cursor:pointer;color:blue;', onclick='this.parentNode.parentNode.removeChild(this.parentNode);') Remove Field
ol(id='exercise_area')
li(class='exercise')
input(type='text', name='exercise_1, value='exercise')
a(style='cursor:pointer;color:blue;', onclick='this.parentNode.parentNode.removeChild(this.parentNode);') Remove Field
li(id='exercise_target')
input(type='button', class='AddNeut', value='Add note Field', data-field='note_area', data-area='note_', data-limit='0' )
input(type='button', class='AddNeut', value='Add exercise Field', data-field='exercise_area', data-area='exercise_', data-limit='0' )
input(type='submit', id='save', value='Save')
li(class='exercise_template')
input(type='text', name='exercise_1, value='exercise')
a(style='cursor:pointer;color:blue;', onclick='this.parentNode.parentNode.removeChild(this.parentNode);') Remove Field

105
ninja-store/views/layout.jade
View File

@@ -6,74 +6,73 @@ html
script(src='http://code.jquery.com/jquery-1.6.1.min.js')
script(src='/socket.io/socket.io.js')
script
$(document).ready(function() {
//$(document).ready(function() {
var socket = io.connect('http://localhost:3000');
socket.on('populate', function(data) {
var out = "";
$.each(data, function(i, obj) {
console.log('<li>'+obj.name+' is making '+obj.salary+'</li>');
out += "<li>"+obj.name+" is making "+obj.salary+"</li>";
});
$('#employees').html(out);
});
$('.btnAdd').click(function() {
var classname = $(this).attr("name")
var num = $('.' + classname).length; // how many "duplicatable" input fields we currently have
var newNum = new Number(num + 1); // the numeric ID of the new input field being added
$(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>";
// }
// 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);
// create the new element via clone(), and manipulate it's ID using newNum value
var newElem = $(".Template_"+classname).clone().attr('id', classname + newNum);
//is this line needed?
//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');
// manipulate the name/id values of the input inside the new element
newElem.children(':first').attr('id', classname + newNum).attr('name', 'name' + newNum);
// insert the new element after the last "duplicatable" input field
$("."+classname+"#input" + num).after(newElem);
$("."+classname+"#input" + newNum).css('display', 'block');
// enable the "remove" button
$('.btnDel').prop('disabled',false);
// business rule: you can only add 5 names
if (newNum == 12)
$('#btnAdd').
prop('disabled',true);
});
$('.btnDel').click(function() {
var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
$('#input' + num).remove(); // remove the last element
// enable the "add" button
$('#btnAdd').prop('disabled',false);
// if only one element remains, disable the "remove" button
if (num-1 == 1)
$('#btnDel').prop('disabled',true);
});
$('.btnDel').attr('disabled',true);
//return false;
});
$('#save').click(function() {
if ($('#employee_name').val() == '' || $('#employee_salary').val() == '') {
return alert('Please enter both nam e/salary!');
}
var data = {
name: $('#employee_name').val(),
salary: $('#employee_salary').val()
};
console.log('socketpoking: ' + 'data');
socket.emit('add employee', data);
$('#employee_name').val('');
$('#employee_salary').val('');
socket.emit('data', $('#myForm').serializeArray());
console.log($('#myForm').serializeArray());
// to prevent the page from changing
return false;
});
});
body!= body