将动态元素添加到可排序列表中，并使用POST/GET (jquery/javascript)发送它们

Question

我真的在努力完成这个脚本，但事实是我对jquery很糟糕(我是一个PHP开发人员)。

这个想法是这样的，我有这个小表单http://jsfiddle.net/34xEg/2/。我希望我的用户能够添加许多他们想要的工作经验，所以任何时候他点击添加工作表单中的所有字段都变为空，信息转到一个列表(一个可排序的列表，如http://www.ryancramer.com/projects/asmselect/examples/example1.html .

之后，当用户完成后，他可以从列表中删除项目，或者使用带有POST或GET操作的按钮发送它们。

的想法是，我真的不知道如何实现这一点，我完成了表单和pickdate函数(用鼠标点击从或到字段)，如果你们可以帮助我如何将信息添加到可排序列表的示例脚本(可能在jquery中)它会很好，或者如果你有一个大的心脏，你可以向我展示一个完整的例子，这将是伟大的!

谢谢你的帮助!

Answer 1

你可以使用Append函数或appendTo或类似的东西，要删除一个元素，你可以使用remove函数从列表中删除项…点击后你可以循环遍历每个元素然后你可以发布它们或者你想怎么处理它们

Answer 2

http://api.jquery.com/serialize/
http://api.jquery.com/jQuery.post/

jQuery让它变得非常简单。查看文档

数据是否可排序取决于您如何显示它。与数据如何进入数据库无关——它们是两个独立的问题。

Answer 3

给添加作业按钮一个id。jQuery事件。

jQuery('#addwork').click( function(e){
  addJob( jQuery('#comp_name').val(), jQuery('#jobdesc').val(), function(c){
     // On callback display confirmation, and clear the entry fields
  });
});

addJob可能会这样做:

function addJob( comp_name, jobdesc, jobtitle, etc){
   var newEl = '<div class="jobnode"><h3 class="jobheader">'+jobtitle+'</h3><p class="jobdescription">'+jobdesc+'</p> ...etc';
   // add new element to element collection in the dom using appendTo just like above poster says
   var ins = jQuery('#sortableparent').appendTo(newEl);
   if (ins.length >= 1) {
     return true;
   }
};

当用户准备保存时，递归遍历dom父元素并构建一个JSON对象，&把它作为你的美元寄过去。ajax数据。

var jobs = {
  {'title':'Helpdesk Peon','desc':'Answer phone, respond to issue tickets, bang head on desk'},
  {'title':'Boss Man','desc':'Answer phone, give orders, drink from snifter, bang head on desk'},
  {'title':'Office Assistant','desc':'Answer phone, give orders, drink from snifter, bang head on desk'}
};