I'm attempting to add fields to a profile form for different people in an organization, however, for my new fields I'm getting an "undefined property" error when I try to save. In the javascript below, the fields fname, lname, title, bio, photo and owner work like a charm. But the fields ownership_percentage, edu, skills, prof, awards, community, years, and compensation (all of which I added) are throwing the "undefined property error when I try to save.
(function($) {
if(typeof upsmart === "undefined") { upsmart = {} }
upsmart.people = {
people: [],
pcounter: 0,
acceptFileTypes: ["image/png","image/jpeg","image/jpg","image/gif"],
init: function() {
$("#new").click(upsmart.people.showAddDialog);
$("#team .person").live("click",upsmart.people.showEditDialog);
$("#form").submit(upsmart.people.prepareSubmit);
},
prepareSubmit: function() {
$("#form input[name=json]").attr("value",JSON.stringify(upsmart.people.people));
},
createForm: function(n) {
item = $("<table> \
<tr><th>Name</th><td class='twoinput'><input name='pfname' placeholder='Jane'/><input name='plname' placeholder='Smith'/></tr> \
<tr><th>Title</th><td><input name='ptitle' placeholder='Chief Executive Officer'/></tr> \
<tr><th>Short Bio</th><td><textarea name='pbio'/></textarea></td></tr> \
<tr><th>Photo</th><td><input id='photo_upload' name='photo'/> <input type='button' id='photo_button' value='Open Media Library'/></tr> \
<tr><td colspan='2'>(Optional) Upload a photo of <acronym title='Replace this with their first name?'>this person</acronym>. The bigger the better—don't worry, we'll scale this down for you.</td></tr> \
</table>\
<br/>\
<table>\
<tr><th>Education</th><td><textarea name='pedu'/></textarea></td></tr> \
<tr><th>Relevant Skills</th><td><textarea name='pskills'/></textarea></td></tr> \
<tr><th>Professional Experience</th><td><textarea name='pprof'/></textarea></td></tr> \
<tr><th>Awards & Recognition</th><td><textarea name='pawards'/></textarea></td></tr> \
<tr><th>Community Involvement</th><td><textarea name='pcommunity'/></textarea></td></tr> \
<tr><th>Years with the Company</th><td><input type='text' size='2' maxlength='2' name='pyears'/>years</td></tr>\
<tr><th>Compensation Details</th><td><textarea name='pcompensation'/></textarea></td></tr> \
</table>\
<br/>\
<table>\
<tr><td id='ownershipquestion' colspan='2'>Does this person have an ownership stake?</td><td id='ownershipbox'><input type='checkbox' id='part_owner' name='owner' value='1'/>Yes</td></tr>\
<tr><td id='ownershipperquestion' colspan='2'>What percentage does this person hold?</td><td id='ownershipperanswer'><input type='text' size='3' maxlength='3' id='ownership_percentage' name='ownership_percentage'/>%</td></tr>\
</table>");
if(n < upsmart.people.people.length) {
p = upsmart.people.people[n];
item.find("input[name=pfname]").attr("value",p.fname);
item.find("input[name=plname]").attr("value",p.lname);
item.find("input[name=ptitle]").attr("value",p.title);
item.find("textarea[name=pbio]").attr("value",p.bio);
item.find("input[name=photo]").attr("value",p.photo);
item.find("input[name=owner]").attr("value",p.owner);
item.find("input[name=ownership_percentage]").attr("value",p.ownership_percentage);
item.find("input[name=pedu]").attr("value",p.edu);
item.find("input[name=pskills]").attr("value",p.skills);
item.find("input[name=pprof]").attr("value",p.prof);
item.find("input[name=pawards]").attr("value",p.awards);
item.find("input[name=pcommunity]").attr("value",p.community);
item.find("input[name=pyears]").attr("value",p.years);
item.find("input[name=pcompensation]").attr("value",p.compensation);
}
return item;
},
showAddDialog: function() {
$("#dialog").data("person",upsmart.people.pcounter);
$("#dialog").html(upsmart.people.createForm(upsmart.people.pcounter));
$("#photo_button").click(open_media_library);
upsmart.people.pcounter++;
$("#dialog").dialog({
width: 600,
modal: true,
buttons: {
"Add": upsmart.people.addPerson,
"Cancel": function() {
$(this).dialog("close");
}
}
});
},
showEditDialog: function() {
pid = $(this).data("person");
$("#dialog").data("person",pid);
$("#dialog").html(upsmart.people.createForm(pid));
$("#photo_button").click(open_media_library);
$("#dialog").dialog({
width: 600,
modal: true,
buttons: {
"Save": upsmart.people.addPerson,
"Cancel": function() {
$(this).dialog("close");
}
}
});
},
addPerson: function() {
//Create a json object for this person.
var person = {
id: $("#dialog").data("person"),
fname: $("#dialog input[name=pfname]").attr("value"),
lname: $("#dialog input[name=plname]").attr("value"),
title: $("#dialog input[name=ptitle]").attr("value"),
bio: $("#dialog textarea[name=pbio]").attr("value"),
photo: $("#dialog input[name=photo]").attr("value"),
owner: $("#dialog input[name=owner]").attr("value"),
ownership_percentage: $("#dialog input[name=ownership_percentage]").attr("value"),
edu: $("#dialog input[name=pedu]").attr("value"),
skills: $("#dialog input[name=pskills]").attr("value"),
prof: $("#dialog input[name=pprof]").attr("value"),
awards: $("#dialog input[name=pawards]").attr("value"),
community: $("#dialog input[name=pcommunity]").attr("value"),
years: $("#dialog input[name=pyears]").attr("value"),
compensation: $("#dialog input[name=pcompensation]").attr("value"),
}
$(this).dialog("close");
upsmart.people.finishAddPerson(person);
},
finishAddPerson: function(person) {
upsmart.people.people[person.id] = person;
if($("#person"+person.id).length == 0) {
box = $("<div class='person'></div>").attr("id","person"+person.id);
box.data("person",person.id);
box.insertBefore($("#new"));
} else {
box = $("#person"+person.id);
box.html("");
}
box.append($("<img/>").attr("src",person.photo));
box.append($("<div/>").attr("class","label").html(person.fname+" "+person.lname));
}
}
$(document).ready(upsmart.people.init);
}(jQuery));
The javascript above is embedded in a page created with the following php function:
function create_people_form() {
global $wpdb;
$people = $wpdb->get_results($wpdb->prepare("SELECT * FROM my_database WHERE wordpress_id=%d",get_current_user_id()),ARRAY_A);
$out = '';
if(count($people) > 0) {
$out .= "<script type='text/javascript'>jQuery(document).ready(function() {
";
foreach($people as $i => $p) {
$p['id'] = $i;
unset($p['wordpress_id']);
unset($p['person_id']);
$out .= "upsmart.people.finishAddPerson(".json_encode($p).");
";
}
$out .= "upsmart.people.pcounter = ".($i+1).";});</script>";
}
$media_url = admin_url("media-upload.php?type=image&TB_iframe=true");
$out .= <<<EOHTML
<script type="text/javascript">
media_input = "#photo_upload";
function open_media_library() {
tb_show("", "{$media_url}");
window.send_to_editor = function(html) {
imgurl = jQuery("img",html).attr("src");
jQuery(media_input).val(imgurl);
tb_remove();
}
return false;
}
</script>
<style type="text/css">
#TB_overlay {z-index: 2000 !important;}
#TB_window {z-index: 2002 !important;}
</style>
<div id='team'>
<div id='new'>+</div></div>
<br/>
<div id='dialog'></div>
<form method='post' id="form">
<input type='hidden' name='json'/>
<input type='submit' value='Save'/>
</form>
EOHTML;
return $out;
}
And is saved by the following php function
function create_people_save() {
global $wpdb;
$data = json_decode(stripslashes($_POST['json']));
$wpdb->query($wpdb->prepare("DELETE FROM my_database WHERE wordpress_id = %d",array(get_current_user_id())));
foreach($data as $p) {
if($p == null) continue;
$result = $wpdb->query($wpdb->prepare("INSERT INTO my_database
(wordpress_id,fname,lname,title,bio,photo,owner,percent_owner,founder,edu,skills,prof,awards,community,years,compensation)
VALUES(%d,%s,%s,%s,%s,%s,%d,%d,%d,%s,%s,%s,%s,%s,%d,%s)",
array(
get_current_user_id(),
$p->fname,
$p->lname,
$p->title,
$p->bio,
$p->photo,
$p->owner,
$p->ownership_percentage,
$p->founder,
$p->edu,
$p->skills,
$p->prof,
$p->awards,
$p->community,
$p->years,
$p->compensation,
)
));
echo mysql_error();
if($result === false) return false;
}
return true;
}
Any help is greatly appreciated.
Thanks for any help you might be able to give
